Loading state is always true on first render

[StadnykYura]

Hi, i have a question about basic client side loadable function behavior for SPA, when the chunk has been already loaded and we try to render it again. So imagine. 1) we move to our page where the lazy component should be rendered. The loader is rendered, the chunk is loaded and the component is rendered; 2) we leave the page where the lazy component was rendered. And then go back to this page, expecting the lazy component to be rendered immidiately. But instead it renders the loader first, and only then the actual lazy component.

So i analyzed the source code, and i have found out that the 'loading' state is always true at first.

So the question is -> is it possible to somehow change this behavior by current library functionality so the component would be rendered immidiately (without loader) if the chunk was loaded before?

[theKashey]

Yes, it is possible and quite easy Technically this.state.loading is a no longer used property and we should rely on cache state, like it already does for "suspense" components. However it also relies on the loading state that is not always in sync

https://github.com/gregberge/loadable-components/blob/main/packages/component/src/createLoadable.js#L317

[StadnykYura]

@theKashey, so i have used lazy method, (even tried with hardcoded cachedKey as option), but it still do the first render with loading=true props, which leads to render a 'null' fallback in my case, which leads to the jumping page when second render comes with a loading=false. It means we still need a PR here for that?

[theKashey]

Yes, we need to correct original value of loading based on the cache state. Ideally just remove loading state to have a single source of truth.

[NeXTs]

@theKashey @gregberge hello guys, do you have any plans to fix it?