Conditionally wait for the render depending on the router state.

Author: onurtemizkan

dev-packages/e2e-tests/test-applications/react-create-browser-router-lazy-routes/tests/transactions.test.ts

@@ -74,5 +74,10 @@ test('Captures a navigation transaction', async ({ page }) => {
     }),
   );
 
-  expect(transactionEvent.spans).toEqual([]);
+  expect(transactionEvent.spans).toEqual([
+    expect.objectContaining({
+      op: 'resource.script',
+      origin: 'auto.resource.browser.metrics',
+    }),
+  ]);
 });

packages/react/src/reactrouterv6-compat-utils.tsx

@@ -95,19 +95,26 @@ export function createV6CompatibleWrapCreateBrowserRouter<
 
     router.subscribe((state: RouterState) => {
       if (state.historyAction === 'PUSH' || state.historyAction === 'POP') {
-        // Use requestAnimationFrame to wait for Suspense boundaries to settle
-        requestAnimationFrame(() => {
-          // Small delay to allow for Suspense transitions
-          setTimeout(() => {
+        // Wait for the next render if loading an unsettled route
+        if (state.navigation.state !== 'idle') {
+          requestAnimationFrame(() => {
             handleNavigation({
               location: state.location,
               routes,
               navigationType: state.historyAction,
               version,
               basename,
             });
-          }, 100);
-        });
+          });
+        } else {
+          handleNavigation({
+            location: state.location,
+            routes,
+            navigationType: state.historyAction,
+            version,
+            basename,
+          });
+        }
       }
     });
 

packages/react/src/types.ts

@@ -182,10 +182,14 @@ export interface RouterInit {
   hydrationData?: HydrationState;
 }
 
+export type NavigationState = {
+  state: 'idle' | 'loading' | 'submitting';
+}
+
 export type NavigationStates = {
-  Idle: any;
-  Loading: any;
-  Submitting: any;
+  Idle: NavigationState;
+  Loading: NavigationState;
+  Submitting: NavigationState;
 };
 
 export type Navigation = NavigationStates[keyof NavigationStates];
@@ -202,6 +206,7 @@ export declare enum HistoryAction {
 export interface RouterState {
   historyAction: Action | HistoryAction | any;
   location: Location;
+  navigation: Navigation;
 }
 export interface Router<TState extends RouterState = RouterState> {
   state: TState;