TanStackT
TanStack•15mo ago•
5 replies
abstract-purple

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,
});

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>
  );
}
Was this page helpful?