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.
This commit is contained in:
Claude
2026-06-19 22:56:00 +00:00
parent b54c9a3e71
commit c60506cc36
8 changed files with 160 additions and 23 deletions
@@ -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;
}
};
}