noble-gold

Loader is so slow

My query is already cached and adding a console.time before and after the query shows 0.17ms, but the loader causes the page to be white for 1s for loading the page. Removing the loader loads the page instantly. Why?

10 Replies

foreign-sapphire•13mo ago

can you please provide a complete minimal example by forking one of the existing examples on stackblitz?

noble-goldOP•13mo ago

import Sidebar from "@/components/sidebar";
import { getAuthenticatedUser } from "@/queries/getAuthenticatedUser";
import { createFileRoute, Outlet } from "@tanstack/react-router";
import { HashLoader } from "react-spinners";

export const Route = createFileRoute("/dashboard/_layout")({
  loader: async ({ context: { queryClient } }) =>
    await queryClient.ensureQueryData(getAuthenticatedUser),
  component: LayoutComponent,
  pendingComponent: () => (
    <div className="h-screen flex items-center justify-center">
      <HashLoader color="var(--primary-foreground)" size={50} />
    </div>
  ),
});

function LayoutComponent() {
  // const data = useSuspenseQuery(getAuthenticatedUser);
  // console.log(data);
  return (
    <div className="flex">
      <Sidebar />
      <main className="mx-auto w-full max-w-screen-lg px-5 py-12 md:py-20">
        <Outlet />
      </main>
    </div>
  );
}

import Sidebar from "@/components/sidebar";
import { getAuthenticatedUser } from "@/queries/getAuthenticatedUser";
import { createFileRoute, Outlet } from "@tanstack/react-router";
import { HashLoader } from "react-spinners";

export const Route = createFileRoute("/dashboard/_layout")({
  loader: async ({ context: { queryClient } }) =>
    await queryClient.ensureQueryData(getAuthenticatedUser),
  component: LayoutComponent,
  pendingComponent: () => (
    <div className="h-screen flex items-center justify-center">
      <HashLoader color="var(--primary-foreground)" size={50} />
    </div>
  ),
});

function LayoutComponent() {
  // const data = useSuspenseQuery(getAuthenticatedUser);
  // console.log(data);
  return (
    <div className="flex">
      <Sidebar />
      <main className="mx-auto w-full max-w-screen-lg px-5 py-12 md:py-20">
        <Outlet />
      </main>
    </div>
  );
}

@Manuel Schiller

foreign-sapphire•13mo ago

that's not a complete minimal example I cannot run this

foreign-sapphire•13mo ago

please go to https://tanstack.com/router/latest/docs/framework/react/examples/basic-file-based pick one of the examples on the left side

React TanStack Router Basic File Based Example | TanStack Router Docs

An example showing how to implement Basic File Based in React using TanStack Router.

foreign-sapphire•13mo ago

then fork that on stackblitz, modify to reproduce your issue and then post the stackblitz link here

noble-goldOP•13mo ago

This proves that it's the loader @Manuel Schiller

useful-bronze•13mo ago

We need a way to debug it. Provide something we can run or it won’t get fixed. Because we can’t know how to fix it. Any fix I give you right now would just be a terrible guess.

noble-goldOP•13mo ago

Bruh it was the devtools... Well that was a lot of time wasted Another issue, the pendingComponent is shown no matter the defaultPendingMs Might be related to react rc? Does tanstack router support react 19? nope thats not it Setting defaultPendingMinMs to 0 fixes the issue.

noble-goldOP•13mo ago

I didn't do anything wrong. The issue is with the library. Here is an issue about it, to which I commented a temporary solution https://github.com/TanStack/router/issues/2183@Tanner Linsley @Manuel Schiller

GitHub

Issues · TanStack/router

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - Issues · TanStack/router

Gaming

Programming

Loader is so slow

Did you find this page helpful?