ambitious-aqua

Feeling a lag on routing

I have pages with data loading using react query. The inbuilt loader is not used. Ideal scenario: when I click the link, that page with loading should appear. But instead I'm seeing a small lag then page with loading appears. I'm running on a Macbook Pro and I tried out in dev as well as prod there is a small lag between route changes. Is there any fix or reason behind it.

36 Replies

xenial-black•11mo ago

@millu Are you using useSuspenseQuery? or anything else causing a suspend? by inbuilt loader you mean the loader: () => {} property of the Route?

ambitious-aquaOP•11mo ago

No I'm not using useSuspenseQuery Yeah but that's what I. meant by inbuilt loader

rare-sapphire•11mo ago

try setting defaultPendingMinMs to 0

ambitious-aquaOP•11mo ago

Sorry for a small confusion. Actually there is no lag in development. only on Production it has this lag Production: Vercel with MongoDb hosted Development: Local with MongoDb hosted Still if request makes more time to load its understandable but if the routing itself takes time its little concerning

automatic-azure•11mo ago

Can you share you a code example @millu ?

ambitious-aquaOP•11mo ago

https://runtime.work. You can sample signup and check

ambitious-aquaOP•11mo ago

Sample route

dashboard.tsx

ambitious-aquaOP•11mo ago

authed.tsx

ambitious-aquaOP•11mo ago

rare-sapphire•11mo ago

if the routing itself takes time its little concerning

based on what do you think it's the routing that takes time? the loader will be executed before navigating, so if that takes longer in the other env, "routing" will appear slower

automatic-azure•11mo ago

Given the user said "Ideal scenario: when I click the link, that page with loading should appear. " You can use pendingComponent and tweak the pendingMs setting to decide how much to wait before showing the loader (default to 1 seconds but can be set down to 0 to immediately show loader) Q:Why isn't the loader immediately shown? A: if the loading is fast, showing a loading state that immediately goes away feels slower and junkier than just waiting

import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/test")({
  loader: async () => {
    await new Promise((resolve) => setTimeout(resolve, 3000));
    return "Hello /test!";
  },
  pendingComponent: () => <div>Loading...</div>,
  pendingMs: 100 /* tweak this, default is showing after 1000ms sec https://tanstack.com/router/v1/docs/framework/react/guide/data-loading#key-options */,
  component: () => <div>Hello /test!</div>,
});

import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/test")({
  loader: async () => {
    await new Promise((resolve) => setTimeout(resolve, 3000));
    return "Hello /test!";
  },
  pendingComponent: () => <div>Loading...</div>,
  pendingMs: 100 /* tweak this, default is showing after 1000ms sec https://tanstack.com/router/v1/docs/framework/react/guide/data-loading#key-options */,
  component: () => <div>Hello /test!</div>,
});

An alternative approach is to use TanStack Query with a serverFn as data loader and show a loading state while it's fetching

ambitious-aquaOP•11mo ago

I'm not even using the router's loader at all in certain pages. I just use a react query inside the route component. Still it takes some time. You can see the url changes immediately but the component takes lot of time to render.

rare-sapphire•11mo ago

if you can provide a complete mininal example (e.g. by forking one of the existing router stackblitz examples) we can debug this

ambitious-aquaOP•11mo ago

It works perfectly in dev environment. Only in prod this lag is there https://discord.com/channels/719702312431386674/1304464112494837830/1305051750423597087 Like you can see here. I press a link. It should immediately render that page right. But it takes some time to change. It feels like for a instant there is no reactivity I'm doubting is this due to any server rendered things going on behind? I forked the code from tanstack start example with clerk. Do you guys think the below code in _authed that wraps other routes is causing the delay? import { createFileRoute } from "@tanstack/react-router"; import { SignIn } from "@clerk/tanstack-start"; export const Route = createFileRoute("/_authed")({ beforeLoad: ({ context }) => { if (!context.user.userId) { throw new Error("Not authenticated"); } }, errorComponent: ({ error }) => { if (error.message === "Not authenticated") { return ( <div className="flex items-center justify-center p-12"> <SignIn routing="hash" forceRedirectUrl={window.location.href} /> </div> ); } throw error; }, });

rare-sapphire•11mo ago

maybe. please provide a complete minimal example

ambitious-aquaOP•11mo ago

Found this in my _root is this why this delay maybe

ambitious-aquaOP•11mo ago

@Manuel Schiller You can check https://runtime.work

rare-sapphire•11mo ago

no I can't debug this

ambitious-aquaOP•11mo ago

https://stackblitz.com/github/tanstack/router/tree/main/examples/react/start-clerk-basic?embed=1&theme=dark&preset=node&file=src/main.tsx @Manuel Schiller This can do

StackBlitz

Router Start Clerk Basic Example - StackBlitz

Run official live example code for Router Start Clerk Basic, created by Tanstack on StackBlitz

ambitious-aquaOP•11mo ago

We have auth fetching in the beforeLoad of _root. This is executing for every route. This is the reason for lagging. For clerk its 20-30ms in dev and in prod it takes around 400ms which is the reason for this delay. Is it Ideal when its being called for every route changes? isn't that bad? am I missing something?

rare-sapphire•11mo ago

@nikiv.dev had the same issue how did you solve this?

conscious-sapphire•11mo ago

@A S L A M solved it, not sure how

rare-sapphire•11mo ago

@phibr0 have you encountered this issue with start & clerk?

other-emerald•11mo ago

For us it takes the same amount of time in dev and prod, around 30-60ms But we have intent prefetching on, so maybe its not as noticable?

rare-sapphire•11mo ago

can you disable intent prefetching and try again?

ambitious-aquaOP•11mo ago

useAuth or useUser hook is there that mayn't trigger auth state each time. But those can't be used in the beforeLoad() I guess. Do you guys think this logic has to be moved from beforeLoad to a LayoutWrapper

rare-sapphire•11mo ago

doesn't clerk implement some kind of caching you can enable?

ambitious-aquaOP•11mo ago

useUser Hook is there from clerk. But I can't use the hook in the before load right? or can I ?

rare-sapphire•11mo ago

hm not with start since you cannot feed it into RouterProvider

other-emerald•11mo ago

I mean there can be a delay becaue it is a serverFn call (in the image fetchClerkAuth is a serverFn that calls getAuth(request)) But iirc clerks getAuth is only async because the subtle crypto api is async, its not doing anything that takes that long Can't notice a delay that long when prefetching is disabled

ambitious-aquaOP•11mo ago

https://github.com/TanStack/router/issues/2727

GitHub

beforeLoad on _root runs on every routing and auth request there de...

Which project does this relate to? Start Describe the bug I'm using start but I'm not sure if its a issue with start or Router. So basically the prescriped method of auth from examples invo...

other-emerald•11mo ago

I think it makes sense that it runs each time, its basically only checking wether your jwt is valid or not Well maybe its only necessary during SSR

rare-sapphire•11mo ago

but you would need to handle the case that the JWT expires?

other-emerald•11mo ago

true

rare-sapphire•11mo ago

while CSR

ambitious-aquaOP•10mo ago

https://github.com/TanStack/router/pull/2739 This is the fix I'm using and it works fine. I don't know if it covers all the case.

GitHub

Changed auth architecture for clerk by MiltonAkash · Pull Request #...

Current architecture using beforeLoad fetched auth on every route change making lag on navigation resulting bad UX

Gaming

Programming

Feeling a lag on routing

Did you find this page helpful?