T
TanStack•2w ago
eastern-cyan

Any idea why "Loading" text is not shown instantly in the following example? Video attached.

export const Route = createFileRoute('/_authed/posts')({
  loader: () => fetchPosts(),
  component: PostsComponent,
  pendingComponent: () => <div>Loading...</div>,
  pendingMs: 0,
  pendingMinMs: 500
})
export const Route = createFileRoute('/_authed/posts')({
  loader: () => fetchPosts(),
  component: PostsComponent,
  pendingComponent: () => <div>Loading...</div>,
  pendingMs: 0,
  pendingMinMs: 500
})
The project is simply a clone of the supabase start from the official repo with the 3 lines modified in the loader above. Maybe I am overreacting but it still feels like Loading... is shown too late after navigating to Posts. Not the fetched posts, I do mean the pendingComponent.
2 Replies
extended-yellow
extended-yellow•2w ago
could be a bug? can you please create a github issue for this including a complete example by forking one of the stackblitz router examples
eastern-cyan
eastern-cyanOP•2w ago
Will do that. Thanks. I think I know what may be the cause for a delayed "Loading" text. Because Posts are wrapped in a layout route _authed, which first needs to check, if the user is authenticated. The time it takes for this check is perhaps the reason why posts route begins it's rendering with a slight delay. Does that mean any kind of server side auth checks will cause same delay? Could it be solved by having app skeleton that is not performing any authentication checks and then only doing it on the data inside of it? This way the loading could be shown immediately on navigation. I was using supabase cloud so perhaps you can't replicate the same delay with a local deployment, because the round-trip for auth is near-instant. So this is likely not a bug and it works as intended good as it can with the current setup.

Did you find this page helpful?