T
TanStack•14mo ago
optimistic-gold

Why doesn't the bootloader appear when switching between routes?

Help me plz (sample sandbox code in the end), I want to make a loader when the user moves between routes, I tried to do this: documents.lazy.tsx 
import { createLazyFileRoute } from '@tanstack/react-router'

import Documents from '@/pages/documents/ui'

export const Route = createLazyFileRoute('/app/documents')({
  component: () => <Documents />,
})
import { createLazyFileRoute } from '@tanstack/react-router'

import Documents from '@/pages/documents/ui'

export const Route = createLazyFileRoute('/app/documents')({
  component: () => <Documents />,
})
documents.tsx 
import { createFileRoute } from '@tanstack/react-router'

import { LoaderCentered } from '@/shared/ui/loader-centered'

export const Route = createFileRoute('/app/documents')({
  pendingComponent: () => <LoaderCentered />,
})
import { createFileRoute } from '@tanstack/react-router'

import { LoaderCentered } from '@/shared/ui/loader-centered'

export const Route = createFileRoute('/app/documents')({
  pendingComponent: () => <LoaderCentered />,
})
but the rendering component was not called, the page froze for 1-2 seconds and immediately went to the route with the component fully rendered I changed it this way: documents.lazy.tsx - doesn't changed documents.tsx: 
import { createFileRoute } from '@tanstack/react-router'

import { LoaderCentered } from '@/shared/ui/loader-centered'

export const Route = createFileRoute('/app/documents')({
  pendingComponent: () => <LoaderCentered />,
  loader: async () =>
    new Promise<void>(resolve => {
      setTimeout(() => {
        resolve()
      }, 0)
    }),
})
import { createFileRoute } from '@tanstack/react-router'

import { LoaderCentered } from '@/shared/ui/loader-centered'

export const Route = createFileRoute('/app/documents')({
  pendingComponent: () => <LoaderCentered />,
  loader: async () =>
    new Promise<void>(resolve => {
      setTimeout(() => {
        resolve()
      }, 0)
    }),
})
Now the loader appears and for 1-2 seconds the page does not freeze, my loader spins, everything is ok, but it doesn't look right https://stackblitz.com/edit/tanstack-router-ptv7z4?file=src%2Froutes%2Fposts.tsx I made an example similar to my code, the file posts.lazy.tsx renders a complex component, when the user tries to go to this “Posts” route, first there will be a freeze for a few seconds due to the loading of the complex component, and then the page with the component will open further, if you uncomment the code in the posts.tsx file, you will get the behavior that I need, the user is transferred to the “Posts” route immediately, and only then the loader is shown and the component is loaded, but the question remains open whether this can be done somehow differently?
Max
StackBlitz
Router Basic File Based Example (forked) - StackBlitz
Run official live example code for Router Basic File Based, created by Tanstack on StackBlitz
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?