scrim Loader

Builds a signal that waits at least this many milliseconds, in parallel with whatever else you give it — the same function whether you hand it to until or to a router's loader.

API

tsx

scrimLoader(ms: number, ...extra: ScrimSignal[]): ScrimSignal;

prop	type	default
`ms?`	`number`	`—`	milliseconds the returned signal waits at minimum
`…extra`	`ScrimSignal[]`	`[]`	awaited alongside the delay; each is a thunk, called only once the returned signal runs

Examples

As until

The most common case: wait for something browser-only, fonts here, alongside a minimum. The extra argument is a thunk so nothing runs until the signal does — document.fonts.ready is never touched on the server.

tsx

const appReady = scrimLoader(500, () => document.fonts.ready);

<Scrim until={appReady} isLoading={isEnteringSection} durationTime={500}>
  <SplashContent />
</Scrim>

As a route loader

The same call with no extras, handed straight to a router. On the server it resolves immediately — typeof document === "undefined" is true there — so it only ever delays a real, client-side transition.

tsx

const routeLoader = scrimLoader(500);

export const Route = createFileRoute("/section")({
  component: Section,
  loader: routeLoader,
});

One number, not two

Both of the above tend to live in the same config file, waiting roughly as long as the transition each covers for — which is the actual point of the utility: write the number once, pass durationTime the same constant, and nothing has to be kept in sync by hand.

tsx

export const SECTION_DURATION_MS = 500;

export const appReady = scrimLoader(SECTION_DURATION_MS, () => document.fonts.ready);
export const routeLoader = scrimLoader(SECTION_DURATION_MS);