Lazy loading progress
Is there a way to read out if something is currently lazy loading and the status on how far it is ?
3 Replies
rare-sapphire•14mo ago
https://tanstack.com/router/latest/docs/framework/react/api/router/RouterStateType
You can useRouterState with the status property
"How far it is" -- not quite sure what you mean
RouterState type | TanStack Router React Docs
The RouterState type represents shape of the internal state of the router. The Router's internal state is useful, if you need to access certain internals of the router, such as any pending matches, is the router in its loading state, etc.
`tsx
national-goldOP•14mo ago
Ahh thanks for that. I mean the loading progession in percentage
ratty-blush•14mo ago
I mean the loading progession in percentageThe short is answer is - you can't. If you mean tracking the
loader function that's running, Router wouldn't have any idea about that since it just accepts a Promise, which has no such tracking. You can ofc, use XHR or something like that, but that'd be outside the scope of Router.
If you meant tracking the lazy loading of the code-split components (i.e component, pendingComponent, errorComponent, and notFoundComponent), then Router wouldn't know since this is handled by you bundler wrapped in React.lazy.
Often times on websites, these loading progress indicators are faked just to give the user the illusion of progress happening. The only time when this can really be tracked is if you know the request size ahead of time. This is only really feasible for requests like file uploads.
Like @Sinlyu mentioned, the you can only track the isPending boolean since Router would only ever be aware of the Promise primitive. Nothing else.
You can ofc, fine tune this down to the route-level, even then you are just tracking a boolean for isPending, nothing more.