rustclan
rustclanā€¢2y ago

TRPC global loading page

Hey. With trpc/nextjs I'm wondering if its possible to have a global loading context/state which is used across my whole app, whenever a TRPC endpoint .isFetched property is false, it will display a "loading" symbol. Currently I have to do something like this on every page:
if (!getMailQuery.isFetched) {
return (
<AppShell navbar={<AdminNavBar selected={6} />}>
<PublicLoadingScreen />
</AppShell>
);
}
return (pageContent...)
if (!getMailQuery.isFetched) {
return (
<AppShell navbar={<AdminNavBar selected={6} />}>
<PublicLoadingScreen />
</AppShell>
);
}
return (pageContent...)
3 Replies
Nick
Nickā€¢2y ago
useIsFetching | TanStack Query Docs
useIsFetching is an optional hook that returns the number of the queries that your application is loading or fetching in the background (useful for app-wide loading indicators). `tsx
Nick
Nickā€¢2y ago
This is also essentially the problem that Suspense is solving, so you could enable Suspense and use that
rustclan
rustclanā€¢2y ago
Thank you very much šŸ™‚