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)

[DaniumX]

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,