Suspense doesn't stop rendering fallback after Lazy resolves

[Velenir]

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]

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]

@qutran
Didn't help, same result

https://codesandbox.io/s/kmk0wvno25

[gaearon]

Looks like a bug to me.

[sophiebits]

I confirmed #14083 will fix this.