Is it possible to show a loading spinner/page/component while loader is fetching the data?
Question in the topic title
12 Replies
sensitive-blue•3y ago
You can do something like router = useRouter() then check router.state.status == something, and apply a style or show a modal based on that. I think one of the examples that uses react query does this.
I migrated away from doing this around v 133 though because it was breaking on every second release
Maybe there is a better way now
deep-jade•3y ago
const isPending = useRouterState({ select: s => s.status === “pending” })
afraid-scarlet•3y ago
@Tanner Linsley Would it make sense to add loadingComponent that renders when the loader is loading?
deep-jade•3y ago
Like, loading in the background?
afraid-scarlet•3y ago
Yes, if you wanted to load the route right away and show a loading UI, like a skeleton UI or spinner. Would you say its better to just fetch the data in the component in that case?
It's more like an traditional SPA instead of the Remix style.
But I would like to take advantage of the benefits of loaders. Kind of like auto-defer all loaders with a loading component until all the promises in the loader resolve.
deep-jade•3y ago
Hmm. Have you tried
routeOptions.pendingComponent?afraid-scarlet•3y ago
No, I have not.
I will try it now.
This is what I was looking for. Was looking for
loadingComponent in search. Thanks a bunch!deep-jade•3y ago
You bet!
wise-white•3y ago
It looks like the pendingComponent element doesn't show when a route with a lazy component (wrapped in lazyRouteComponent()) is fetching the component. It only shows after the lazy component is fetched, when the load function is running. Is this expected?
afraid-scarlet•3y ago
@Farshad Interesting, I was seeing this too but did not realise it is caused by
lazyRouteComponent. I'll check to see if this is what is causing the issue.wise-white•3y ago
@mrlaughsalot Yeah, I would expect that the pendingComponent would display while the lazy component is loading, but that's not happening right now.
rising-crimson•3y ago
I'm having the same issue, I thought pendingComponent renders when the route is busy fetching (
load prop)