[Bug]: Link doesn't change while Route loader function returns promise result.

[beso768]

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

[brophdawg11]

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:

1. You can display your own loading state using useNavigation().state while the new page is loading
2. You can use the upcoming defer functionality to defer some of your slow data and provide fallbacks. Docs are not finalized for this yet, but you can see the in-progress docs here

[thecotne]

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

[brophdawg11]

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.