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

Suspense doesn't stop rendering fallback after Lazy resolves #13999

Closed
Velenir opened this issue Oct 27, 2018 · 4 comments
Closed

Suspense doesn't stop rendering fallback after Lazy resolves #13999

Velenir opened this issue Oct 27, 2018 · 4 comments

Comments

@Velenir
Copy link

Velenir commented Oct 27, 2018

Do you want to request a feature or report a bug?
bug, I believe, unless I misunderstand how it works
What is the current behavior?
Given a Suspense inside Suspense case like

<Suspense fallback="Fallback 1">
  <LazyText1 text="First text" />
  <Suspense fallback="Fallback 2">
    <LazyText2 text="Second text!" />
  </Suspense>
</Suspense>

Promises in LazyTexts start resolving at the same time, but if LazyText2 is resolved first it never renders, Fallback 2 stays.

Result:

First text

Fallback 2

Please see https://codesandbox.io/s/234o4zry7n

What is the expected behavior?

Every LazyText displayed in the end

First text

Second text!

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
react, react-dom 16.6.0

@qutran
Copy link

qutran commented Oct 27, 2018

Try to move the nested suspence into the separate component, eg:

function SecondComponent() {
  return (
    <Suspense fallback="Fallback 2">
      <LazyText2 text="Second text!" />
    </Suspense>
  )
}

<Suspense fallback="Fallback 1">
  <LazyText1 text="First text" />
  <SecondComponent />
</Suspense>

@Velenir
Copy link
Author

Velenir commented Oct 29, 2018

@qutran
Didn't help, same result

https://codesandbox.io/s/kmk0wvno25

@gaearon
Copy link
Collaborator

gaearon commented Nov 1, 2018

Looks like a bug to me.

@gaearon gaearon changed the title Lazy component inside nested Suspense resolving first Suspense doesn't stop rendering fallback after Lazy resolves Nov 1, 2018
@sophiebits
Copy link
Collaborator

I confirmed #14083 will fix this.

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

No branches or pull requests

5 participants