`pendingComponent` not shown while beforeLoad is pending

[nklhtv]

Describe the bug

pendingComponent not shown while beforeLoad is executing, but according to the docs it should.

If this function returns a promise, the route will be put into a pending state and cause rendering to suspend until the promise resolves. If this routes pendingMs threshold is reached, the pendingComponent will be shown until it resolved.

Your Example Website or App

https://stackblitz.com/edit/tanstack-router-hvbscg

Steps to Reproduce the Bug or Issue

1. refresh the page
2. rootRoute.pendingComponent is not shown until rootRoute.beforeLoad resolves (you see white screen for 5 seconds)
3. rootRoute.pendingComponent is shown for 500 (default pendingMinMs)
4. rootRoute.component is shown

Expected behavior

rootRoute.pendingComponent should be rendered while waiting for rootRoute.beforeLoad to resolve, just like with loader OR we should update the docs if thats not the actual expected behavior.

Screenshots or Videos

No response

Platform

• OS: macOs
• Browser: Firefox
• Version: 121

Additional context

There is an open discussion about this behavior: https://github.com/TanStack/router/discussions/1029

[nklhtv]

Checked how beforeLoad is handled inside the router and my guess is that pendingComponent is never meant to be shown while a route is waiting for beforeLoad to resolve.

[joakimstrandell]

As the recommended way to authenticate a user is to do it in beforeLoad it would be nice to have a way of displaying a pending UI while awaiting the authentication result.

[phoneticallySAARTHaK]

Is this caused by some recent change? the docs Do mention that pendingComponent will be shown