re-rxjs / react-rxjs

React bindings for RxJS
https://react-rxjs.org
MIT License
542 stars 17 forks source link

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

Closed justbhoot closed 8 months ago

justbhoot commented 9 months ago
<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 9 months ago

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.

justbhoot commented 9 months ago

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 8 months ago

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).