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

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'
status === 'pending'
? - checked, it flashes spinner when chunk is already loaded and there is no

loader

loader

, but

isLoading

isLoading

works. Wondering if there is another solution

UPD: Another issue with

isLoading

isLoading

that it also

true

true

when there is no

loader

loader

in my route and when chunk is loaded

TanStack•13mo 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

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'
status === 'pending'
? - checked, it flashes spinner when chunk is already loaded and there is no

loader

loader

, but

isLoading

isLoading

works. Wondering if there is another solution

UPD: Another issue with

isLoading

isLoading

that it also

true

true

when there is no

loader

loader

in my route and when chunk is loaded

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads