-
Notifications
You must be signed in to change notification settings - Fork 1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix: Flickering page on route navigation #3767
Fix: Flickering page on route navigation #3767
Conversation
Awesome find @callingmedic911! The beta React docs talk a lot about the role tree structure plays in React's rendering/committing: https://beta.reactjs.org/learn/preserving-and-resetting-state. The new docs are really great. A simple test for this may be checking that the tree structure stays exactly the same between renders (except for the Page at the very end). |
Seems like the fix won't be straightforward like this because Checking how we can improve here. |
Trying this new approach, where unmount still happens but now the Router context holds current page module, so it instead of undefined it resets old module. So, at least white flash doesn't appear. Long term fix can be a bit of refactoring. Theoretically, we have to put Loader outside of |
92374e9
to
72e7ddd
Compare
@callingmedic911 Please have a look at this commit and see what you think of my alternative solution for this issue Commit #2 for PR #3772 |
Closing in favour of #3772. |
Closes #2124.
Why was this happening?
PageLoader
was getting unmounted on each route change. And when it remounts it switches to the default state -page
is undefined. The cause of unmounting is fromactiveRouteTree
(screenshot 1) inrouter.tsx
. It swaps out the Route, so the whole subtree is unmounted.This PR is the possible fix that updates the
LocationAwareRouter
to maintain a single route element and copy all attributes/props from the active route. So, react can, well, react.Things to consider now:
Do we need to copy over anything else apart fromprops
,children
or other properties of activeRoute
element?