re-rxjs/react-rxjs

"Inner" <Subscribe> is skipped in case of nested <Subscribe>s

Closed this issue · 3 comments

jbhoot commented
<Subscribe fallback={<p> Loading page </p>}>
  <Component1 />
  <Component2 />
  <RemoveSubscribe>
    <Subscribe fallback={<p> Loading this section </p>}>
      <ComponentThatSubscribesToAStreamWithoutADefaultValue />
    </Subscribe>
  </RemoveSubscribe>
</Subscribe>

What I expected

While the data for <ComponentThatSubscribesToAStreamWithoutADefaultValue> is loading, only that section of the page should display the loading fallback.

What happens instead

Loading fallback for the whole page is displayed instead. It seems that the inner <Subscribe> is ignored entirely. Or I am using it wrong.

voliva commented

Can you provide an example please? I've tried it on this sandbox and it seems like it's working correctly https://codesandbox.io/s/react-rxjs-suspense-swn29y?file=/src/App.tsx

Keep in mind that Subscribe has to do a double-render when getting mounted, where it will render the fallback (defaulting to null) just on the first render, then immediately renders the children. On the case you don't want your Subscribe fallback to appear, you can take it out from there and add a regular <Suspense fallback="..."> from React. Subscribe will just render null instead.

jbhoot commented

Sorry I have been rushing to meet a deadline. I will put up an example as soon as I am done with it.

voliva commented

I'll close this issue as we can't really reproduce it. If anyone can provide a test or a reproducible example we can reopen it.

Check that none of the other components (<Component1 /> <Component2 />) are triggering suspense. And also be mindful of the fact that Subscribe renders the fallback always on the initial render (docs).