beforeLoad adds ~400ms delay on page reload

[cschmatzler]

Describe the bug

When adding beforeLoad to a route (even an empty one), the router gets mounted and then displays a white page for approx. 400ms before the actual page is rendered.

Your Example Website or App

https://stackblitz.com/github/tanstack/router/tree/main/examples/react/quickstart-file-based

Steps to Reproduce the Bug or Issue

1. Fork the file-based QuickStart example on StackBlitz.
2. Add an beforeLoad: () => {} to any page - I chose the about page.
3. Go to the page you changed and reload the page in the browser.

Expected behavior

Simply adding the beforeLoad option should not materially change load times.

Screenshots or Videos

router.mp4

Platform

• OS: macOS Sonoma
• Browser: Arc
• Version: 1.56.0

Additional context

No response

[mreinertssgr]

I've been experiencing this too, however my code might be a little different. Rendering the actual app is delayed by almost 1 second.

const InnerApp = () => {
    const auth = useAuthStore();

    if (auth.loading) {
        return <div>Loading...</div>;
    }

    return (
        <ThemeProvider theme={lightTheme}>
            <CssBaseline />
            <RouterProvider router={router} context={{ auth }} />
            <Toaster />
        </ThemeProvider>
    );
};

export default () => {
    return (
        <StrictMode>
            <QueryClientProvider client={queryClient}>
                <InnerApp />
            </QueryClientProvider>
        </StrictMode>
    );
};

I also checked the performance tab in devtools and it looks like nothing is happening (the selected range is when nothing is rendered)

[0xd8d]

As a temporary fix, add pendingMinMs: 0.

[macr]

I just noticed it happening on all the lazy routes.
React profiler shows:

looking at the offending function:

router/packages/react-router/src/Match.tsx

Line 19 in 0e16429

export const Match = React.memo(function MatchImpl({

It does wait for pendingMinMs ms before loading the match.
Is there a catch to just setting pendingMinMs: 0?

[Scooter1337]

I just saw this issue and added the temporary fix and my app feels way faster now... This needs a fix.

[mirague]

Also noticed that adding this makes the app a lot more snappy, especially since we perform a lot of middleware/guard checks in beforeLoad() which takes almost no time. The default pendingMinMs is 500 which is pretty long.

Can be disabled for the entire router by setting defaultPendingMinMs: 0,

[alex-uxify]

Same here, I wasted soo much time digging in this and in the end it was the devtools, after removing them and setting the defaultPendingMinMs: 0 it's much better now, but I feel like it needs a fix

[TkDodo]

The presence of beforeLoad or loader, even if they are empty (we still await their functions, even if they don’t return a promise) make pendingMinMs “trigger” (if there is a pending component defined).

Even if we have pendingMinMs: 0, the loader flashes quickly.

To goal of this setting is to ensure that loads don’t flash - if we need to see them, we should see them “for a bit”. Because loader or beforeLoad are defined, we determine that we should see the pendingComponent. We don’t really make a difference between a loader that takes 1ms, or one that takes 200ms.

If you only have a beforeLoad or a loader that is sufficiently fast, my suggestion would be to set:

pendingComponent: undefined,
pendingMinMs: 0

for that route. Mostly, I think the defaults are fine because loaders will be used to load data, which can take a couple hundreds of milliseconds, so we’d want to really avoid flashing in the loader (which even happens with pendingMinMs: 0

@schiller-manuel FYI