TanStackT
TanStack•12mo ago•
1 reply
efficient-indigo

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 />,
  }
)


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
Was this page helpful?