CSS flash when middleware throws response with root loader in Framework Mode

[foxlau]

Reproduction

CSS flash occurs when middleware throws a response while root route has a loader function. The ErrorBoundary content appears unstyled briefly before styled version loads.

Root Cause

Timing conflict between:

1. Root route loader execution
2. Child route middleware throwing response (e.g. 404)

This causes CSS styles to not be immediately available when ErrorBoundary renders.

Minimal Reproduction

StackBlitz: StackBlitz

Steps to Reproduce

1. Visit the StackBlitz project
2. Click "Go to Admin" link
3. Observe the CSS flash: unstyled text appears briefly before styled error page

Workaround

Removing the loader from app/root.tsx eliminates the CSS flash.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
Binaries:
    Node: 20.19.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
npmPackages:
    @react-router/dev: ^7.8.0 => 7.8.0 
    @react-router/node: ^7.8.0 => 7.8.0 
    @react-router/serve: ^7.8.0 => 7.8.0 
    react-router: ^7.8.0 => 7.8.0 
    vite: ^6.3.3 => 6.3.5

Used Package Manager

npm

Expected Behavior

Error page should render with styles applied immediately, no flash of unstyled content.

Actual Behavior

Flash of unstyled content (FOUC): "Oops! Page Not Found." appears as plain text briefly before the ErrorBoundary renders with its intended styling.

[foxlau]

After reviewing the root.tsx code in the react-router-website repository, try using precedence="high" as a temporary workaround to avoid this issue.

// root.tsx

import stylesheet from "./styles/app.css?url";

<link rel="stylesheet" href={stylesheet} precedence="high" />