T
TanStack•7mo ago
generous-apricot

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
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?