"Inner" <Subscribe> is skipped in case of nested <Subscribe>s
Closed this issue · 3 comments
<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.
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.
Sorry I have been rushing to meet a deadline. I will put up an example as soon as I am done with it.
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).