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.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...)

tRPC•4y ago•

3 replies

rustclan

TRPC global loading 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...)

Continue the conversation

Join the Discord to ask follow-up questions and connect with the community

tRPC

Move Fast & Break Nothing. End-to-end typesafe APIs made easy.

4,951 Members

Join

TRPC global loading page

TRPC global loading page

Continue the conversation

tRPC

Continue the conversation

tRPC

Similar Threads