Move optimistic calls inside transitions

Author: brophdawg11

packages/react-router/lib/components.tsx

@@ -624,10 +624,12 @@ export function RouterProvider({
         } else if (unstable_transitions === false) {
           logErrorsAndSetState(newState);
         } else {
-          if (unstable_transitions === true) {
-            setOptimisticState(newState);
-          }
-          React.startTransition(() => logErrorsAndSetState(newState));
+          React.startTransition(() => {
+            if (unstable_transitions === true) {
+              setOptimisticState(newState);
+            }
+            logErrorsAndSetState(newState);
+          });
         }
         return;
       }
@@ -724,7 +726,12 @@ export function RouterProvider({
         if (unstable_transitions === false) {
           logErrorsAndSetState(newState);
         } else {
-          React.startTransition(() => logErrorsAndSetState(newState));
+          React.startTransition(() => {
+            if (unstable_transitions === true) {
+              setOptimisticState(newState);
+            }
+            logErrorsAndSetState(newState);
+          });
         }
         await renderPromise;
       });

packages/react-router/lib/hooks.tsx

@@ -1869,12 +1869,12 @@ function useNavigateStable(): NavigateFunction {
             }
           });
         });
-      }
-
-      if (typeof to === "number") {
-        router.navigate(to);
       } else {
-        await router.navigate(to, { fromRouteId: id, ...options });
+        if (typeof to === "number") {
+          router.navigate(to);
+        } else {
+          await router.navigate(to, { fromRouteId: id, ...options });
+        }
       }
     },
     [router, id, unstable_transitions],