-
-
Notifications
You must be signed in to change notification settings - Fork 10.3k
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
[Bug]: Link doesn't change while Route loader function returns promise result. #9142
Comments
This is expected behavior and mimics what the browser does on slow full document loads. You have a few options to customize your UI here:
|
Hi @brophdawg11, thanks for clarification i was wandering is it also expected behavior that browser's address bar does not change while new page is loading? for example YouTube has a similar data fetching behavior where old page/data is visible while new page/data is fetching but browser's address bar is updated with new URL instantly and does not wait for data to be loaded but in react router browser's address bar is updated only after data has been loaded |
Yes - that's also emulating what the browser would do by default. YouTube has made a UX choice there to behave differently, but Remix/React-Router 6.4 aim to emulate what the browser would otherwise do without JS. To see this in action - disable javascript in your browser, throttle your connection to Slow 3G and go to https://developer.mozilla.org/en-US/. Then click a link and watch the URL bar while the new page is loading. It stays on the current URL until the new document is fetched, and only then does it update. |
Co-authored-by: Jacob Ebey <[email protected]>
What version of React Router are you using?
v6.4
Steps to Reproduce
Route loader function
Using promise loader function in Route component.
You can see stackblitz example here: https://stackblitz.com/edit/github-2vnkts-lhb3vp?file=src%2Fmain.jsx
Expected Behavior
Expected to immediatly change link and render new component , while loader awaits promise result.
Actual Behavior
Component render only after promise result. In case of slow internet component needs to much time to start rendering.
I think it would be better to have fallback in Route componnets
The text was updated successfully, but these errors were encountered: