alex/voyage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Collection Speed Improvements (#874)

Browse Source 
* 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
This commit is contained in:
Sean Morley
2025-09-22 08:34:23 -04:00
committed by GitHub
parent 240c617010
commit 8a0f7310b0
7 changed files with 203 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/routes/collections/+page.server.ts
View File

@@ -1,7 +1,7 @@
import { redirect } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';
const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
import type { Location, Collection } from '$lib/types';
import type { Location, Collection, SlimCollection } from '$lib/types';
import type { Actions } from '@sveltejs/kit';
import { fetchCSRFToken } from '$lib/index.server';
@@ -62,11 +62,11 @@ export const load = (async (event) => {
next: collectionsData.next,
previous: collectionsData.previous,
count: collectionsData.count,
sharedCollections: sharedData as Collection[],
sharedCollections: sharedData as SlimCollection[],
currentPage,
order_by,
order_direction,
archivedCollections: archivedData as Collection[],
archivedCollections: archivedData as SlimCollection[],
invites: invitesData
}
};

18
frontend/src/routes/collections/+page.svelte
View File

@@ -5,7 +5,7 @@
import CollectionLink from '$lib/components/CollectionLink.svelte';
import CollectionModal from '$lib/components/CollectionModal.svelte';
import NotFound from '$lib/components/NotFound.svelte';
import type { Collection, CollectionInvite } from '$lib/types';
import type { Collection, CollectionInvite, SlimCollection } from '$lib/types';
import { t } from 'svelte-i18n';
import Plus from '~icons/mdi/plus';
@@ -23,9 +23,9 @@
export let data: any;
console.log('Collections page data:', data);
let collections: Collection[] = data.props.adventures || [];
let sharedCollections: Collection[] = data.props.sharedCollections || [];
let archivedCollections: Collection[] = data.props.archivedCollections || [];
let collections: SlimCollection[] = data.props.adventures || [];
let sharedCollections: SlimCollection[] = data.props.sharedCollections || [];
let archivedCollections: SlimCollection[] = data.props.archivedCollections || [];
let newType: string = '';
let resultsPerPage: number = 25;
@@ -142,7 +142,7 @@
}
}
function saveOrCreate(event: CustomEvent<Collection>) {
function saveOrCreate(event: CustomEvent<SlimCollection>) {
if (collections.find((collection) => collection.id === event.detail.id)) {
collections = collections.map((collection) => {
if (collection.id === event.detail.id) {
@@ -156,8 +156,8 @@
isShowingCollectionModal = false;
}
function editCollection(event: CustomEvent<Collection>) {
collectionToEdit = event.detail;
function editCollection(event: CustomEvent<SlimCollection>) {
collectionToEdit = event.detail as unknown as Collection;
isShowingCollectionModal = true;
}
@@ -181,7 +181,7 @@
}
}
function saveEdit(event: CustomEvent<Collection>) {
function saveEdit(event: CustomEvent<SlimCollection>) {
collections = collections.map((adventure) => {
if (adventure.id === event.detail.id) {
return event.detail;
@@ -490,7 +490,7 @@
<div
class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-6"
>
{#each currentCollections as collection}
{#each currentCollections as collection (collection.id)}
<CollectionCard
type=""
{collection}