peter
5346efcd10
With Settings -> Appearance -> Startup turned off, every NEW tab or window still opened on Home; only a same-tab reload honoured it. The provider tree mounted before /api/me answered, so NavigationProvider's initializer could not read the per-account opt-out, landed on Home and mirrored ?page=home into the address bar. When App pinned the account a moment later, the re-hydrate re-read that mirror and stayed on Home. The same mount-then-patch shape made a new tab start on default filters, the default theme and the browser language, and correct each after the first paint. BootGate (main.tsx, above the providers) now owns the setup-status and /api/me queries and mounts the tree only once the identity is settled: it pins the tab's account and adopts the account's language in a layout effect, so the first frame of the app is already right. The tree is keyed on the account id, which makes "per-account state is read once, for this account" a structural guarantee. With that, the whole re-hydrate machinery is gone: useAccountRehydrate, the reactive active-account store, the markDirty guards, the pin-deferred saved-view seed and the present-dimension bookkeeping of the shared Channels/Plex links. PrefsProvider, FeedFiltersProvider, usePref and App's panel layouts seed from the me cache instead of adopting it in an effect; the theme is applied in layout effects. The app chunk is fetched in parallel with the probe, and the boot screen only fades its label in after 400 ms, on one clock across the gate and the Suspense fallback. Module switches no longer flash a placeholder either. Measured frame by frame in Chromium and WebKit, every first visit to a module showed "Loading..." for 17-70 ms: the lazy chunk's Suspense fallback, then often the first fetch's LoadingState. Pages are now lazyWithPreload components, and App fetches the chunks of every module the account can reach (plus the channel page) once the first page is idle; a preloaded page renders synchronously and never suspends. LoadingState, the one shared loading visual, fades in only after 300 ms, so a fast load shows nothing in between and a slow one still gets its spinner.
44 lines
1.9 KiB
TypeScript
44 lines
1.9 KiB
TypeScript
import { createElement, lazy, type ComponentType } from "react";
|
|
|
|
// A route-level lazy component whose code can be fetched BEFORE its first render.
|
|
//
|
|
// React.lazy alone suspends on every first render, even when the chunk is already in the browser: the
|
|
// module promise settles a tick later, so the Suspense fallback is committed and painted for a frame or
|
|
// several. On a module switch that is a "Loading…" flash in place of the page, on every first visit.
|
|
// Here, once `preload()` has resolved, the component renders the loaded module synchronously and never
|
|
// suspends at all.
|
|
//
|
|
// Choosing per render (`loaded ?? Lazy`) cannot swap a mounted page's component type and remount it:
|
|
// a render that suspends on `Lazy` is never committed (React discards a suspended new mount), and
|
|
// `loaded` is set before `Lazy`'s own promise resolves — so every committed render of a mount sees the
|
|
// loaded module. Measured, not assumed: the state test in lazyWithPreload.dom.test.tsx stayed green
|
|
// with a per-mount pin removed, in a boundary that was already showing content.
|
|
|
|
export type PreloadableComponent<P extends object> = ComponentType<P> & {
|
|
/** Fetch the component's code now. Idempotent; a failed fetch is retried by the next call. */
|
|
preload: () => Promise<void>;
|
|
};
|
|
|
|
export function lazyWithPreload<P extends object>(
|
|
factory: () => Promise<{ default: ComponentType<P> }>,
|
|
): PreloadableComponent<P> {
|
|
let loaded: ComponentType<P> | null = null;
|
|
let pending: Promise<void> | null = null;
|
|
const preload = () =>
|
|
(pending ??= factory().then(
|
|
(m) => {
|
|
loaded = m.default;
|
|
},
|
|
(err: unknown) => {
|
|
pending = null;
|
|
throw err;
|
|
},
|
|
));
|
|
const Lazy = lazy(() => preload().then(() => ({ default: loaded as ComponentType<P> })));
|
|
|
|
function Preloadable(props: P) {
|
|
return createElement(loaded ?? (Lazy as unknown as ComponentType<P>), props);
|
|
}
|
|
return Object.assign(Preloadable, { preload });
|
|
}
|