Collection Speed Improvements (#874)

* Add UltraSlimCollectionSerializer and update CollectionViewSet for optimized listing

- Introduced UltraSlimCollectionSerializer for efficient data representation.
- Updated CollectionViewSet to use the new serializer for list actions.
- Enhanced queryset optimizations with prefetching for related images.
- Modified frontend components to support SlimCollection type for better performance.

* Optimize rendering of collection cards by adding a unique key to the each block

frontend/src/lib/components/CollectionCard.svelte

@@ -9,7 +9,7 @@
 	import ShareVariant from '~icons/mdi/share-variant';
 
 	import { goto } from '$app/navigation';
-	import type { Location, Collection, User } from '$lib/types';
+	import type { Location, Collection, User, SlimCollection, ContentImage } from '$lib/types';
 	import { addToast } from '$lib/toasts';
 	import { t } from 'svelte-i18n';
 
@@ -55,7 +55,21 @@
 		}
 	}
 
-	export let collection: Collection;
+	export let collection: Collection | SlimCollection;
+
+	let location_images: ContentImage[] = [];
+	if ('location_images' in collection) {
+		location_images = collection.location_images;
+	} else {
+		location_images = collection.locations.flatMap((location: Location) => location.images);
+	}
+
+	let locationLength: number = 0;
+	if ('location_count' in collection) {
+		locationLength = collection.location_count;
+	} else {
+		locationLength = collection.locations.length;
+	}
 
 	async function deleteCollection() {
 		let res = await fetch(`/api/collections/${collection.id}`, {
@@ -92,11 +106,7 @@
 >
 	<!-- Image Carousel -->
 	<div class="relative overflow-hidden rounded-t-2xl">
-		<CardCarousel
-			images={collection.locations.flatMap((location) => location.images)}
-			name={collection.name}
-			icon="📚"
-		/>
+		<CardCarousel images={location_images} name={collection.name} icon="📚" />
 
 		<!-- Badge Overlay -->
 		<div class="absolute top-4 left-4 flex flex-col gap-2">
@@ -124,7 +134,7 @@
 
 			<!-- Adventure Count -->
 			<p class="text-sm text-base-content/70">
-				{collection.locations.length}
+				{locationLength}
 				{$t('locations.locations')}
 			</p>
 

frontend/src/lib/components/ShareModal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Collection, User } from '$lib/types';
+	import type { Collection, SlimCollection, User } from '$lib/types';
 	import { createEventDispatcher } from 'svelte';
 	const dispatch = createEventDispatcher();
 	import { onMount } from 'svelte';
@@ -11,7 +11,7 @@
 	import Share from '~icons/mdi/share';
 	import Clear from '~icons/mdi/close';
 
-	export let collection: Collection;
+	export let collection: SlimCollection | Collection;
 
 	// Extended user interface to include status
 	interface UserWithStatus extends User {
@@ -160,6 +160,7 @@
 
 <dialog id="my_modal_1" class="modal">
 	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 	<div
 		class="modal-box w-11/12 max-w-5xl p-6 space-y-6"
 		role="dialog"

frontend/src/lib/types.ts

@@ -137,6 +137,23 @@ export type Collection = {
 	link?: string | null;
 };
 
+export type SlimCollection = {
+	id: string;
+	user: string;
+	name: string;
+	description: string;
+	is_public: boolean;
+	start_date: string | null;
+	end_date: string | null;
+	is_archived: boolean;
+	link: string | null;
+	created_at: string;
+	updated_at: string;
+	location_images: ContentImage[];
+	location_count: number;
+	shared_with: string[];
+};
+
 export type GeocodeSearchResult = {
 	lat?: string;
 	lon?: string;