fix(website-tanstack): stop the pending flash and make intent preloading effective - #480
fix(website-tanstack): stop the pending flash and make intent preloading effective#480IgnazioDS wants to merge 1 commit into
Conversation
…ing effective Addresses the navigation half of aymericzip#462. Two router options were fighting the framework: - defaultPendingMs: 0 entered the pending state on every navigation whose loader had not already resolved, and defaultPendingMinMs (500ms framework default) then held that blank pending frame for at least half a second - the black-screen flash on each route change. Removing the override restores the 1000ms threshold, so pending UI only appears for genuinely slow loads. - defaultPreloadStaleTime: 0 marked every intent/viewport preload stale by the time the user actually clicked, so the loader re-ran and blocked the transition. Hover preloading was effectively disabled. The 0 setting is meant for loaders that delegate caching to an external store (queryClient.ensureQueryData); the doc/blog loaders call server functions directly, so the framework default (30s) is the correct behavior here. Verified against @tanstack/router-core defaults (defaultPendingMs: 1000, defaultPendingMinMs: 500, preloadStaleTime default 30_000).
|
Hey @IgnazioDS I have tested your fix that remove |
|
Hey @aymericzip — that is expected with the middleware enabled: this PR only fixes the navigation flash and the preload re-runs. The Short version:
So with the middleware on, any route/locale/args combination not covered by the prerender pass is guaranteed to crash on navigation. It is not the #6940 output-directory bug — your pinned react-start already resolves the fixed start-plugin-core 1.171.17. What you can do today: make sure |
|
Circling back on this one — the fix has been stable on my fork since the 13th, and the middleware DOCTYPE issue you hit is tracked separately upstream (writeup linked above). Anything you'd like changed before this can merge? |
Part of #462 - this addresses the pending-component flash and the blocked client-side transitions. The cold-load FCP axis (CSS delivery, bundle weight) is separate and not touched here.
The two config values that caused the navigation symptoms
defaultPendingMs: 0entered the pending state on every navigation whose loader had not already resolved - anddefaultPendingMinMs, which was not overridden, then held that pending frame for its 500ms framework default. Net effect: a minimum half-second blank screen on essentially every route change, even when the loader resolved in single-digit milliseconds. (Defaults confirmed in@tanstack/router-coresrc/router.ts:defaultPendingMs: 1000, defaultPendingMinMs: 500.) Removing the override restores the 1000ms threshold, so pending UI only appears for genuinely slow loads.defaultPreloadStaleTime: 0marked every intent/viewport preload stale by the time the user actually clicked, so the loader re-ran on navigation and blocked the transition - hover preloading was effectively disabled. The0setting is TanStack's recommendation only when loaders delegate caching to an external store (queryClient.ensureQueryData); the doc/blog loaders here call server functions directly, so the framework default (30s) is the correct behavior.With both removed: links preloaded on intent/viewport resolve before the click, navigation commits instantly, and no pending frame appears.
defaultStaleTime: Infinityalready keeps visited routes instant.Why this is only half of #462
First visits to a doc page still pay two server round-trips in the loader (
loadDocPage+loadNavData). The real fix for that is thestaticFunctionMiddlewareyou already wired (currently commented out inserverFunctions/docs.ts) once the build-time payload issue from TanStack/router#7630 is resolved - I am digging into that one separately. One data point already checked:@tanstack/react-start@1.168.25resolves@tanstack/start-plugin-core@1.171.17, which already contains the TSS_CLIENT_OUTPUT_DIR fix from TanStack/router#6940, so the cause is something else.