From c60506cc36b66f77997e0c3a1abcbb15ab583786 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 19 Jun 2026 22:56:00 +0000
Subject: [PATCH 1/2] perf(frontend): lazy-load heavy components to shrink
 initial bundle

Defer loading components that are off the initial render path until they
are first needed, keeping them out of the bundle that loads on page entry.

- Add `lazyComponent` composable: a tiny rune-based holder that dynamic-
  imports a component on first `load()` and exposes it for `{@const}`
  rendering, with the component type inferred from the module so prop/
  binding type-checking stays intact.
- CommandPalette: loaded on the first Cmd/Ctrl+K and mounted open via a
  new `autoOpen` prop. It was previously imported by AppShell, i.e. in the
  initial chunk of every authenticated route (~27 KB). AppShell now owns
  the shortcut that triggers the load.
- FileViewer + WopiEditor: loaded when a preview/editor first opens, across
  files, recent, favorites and shared-with-me.
- PhotoLightbox / PlacesMap / PeopleView: loaded on first lightbox open or
  when the places/people tab is selected (the latter also defers maplibre).

Once loaded a component stays mounted and behaves exactly as before, so
behavior is unchanged on the second use onward.
---
 frontend/src/lib/components/AppShell.svelte   | 18 ++++++++-
 .../src/lib/components/CommandPalette.svelte  | 16 ++++++++
 .../lib/composables/lazyComponent.svelte.ts   | 39 +++++++++++++++++++
 frontend/src/routes/favorites/+page.svelte    | 14 ++++++-
 .../src/routes/files/[...path]/+page.svelte   | 36 ++++++++++++-----
 frontend/src/routes/photos/+page.svelte       | 32 ++++++++++++---
 frontend/src/routes/recent/+page.svelte       | 14 ++++++-
 .../src/routes/shared-with-me/+page.svelte    | 14 ++++++-
 8 files changed, 160 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/lib/composables/lazyComponent.svelte.ts

diff --git a/frontend/src/lib/components/AppShell.svelte b/frontend/src/lib/components/AppShell.svelte
index f291aa17..de5b2d8b 100644
--- a/frontend/src/lib/components/AppShell.svelte
+++ b/frontend/src/lib/components/AppShell.svelte
@@ -6,7 +6,7 @@
 	import { searchFiles } from '$lib/api/endpoints/search';
 	import { fileInlineUrl } from '$lib/api/endpoints/files';
 	import type { FileItem, FolderItem } from '$lib/api/types';
-	import CommandPalette from '$lib/components/CommandPalette.svelte';
+	import { lazyComponent } from '$lib/composables/lazyComponent.svelte';
 	import Icon from '$lib/icons/Icon.svelte';
 	import { iconNameFromClass } from '$lib/utils/display';
 	import { userInitials, avatarColorIndex } from '$lib/utils/avatar';
@@ -19,6 +19,10 @@
 
 	let { children }: { children: Snippet } = $props();
 
+	// The command palette is loaded on its first Cmd/Ctrl+K and mounted open.
+	// Until then its ~400-line module stays out of the initial bundle.
+	const palette = lazyComponent(() => import('$lib/components/CommandPalette.svelte'));
+
 	interface NavLink {
 		href: string;
 		label: string;
@@ -224,6 +228,13 @@
 <svelte:window
 	onclick={closeMenus}
 	onkeydown={(e) => {
+		// First Cmd/Ctrl+K loads the palette and mounts it open; once mounted,
+		// the palette's own handler takes over toggling/closing.
+		if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k' && !palette.component) {
+			e.preventDefault();
+			void palette.load();
+			return;
+		}
 		if (e.key !== 'Escape') return;
 		if (aboutOpen) aboutOpen = false;
 		else if (searchActive) closeMobileSearch();
@@ -683,7 +694,10 @@
 	</div>
 {/if}
 
-<CommandPalette />
+{#if palette.component}
+	{@const CommandPalette = palette.component}
+	<CommandPalette autoOpen />
+{/if}
 
 <style>
 	/* Body becomes the sidebar+main flex row only while the shell is mounted. */
diff --git a/frontend/src/lib/components/CommandPalette.svelte b/frontend/src/lib/components/CommandPalette.svelte
index 43958019..d49bdf17 100644
--- a/frontend/src/lib/components/CommandPalette.svelte
+++ b/frontend/src/lib/components/CommandPalette.svelte
@@ -17,6 +17,10 @@
 		run: () => void;
 	}
 
+	// `autoOpen` lets a lazy host (AppShell) mount us already-open on the first
+	// Cmd/Ctrl+K, since our own key listener only exists once we're mounted.
+	let { autoOpen = false }: { autoOpen?: boolean } = $props();
+
 	let open = $state(false);
 	// Drives the enter animation: flipped on after mount so the overlay/panel
 	// transition from their initial (faded/offset) state.
@@ -30,6 +34,18 @@
 	// Element focused before the palette opened, restored on close.
 	let prevFocus: HTMLElement | null = null;
 
+	// When mounted already-open (autoOpen), run the same enter sequence the
+	// keyboard path uses. Guarded so it fires once, not on every reopen.
+	let didAutoOpen = false;
+	$effect(() => {
+		if (didAutoOpen || !autoOpen) return;
+		didAutoOpen = true;
+		open = true;
+		prevFocus = document.activeElement as HTMLElement | null;
+		requestAnimationFrame(() => (entered = true));
+		queueMicrotask(() => input?.focus());
+	});
+
 	function close() {
 		open = false;
 		entered = false;
diff --git a/frontend/src/lib/composables/lazyComponent.svelte.ts b/frontend/src/lib/composables/lazyComponent.svelte.ts
new file mode 100644
index 00000000..4ec04149
--- /dev/null
+++ b/frontend/src/lib/composables/lazyComponent.svelte.ts
@@ -0,0 +1,39 @@
+/**
+ * Defer loading a heavy Svelte component until it is first needed.
+ *
+ * The dynamic `import()` puts the component in its own chunk, keeping it out of
+ * the initial bundle. The component type is inferred from the module's default
+ * export, so binding and prop typing at the call site stay fully checked. Call
+ * `load()` right before the component is shown, then render it once `component`
+ * is non-null:
+ *
+ * ```svelte
+ * const viewer = lazyComponent(() => import('$lib/components/FileViewer.svelte'));
+ * $effect(() => { if (open) void viewer.load(); });
+ * …
+ * {#if viewer.component}
+ *   {@const Viewer = viewer.component}
+ *   <Viewer bind:open {file} />
+ * {/if}
+ * ```
+ */
+export function lazyComponent<C>(loader: () => Promise<{ default: C }>) {
+	let component = $state<C | null>(null);
+	let pending: Promise<void> | null = null;
+
+	return {
+		get component() {
+			return component;
+		},
+		/** Idempotent: kicks off the import once, resolves when the chunk is ready. */
+		load(): Promise<void> {
+			if (component) return Promise.resolve();
+			if (!pending) {
+				pending = loader().then((mod) => {
+					component = mod.default;
+				});
+			}
+			return pending;
+		}
+	};
+}
diff --git a/frontend/src/routes/favorites/+page.svelte b/frontend/src/routes/favorites/+page.svelte
index c5d7965c..df2f5f80 100644
--- a/frontend/src/routes/favorites/+page.svelte
+++ b/frontend/src/routes/favorites/+page.svelte
@@ -17,7 +17,7 @@
 	import { renameFile, deleteFile } from '$lib/api/endpoints/files';
 	import { renameFolder, deleteFolder } from '$lib/api/endpoints/folders';
 	import type { FileItem } from '$lib/api/types';
-	import FileViewer from '$lib/components/FileViewer.svelte';
+	import { lazyComponent } from '$lib/composables/lazyComponent.svelte';
 	import MoveDialog from '$lib/components/MoveDialog.svelte';
 	import ShareDialog from '$lib/components/ShareDialog.svelte';
 	import ResourceList, {
@@ -123,6 +123,13 @@
 	let viewerOpen = $state(false);
 	let viewerFile = $state<FileItem | null>(null);
 
+	// The file preview is loaded the first time a file is opened, keeping its
+	// module out of this route's initial chunk.
+	const fileViewer = lazyComponent(() => import('$lib/components/FileViewer.svelte'));
+	$effect(() => {
+		if (viewerOpen) void fileViewer.load();
+	});
+
 	function open(entry: ResourceEntry) {
 		if (entry.kind === 'folder') {
 			goto(`/files/${entry.id}`);
@@ -305,7 +312,10 @@
 	{/snippet}
 </ResourceList>
 
-<FileViewer bind:open={viewerOpen} file={viewerFile} />
+{#if fileViewer.component}
+	{@const FileViewer = fileViewer.component}
+	<FileViewer bind:open={viewerOpen} file={viewerFile} />
+{/if}
 <MoveDialog
 	bind:open={moveOpen}
 	item={moveTarget}
diff --git a/frontend/src/routes/files/[...path]/+page.svelte b/frontend/src/routes/files/[...path]/+page.svelte
index 04815336..c9d3a223 100644
--- a/frontend/src/routes/files/[...path]/+page.svelte
+++ b/frontend/src/routes/files/[...path]/+page.svelte
@@ -37,12 +37,11 @@
 	import { apiFetch } from '$lib/api/client';
 	import { getCsrfHeaders } from '$lib/api/csrf';
 	import type { FileItem, FolderItem, ItemType } from '$lib/api/types';
-	import FileViewer from '$lib/components/FileViewer.svelte';
 	import ListToolbar from '$lib/components/ListToolbar.svelte';
 	import VirtualList from '$lib/components/VirtualList.svelte';
 	import MoveDialog from '$lib/components/MoveDialog.svelte';
 	import ShareDialog from '$lib/components/ShareDialog.svelte';
-	import WopiEditor from '$lib/components/WopiEditor.svelte';
+	import { lazyComponent } from '$lib/composables/lazyComponent.svelte';
 	import { t } from '$lib/i18n/index.svelte';
 	import { confirmDialog, promptDialog } from '$lib/stores/dialogs.svelte';
 	import { files as filesStore } from '$lib/stores/files.svelte';
@@ -59,6 +58,12 @@
 	import { formatDate, iconNameFromClass } from '$lib/utils/display';
 	import { gridColumns } from '$lib/utils/grid';
 
+	// File preview and the WOPI editor are heavy and only appear on demand, so
+	// their modules load the first time the user opens one (see the effects that
+	// call `.load()` when `viewerOpen` / `wopiOpen` flip true).
+	const fileViewer = lazyComponent(() => import('$lib/components/FileViewer.svelte'));
+	const wopiEditor = lazyComponent(() => import('$lib/components/WopiEditor.svelte'));
+
 	// The URL rest param is the trail of folder ids from home's children down.
 	// /files → home root; /files/a/b → folder b inside a inside home.
 	const pathSegments = $derived((page.params.path ?? '').split('/').filter((s) => s.length > 0));
@@ -806,6 +811,13 @@
 	let wopiOpen = $state(false);
 	let wopiAction = $state<'edit' | 'view'>('edit');
 	let wopiFile = $state<{ id: string; name: string } | null>(null);
+
+	// Pull in the on-demand modules the moment they're first needed; after that
+	// the chunk is cached and the component stays mounted (controlled by `open`).
+	$effect(() => {
+		if (viewerOpen) void fileViewer.load();
+		if (wopiOpen) void wopiEditor.load();
+	});
 	// Editability of the current context-menu target file, resolved async.
 	let ctxCanEditWopi = $state(false);
 
@@ -1636,13 +1648,19 @@
 	item={actionTarget}
 	onshared={(id) => (sharedIds = new Set(sharedIds).add(id))}
 />
-<FileViewer bind:open={viewerOpen} file={viewerFile} />
-<WopiEditor
-	bind:open={wopiOpen}
-	fileId={wopiFile?.id ?? null}
-	fileName={wopiFile?.name ?? ''}
-	action={wopiAction}
-/>
+{#if fileViewer.component}
+	{@const FileViewer = fileViewer.component}
+	<FileViewer bind:open={viewerOpen} file={viewerFile} />
+{/if}
+{#if wopiEditor.component}
+	{@const WopiEditor = wopiEditor.component}
+	<WopiEditor
+		bind:open={wopiOpen}
+		fileId={wopiFile?.id ?? null}
+		fileName={wopiFile?.name ?? ''}
+		action={wopiAction}
+	/>
+{/if}
 
 {#if ctxOpen && ctxTarget}
 	<div
diff --git a/frontend/src/routes/photos/+page.svelte b/frontend/src/routes/photos/+page.svelte
index 91a5e4f9..db3a6a87 100644
--- a/frontend/src/routes/photos/+page.svelte
+++ b/frontend/src/routes/photos/+page.svelte
@@ -1,10 +1,8 @@
 <script lang="ts">
 	import Button from '$lib/components/Button.svelte';
 	import EmptyState from '$lib/components/EmptyState.svelte';
-	import PeopleView from '$lib/components/PeopleView.svelte';
-	import PhotoLightbox from '$lib/components/PhotoLightbox.svelte';
-	import PlacesMap from '$lib/components/PlacesMap.svelte';
 	import VirtualRows from '$lib/components/VirtualRows.svelte';
+	import { lazyComponent } from '$lib/composables/lazyComponent.svelte';
 	import { useSelection } from '$lib/composables/useSelection.svelte';
 	import { errorToast } from '$lib/utils/errors';
 	import { onMount } from 'svelte';
@@ -24,6 +22,13 @@
 
 	type Tab = 'moments' | 'places' | 'people';
 	let tab = $state<Tab>('moments');
+
+	// The lightbox, the (maplibre-backed) places map and the people view are all
+	// heavy and off the initial path, so each loads on first use: the lightbox
+	// when a photo is opened, the map/people views when their tab is selected.
+	const photoLightbox = lazyComponent(() => import('$lib/components/PhotoLightbox.svelte'));
+	const placesMap = lazyComponent(() => import('$lib/components/PlacesMap.svelte'));
+	const peopleView = lazyComponent(() => import('$lib/components/PeopleView.svelte'));
 	let peopleAvailable = $state(false);
 
 	let items = $state<PhotoItem[]>([]);
@@ -44,6 +49,12 @@
 	const selected = useSelection();
 	let lightbox = $state(-1); // index into `items`, -1 = closed
 
+	$effect(() => {
+		if (lightbox >= 0) void photoLightbox.load();
+		if (tab === 'places') void placesMap.load();
+		else if (tab === 'people') void peopleView.load();
+	});
+
 	/** Client-generated video frame thumbnails (file id → data/URL). */
 	let videoThumbs = $state<Record<string, string>>({});
 
@@ -487,11 +498,20 @@
 	<div bind:this={sentinel} class="sentinel" aria-hidden="true"></div>
 	{#if loading}<p class="status">{t('common.loading', 'Loading…')}</p>{/if}
 
-	<PhotoLightbox {items} bind:index={lightbox} onDelete={onDeletePhoto} />
+	{#if photoLightbox.component}
+		{@const PhotoLightbox = photoLightbox.component}
+		<PhotoLightbox {items} bind:index={lightbox} onDelete={onDeletePhoto} />
+	{/if}
 {:else if tab === 'places'}
-	<PlacesMap />
+	{#if placesMap.component}
+		{@const PlacesMap = placesMap.component}
+		<PlacesMap />
+	{/if}
 {:else if tab === 'people'}
-	<PeopleView />
+	{#if peopleView.component}
+		{@const PeopleView = peopleView.component}
+		<PeopleView />
+	{/if}
 {/if}
 
 {#snippet tile(photo: PhotoItem, sizeStyle?: string)}
diff --git a/frontend/src/routes/recent/+page.svelte b/frontend/src/routes/recent/+page.svelte
index 2205294f..32ac1585 100644
--- a/frontend/src/routes/recent/+page.svelte
+++ b/frontend/src/routes/recent/+page.svelte
@@ -17,7 +17,7 @@
 	import { fileDownloadUrl, renameFile, deleteFile } from '$lib/api/endpoints/files';
 	import { renameFolder, deleteFolder } from '$lib/api/endpoints/folders';
 	import type { FileItem, ItemType } from '$lib/api/types';
-	import FileViewer from '$lib/components/FileViewer.svelte';
+	import { lazyComponent } from '$lib/composables/lazyComponent.svelte';
 	import MoveDialog from '$lib/components/MoveDialog.svelte';
 	import ShareDialog from '$lib/components/ShareDialog.svelte';
 	import ResourceList, {
@@ -134,6 +134,13 @@
 	let viewerOpen = $state(false);
 	let viewerFile = $state<FileItem | null>(null);
 
+	// The file preview is loaded the first time a file is opened, keeping its
+	// module out of this route's initial chunk.
+	const fileViewer = lazyComponent(() => import('$lib/components/FileViewer.svelte'));
+	$effect(() => {
+		if (viewerOpen) void fileViewer.load();
+	});
+
 	function open(entry: ResourceEntry) {
 		if (entry.kind === 'folder') {
 			goto(`/files/${entry.id}`);
@@ -349,7 +356,10 @@
 	{/snippet}
 </ResourceList>
 
-<FileViewer bind:open={viewerOpen} file={viewerFile} />
+{#if fileViewer.component}
+	{@const FileViewer = fileViewer.component}
+	<FileViewer bind:open={viewerOpen} file={viewerFile} />
+{/if}
 <MoveDialog
 	bind:open={moveOpen}
 	item={moveTarget}
diff --git a/frontend/src/routes/shared-with-me/+page.svelte b/frontend/src/routes/shared-with-me/+page.svelte
index ab101b80..2a49b1dd 100644
--- a/frontend/src/routes/shared-with-me/+page.svelte
+++ b/frontend/src/routes/shared-with-me/+page.svelte
@@ -4,7 +4,7 @@
 	import { onMount } from 'svelte';
 	import { fetchSharedWithMe, type IncomingGrantItem } from '$lib/api/endpoints/grants';
 	import type { FileItem } from '$lib/api/types';
-	import FileViewer from '$lib/components/FileViewer.svelte';
+	import { lazyComponent } from '$lib/composables/lazyComponent.svelte';
 	import ResourceList, { type ResourceEntry } from '$lib/components/ResourceList.svelte';
 	import { t } from '$lib/i18n/index.svelte';
 
@@ -48,6 +48,13 @@
 	let viewerOpen = $state(false);
 	let viewerFile = $state<FileItem | null>(null);
 
+	// The file preview is loaded the first time a file is opened, keeping its
+	// module out of this route's initial chunk.
+	const fileViewer = lazyComponent(() => import('$lib/components/FileViewer.svelte'));
+	$effect(() => {
+		if (viewerOpen) void fileViewer.load();
+	});
+
 	function open(entry: ResourceEntry) {
 		if (entry.kind === 'folder') {
 			goto(`/files/${entry.id}`);
@@ -76,4 +83,7 @@
 	onopen={open}
 />
 
-<FileViewer bind:open={viewerOpen} file={viewerFile} />
+{#if fileViewer.component}
+	{@const FileViewer = fileViewer.component}
+	<FileViewer bind:open={viewerOpen} file={viewerFile} />
+{/if}

From f831636cf9f8c8deeeb22882e58ede622abbfe91 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 19 Jun 2026 23:06:12 +0000
Subject: [PATCH 2/2] perf(frontend): parallelize video thumbs, batch
 owner-cache writes, minor tweaks

- photos: generate + upload the three video-thumbnail sizes in parallel via
  Promise.allSettled instead of a sequential await loop; previewData is still
  captured before its upload so the local preview survives a failed upload.
- useOwnerCache: resolve the batch, then apply a single reactive assignment
  to `#names` instead of spread-copying the record once per id (fewer copies
  and fewer derive re-runs on large resolves).
- admin: migration status polling slowed from 2s to 5s.
- files store: soft cap (10k) on the per-item selection toggle. Bulk
  "select all" in the views is intentionally left uncapped.
---
 .../src/lib/composables/useOwnerCache.svelte.ts  | 16 +++++++++-------
 frontend/src/lib/stores/files.svelte.ts          |  7 ++++++-
 frontend/src/routes/admin/+page.svelte           |  2 +-
 frontend/src/routes/photos/+page.svelte          | 15 ++++++++++-----
 4 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/frontend/src/lib/composables/useOwnerCache.svelte.ts b/frontend/src/lib/composables/useOwnerCache.svelte.ts
index f66fe4bb..4a25eb1e 100644
--- a/frontend/src/lib/composables/useOwnerCache.svelte.ts
+++ b/frontend/src/lib/composables/useOwnerCache.svelte.ts
@@ -31,14 +31,16 @@ export class OwnerCache {
 
 	/** Resolve every not-yet-cached id in parallel; nullish ids are skipped. */
 	async resolve(ids: Iterable<string | null | undefined>): Promise<void> {
-		const unique = [...new Set([...ids].filter((id): id is string => !!id))];
-		await Promise.all(
-			unique.map(async (id) => {
-				if (this.#names[id]) return;
-				const name = await this.#resolver(id);
-				this.#names = { ...this.#names, [id]: name };
-			})
+		const pending = [...new Set([...ids].filter((id): id is string => !!id))].filter(
+			(id) => !this.#names[id]
 		);
+		if (pending.length === 0) return;
+		const resolved = await Promise.all(
+			pending.map(async (id) => [id, await this.#resolver(id)] as const)
+		);
+		// One reactive assignment for the whole batch instead of one per id, so a
+		// large resolve doesn't spread-copy the record N times (and re-run derives N times).
+		this.#names = { ...this.#names, ...Object.fromEntries(resolved) };
 	}
 }
 
diff --git a/frontend/src/lib/stores/files.svelte.ts b/frontend/src/lib/stores/files.svelte.ts
index afd5200c..44de3cea 100644
--- a/frontend/src/lib/stores/files.svelte.ts
+++ b/frontend/src/lib/stores/files.svelte.ts
@@ -96,10 +96,15 @@ class FilesStore {
 		this.selection = new Set();
 	}
 
+	// Soft ceiling so the per-item toggle can't grow the set without bound.
+	// (Bulk "select all" lives in the views and intentionally isn't capped —
+	// silently dropping ids there would break batch delete/move.)
+	static readonly MAX_SELECTION = 10_000;
+
 	toggleSelected(id: string): void {
 		const next = new Set(this.selection);
 		if (next.has(id)) next.delete(id);
-		else next.add(id);
+		else if (next.size < FilesStore.MAX_SELECTION) next.add(id);
 		this.selection = next;
 	}
 }
diff --git a/frontend/src/routes/admin/+page.svelte b/frontend/src/routes/admin/+page.svelte
index 153fa157..5f3f7aea 100644
--- a/frontend/src/routes/admin/+page.svelte
+++ b/frontend/src/routes/admin/+page.svelte
@@ -320,7 +320,7 @@
 		try {
 			migration = await getMigration();
 			if (migration.status === 'running') {
-				if (!migrationTimer) migrationTimer = setInterval(loadMigration, 2000);
+				if (!migrationTimer) migrationTimer = setInterval(loadMigration, 5000);
 			} else {
 				stopMigrationPoll();
 			}
diff --git a/frontend/src/routes/photos/+page.svelte b/frontend/src/routes/photos/+page.svelte
index db3a6a87..140449e9 100644
--- a/frontend/src/routes/photos/+page.svelte
+++ b/frontend/src/routes/photos/+page.svelte
@@ -301,11 +301,16 @@
 				['large', 800, 800]
 			];
 			let previewData = '';
-			for (const [size, w, h] of SIZES) {
-				const blob = await bitmapToBlob(bitmap, w, h);
-				if (size === 'preview') previewData = await blobToDataUrl(blob);
-				await uploadThumbnail(file.id, size, blob).catch(() => {});
-			}
+			// Render the blobs and push all three sizes in parallel; `previewData`
+			// is captured before its upload so the local preview shows even if that
+			// upload fails (allSettled swallows per-size failures, as before).
+			await Promise.allSettled(
+				SIZES.map(async ([size, w, h]) => {
+					const blob = await bitmapToBlob(bitmap, w, h);
+					if (size === 'preview') previewData = await blobToDataUrl(blob);
+					await uploadThumbnail(file.id, size, blob);
+				})
+			);
 			if (previewData) videoThumbs = { ...videoThumbs, [file.id]: previewData };
 		} catch {
 			// Keep the generic play badge on failure.