T
TanStack•10mo ago
extended-yellow

How to show spinner when lazy route (js chunk) is being loaded?

Basically I want to have some some spinner when lazy route is being loaded. It is quite usefull for slow connections. Ideally to combine it with loader, so spinner will be shown util route and route data are both loaded. With lodable/component lib I achieved this with: 
const AsyncPage = loadable(
  props => pMinDelay(timeout(import(`lazy-load/pages/${props.path}.jsx`), 20000), 200),
  {
    cacheKey: props => props.path,
    fallback: <Loader />,
  }
)
const AsyncPage = loadable(
  props => pMinDelay(timeout(import(`lazy-load/pages/${props.path}.jsx`), 20000), 200),
  {
    cacheKey: props => props.path,
    fallback: <Loader />,
  }
)
I assume that I can just utilise RouterState's status === 'pending'? - checked, it flashes spinner when chunk is already loaded and there is no loader, but isLoading works. Wondering if there is another solution UPD: Another issue with isLoading that it also true when there is no loader in my route and when chunk is loaded
1 Reply
other-emerald
other-emerald•3d ago
Hey 👋 Do you find a solution for this ?

Did you find this page helpful?