Nachwahl
commented
3 years ago I've the same issue here. Additionally, I have the problem that the suspense fallback is shown when a re-render of the component occurs, and the app idled for a moment before. Has someone an idea to solve this?
EDIT: Following the steps described here https://github.com/FirebaseExtended/reactfire/issues/405#issuecomment-884875074 I was able to fix the issue
Version info
React:
18.0.0-alpha-6f3fcbd6f-20210730
Firebase:
8.8.1
ReactFire:
3.0.0-rc.3
Other (e.g. Node, browser, operating system) (if applicable):
Test case
https://codesandbox.io/s/empty-sky-2flps?file=/src/App.js
Steps to reproduce
Load the page, check the Suspense is triggered as rectfire is loading the userId
Once loaded, check the UI displays a greeting with the userId
When you edit the Greetings component, 9 times out of 10 everything works as expected: you see the updated UI text and the userId stays in place.
Once every 10 times or so, you edit a component and the UI gets stuck in the Suspense state. You see "Loading.." and there's no way to get out of that state other than a hard refresh.
This behaviour happens in the codesanbox above and also in this minimal repo https://github.com/frankiesardo/reactfire-example
I have another project where it's even more common: 9 times out of 10 whenever I edit the UI the Hot Reload triggers an infinite Suspense, I cannot use the Hot Reload flow at all. I suspect it's because I have many more hooks that invoke reactfire.
Expected behavior
I can use Hot Reload and Suspense is not triggered when I am changing the UI
Actual behavior
In certain cases (randomly?) Suspense is triggered on Hot Reload and it completely breaks the development flow.