T
tRPC

TRPC global loading page

TRPC global loading page

Rrustclan1/29/2023
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...)
Nnlucas1/29/2023
You could use something like this https://tanstack.com/query/v4/docs/react/reference/useIsFetching This is also essentially the problem that Suspense is solving, so you could enable Suspense and use that
Rrustclan1/29/2023
Thank you very much 🙂

Looking for more? Join the community!

T
tRPC

TRPC global loading page

Join Server