Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Loading state is always true on first render #997

Open
StadnykYura opened this issue Feb 1, 2024 · 3 comments
Open

Loading state is always true on first render #997

StadnykYura opened this issue Feb 1, 2024 · 3 comments
Assignees

Comments

@StadnykYura
Copy link

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
Copy link
Collaborator

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

@theKashey theKashey self-assigned this Feb 1, 2024
@StadnykYura
Copy link
Author

@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
Copy link
Collaborator

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants