Feature Request: Option to defer rendering until all matched route loaders have resolved (SPA) #7613
codeart1st
started this conversation in
Ideas
Replies: 1 comment
-
|
Also relates to #1705 |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Currently, in SPA setups, TanStack Router renders matched routes progressively as their individual loaders resolve (waterfall-like rendering). While this is great for getting content to the screen quickly, it causes issues when trying to orchestrate a seamless initial load.
In my application, I have a global skeleton UI defined directly in my index.html that exactly matches the pending component of my root route. My goal is to display this global skeleton continuously until the entire initial route tree (all matched routes and their loaders) is completely finished loading, so the app can be rendered in a single pass. Currently, the progressive rendering replaces the root skeleton too early, resulting in intermediate loading states and layout shifts as child route loaders are still resolving.
I would like an option (e.g., at the Router configuration level) to opt out of the progressive rendering behavior for the initial load, or for SPAs in general.
Ideally, there would be a way to instruct the router: "Wait until all loaders in the current match tree have resolved before rendering the matches." This would allow the initial HTML skeleton to remain on screen until the app is fully ready to mount the complete route hierarchy in one go.
Additional context
This is particularly important for SPAs that want to avoid partial "loading waterfalls" (e.g., Header loads -> Sidebar loads -> Content loads) on the initial page visit, and instead prefer a clean transition from a static index.html skeleton to the fully rendered application state.
Beta Was this translation helpful? Give feedback.
All reactions