Hard reload discord follow up

[alex-uxify]

Which project does this relate to?

Router

Describe the bug

Hi all,

This is a follow up issue after discord post. The original post is here

If I have a route with a slow loader (>3s) and implement a pendingComponent with pendingMs and pendingMinMs on this specific route, navigating to it from another page displays the pendingComponent, which is fine. The problem arises when I hard reload the page on this route — it only shows a blank screen. The root config here is defaultPendingMinMs: 0 and defaultPendingMs: 0

Your Example Website or App

The issue cannot be reproduced on stackblitz because of the nature of hard reload.

Steps to Reproduce the Bug or Issue

1. Create a route with loader and pending component.
2. Hard reload the page

Expected behavior

It should always show the loader despite being a navigation or hard reload.

Screenshots or Videos

No response

Platform

any

Additional context

No response

[TkDodo]

The issue cannot be reproduced on stackblitz because of the nature of hard reload.

Hard reloads are totally possible in stackblitz, here’s a simple repro of what you’ve described:

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

There’s a reload button in the preview window, or you can pop it out into it’s own tab, too.

The about route is the one with a 3s loader. When I navigate from the home route, I can see that the loading... text shows up after 1s - because I’ve set pendingMs: 1000. pendingMinMs is pretty irrelevant here, it just makes sure that the loader doesn’t “flash” for just a small amount of time. With a 3s loader, this doesn’t matter.

If I know reload the about route, I’m instantly seeing the loading... text (because pendingMs is ignored for first navigations).

So I think this all works as expected. If that isn’t the case, please provide your own reproduction of the problem - we can then re-open this issue.

[alex-uxify]

@TkDodo Hi and thank you for your response.

I've updated the stackblitz that you provided and made it almost identical as our implementation. As you can see the hard reload on the about page is showing a blank screen after reload.

https://stackblitz.com/edit/tanstack-router-3xdnhx?file=src%2Froutes%2Findex.tsx

There are two key differences between the default and ours. The first one is that we have a _auth route which checks for authenticated user and throws redirect if none is found and the second is that we use beforeLoad instead of loader.

[TkDodo]

Yeah beforeLoad is blocking - we have to not invoke loaders if beforeLoad does an early exit with a throw redirect. It even blocks rendering the root route.

I think we need to document this better. The pendingComponent on the '/_auth/about' route isn’t shown because the beforeLoad block sit. If you have a defaultPendingComponent, or a pendingComponent on a higher route like '/_auth', that one would be shown.

[TkDodo]

@schiller-manuel I remember seeing somewhere that users should be careful with beforeLoad because it’s blocking and cause perf issues (because it blocks everything) but I couldn’t find it in the docs 🤔