Fix FOUC on subsequent client-side navigations to route.lazy routes

.changeset/route-lazy-fouc.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/react": patch
+---
+
+Fix FOUC on subsequent client-side navigations to route.lazy routes

packages/remix-react/routes.tsx

@@ -131,11 +131,26 @@ export function createClientRoutes(
       id: route.id,
       index: route.index,
       path: route.path,
-      loader({ request }) {
+      async loader({ request }) {
+        // Only prefetch links if we've been loaded into the cache, route.lazy
+        // will handle initial loads
+        let routeModulePromise = routeModulesCache[route.id]
+          ? prefetchStyleLinks(routeModulesCache[route.id])
+          : Promise.resolve();
+        try {
           if (!route.hasLoader) return null;
           return fetchServerHandler(request, route);
+        } finally {
+          await routeModulePromise;
+        }
       },
-      action({ request }) {
+      async action({ request }) {
+        // Only prefetch links if we've been loaded into the cache, route.lazy
+        // will handle initial loads
+        let routeModulePromise = routeModulesCache[route.id]
+          ? prefetchStyleLinks(routeModulesCache[route.id])
+          : Promise.resolve();
+        try {
           if (!route.hasAction) {
             let msg =
               `Route "${route.id}" does not have an action, but you are trying ` +
@@ -147,6 +162,9 @@ export function createClientRoutes(
           }
 
           return fetchServerHandler(request, route);
+        } finally {
+          await routeModulePromise;
+        }
       },
       ...(routeModule
         ? // Use critical path modules directly