quickest-silver

Possibility of showing a spinner / loader prior to beforeLoad delay of 500ms

Im piggy bagging off the auth example from the docs. But using Clerk together with Convex for my authentication. I show a <LoadingView/> to the user while convex and clerk is done loading auth. this takes approx 700ms after that the beforeLoad happens and doens't return before 500ms which results in a white screen in that time span. My question is... is such a delay for this beforeLoad normal? and if so, could i show my loading spinner again while beforeLoad returns? _auth.tsx

export const Route = createFileRoute("/_auth")({
  beforeLoad: ({ context, location }) => {
    if (!context.auth.isSignedIn) {
      throw redirect({
        to: "/login",
        search: {
          redirect: location.href,
        },
      });
    }
  },
  component: AuthLayout,
});

export const Route = createFileRoute("/_auth")({
  beforeLoad: ({ context, location }) => {
    if (!context.auth.isSignedIn) {
      throw redirect({
        to: "/login",
        search: {
          redirect: location.href,
        },
      });
    }
  },
  component: AuthLayout,
});

main.tsx

// Imports and type declarations removed
const AppContent = () => {
  const auth = useAuth();
  return <RouterProvider router={router} context={{ auth }} />;
};

function InnerApp() {}

function App() {
  return (
    <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
      <ConvexProviderWithClerk client={client} useAuth={useAuth}>
        <AuthLoading>
          <LoadingView />
        </AuthLoading>
        <AuthLoaded>
          <AppContent />
        </AuthLoaded>
      </ConvexProviderWithClerk>
    </ClerkProvider>
  );
}

const rootElement = document.getElementById("app")!;

if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
}

// Imports and type declarations removed
const AppContent = () => {
  const auth = useAuth();
  return <RouterProvider router={router} context={{ auth }} />;
};

function InnerApp() {}

function App() {
  return (
    <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
      <ConvexProviderWithClerk client={client} useAuth={useAuth}>
        <AuthLoading>
          <LoadingView />
        </AuthLoading>
        <AuthLoaded>
          <AppContent />
        </AuthLoaded>
      </ConvexProviderWithClerk>
    </ClerkProvider>
  );
}

const rootElement = document.getElementById("app")!;

if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
}

4 Replies

mute-gold•11mo ago

are you using plain router or start? I assume router, just to make sure

quickest-silverOP•11mo ago

Hey! Yes i'm using just the router, started with the template from npm create @tanstack/router@latest

mute-gold•11mo ago

you can set defaultMinPendingMs to 0 the default is 500 ms

plain-purple•11mo ago

Does the defaultPendingMinMs affect routes without a pending component?

Gaming

Programming

Possibility of showing a spinner / loader prior to beforeLoad delay of 500ms

Did you find this page helpful?