poc

Author: jacob-ebey

packages/react-router/lib/components.tsx

@@ -521,7 +521,9 @@ export function RouterProvider({
   flushSync: reactDomFlushSyncImpl,
   unstable_onError,
 }: RouterProviderProps): React.ReactElement {
-  let [state, setStateImpl] = React.useState(router.state);
+  let [_state, setStateImpl] = React.useState(router.state);
+  // @ts-expect-error - Needs React 19 types
+  let [state, setOptimisticState] = React.useOptimistic(_state);
   let [pendingState, setPendingState] = React.useState<RouterState>();
   let [vtContext, setVtContext] = React.useState<ViewTransitionContextObject>({
     isTransitioning: false,
@@ -591,7 +593,10 @@ export function RouterProvider({
         if (reactDomFlushSyncImpl && flushSync) {
           reactDomFlushSyncImpl(() => logErrorsAndSetState(newState));
         } else {
-          React.startTransition(() => logErrorsAndSetState(newState));
+          React.startTransition(() => {
+            setOptimisticState(newState);
+            logErrorsAndSetState(newState);
+          });
         }
         return;
       }

packages/react-router/lib/dom/lib.tsx

@@ -2539,7 +2539,7 @@ export function useSubmit(): SubmitFunction {
   let { basename } = React.useContext(NavigationContext);
   let currentRouteId = useRouteId();
 
-  return React.useCallback<SubmitFunction>(
+  const submit = React.useCallback<SubmitFunction>(
     async (target, options = {}) => {
       let { action, method, encType, formData, body } = getFormSubmissionInfo(
         target,
@@ -2573,6 +2573,49 @@ export function useSubmit(): SubmitFunction {
     },
     [router, basename, currentRouteId],
   );
+
+  return React.useCallback<SubmitFunction>(
+    (target, options) => {
+      const deferred = new Deferred<void>();
+      // @ts-expect-error - Needs React 19 types
+      React.startTransition(async () => {
+        try {
+          await submit(target, options);
+          deferred.resolve();
+        } catch (error) {
+          deferred.reject(error);
+        }
+      });
+      return deferred.promise;
+    },
+    [submit],
+  );
+}
+
+// TODO: Move to a shared location
+class Deferred<T> {
+  status: "pending" | "resolved" | "rejected" = "pending";
+  promise: Promise<T>;
+  // @ts-expect-error - no initializer
+  resolve: (value: T) => void;
+  // @ts-expect-error - no initializer
+  reject: (reason?: unknown) => void;
+  constructor() {
+    this.promise = new Promise((resolve, reject) => {
+      this.resolve = (value) => {
+        if (this.status === "pending") {
+          this.status = "resolved";
+          resolve(value);
+        }
+      };
+      this.reject = (reason) => {
+        if (this.status === "pending") {
+          this.status = "rejected";
+          reject(reason);
+        }
+      };
+    });
+  }
 }
 
 // v7: Eventually we should deprecate this entirely in favor of using the

packages/react-router/lib/hooks.tsx

@@ -1825,15 +1825,58 @@ function useNavigateStable(): NavigateFunction {
       if (!activeRef.current) return;
 
       if (typeof to === "number") {
-        router.navigate(to);
+        await router.navigate(to);
       } else {
         await router.navigate(to, { fromRouteId: id, ...options });
       }
     },
     [router, id],
   );
 
-  return navigate;
+  let navigateTransition = React.useCallback(
+    (to: To | number, options: NavigateOptions = {}) => {
+      const deferred = new Deferred<void>();
+      // @ts-expect-error - Needs React 19 types
+      React.startTransition(async () => {
+        try {
+          await navigate(to as To, options);
+          deferred.resolve();
+        } catch (e) {
+          deferred.reject(e);
+        }
+      });
+      return deferred.promise;
+    },
+    [navigate],
+  );
+
+  return navigateTransition;
+}
+
+// TODO: Move to a shared location
+class Deferred<T> {
+  status: "pending" | "resolved" | "rejected" = "pending";
+  promise: Promise<T>;
+  // @ts-expect-error - no initializer
+  resolve: (value: T) => void;
+  // @ts-expect-error - no initializer
+  reject: (reason?: unknown) => void;
+  constructor() {
+    this.promise = new Promise((resolve, reject) => {
+      this.resolve = (value) => {
+        if (this.status === "pending") {
+          this.status = "resolved";
+          resolve(value);
+        }
+      };
+      this.reject = (reason) => {
+        if (this.status === "pending") {
+          this.status = "rejected";
+          reject(reason);
+        }
+      };
+    });
+  }
 }
 
 const alreadyWarned: Record<string, boolean> = {};

playground/framework/app/root.tsx

@@ -1,13 +1,20 @@
+import { useTransition } from "react";
 import {
+  useNavigate,
   Link,
   Links,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
+  useNavigation,
 } from "react-router";
 
 export function Layout({ children }: { children: React.ReactNode }) {
+  const [pending, startTransition] = useTransition();
+  const navigate = useNavigate();
+  const navigation = useNavigation();
+
   return (
     <html lang="en">
       <head>
@@ -29,7 +36,31 @@ export function Layout({ children }: { children: React.ReactNode }) {
               Product
             </Link>
           </li>
+          <li>
+            <button
+              onClick={() => {
+                // @ts-expect-error - Needs React 19 types
+                startTransition(() => navigate("/"));
+              }}
+            >
+              Home
+            </button>
+          </li>
+          <li>
+            <button
+              onClick={() => {
+                // @ts-expect-error - Needs React 19 types
+                startTransition(() => navigate("/products/abc"));
+              }}
+            >
+              Product
+            </button>
+          </li>
+          <li>{pending ? "Loading..." : "Idle"}</li>
         </ul>
+        <pre>
+          <p>{JSON.stringify(navigation)}</p>
+        </pre>
         {children}
         <ScrollRestoration />
         <Scripts />

playground/framework/app/routes/_index.tsx

@@ -1,6 +1,7 @@
 import type { Route } from "./+types/_index";
 
-export function loader({ params }: Route.LoaderArgs) {
+export async function loader({ params }: Route.LoaderArgs) {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
   return { planet: "world", date: new Date(), fn: () => 1 };
 }
 

playground/framework/app/routes/product.tsx

@@ -1,9 +1,34 @@
+import { Form, useNavigation } from "react-router";
 import type { Route } from "./+types/product";
+import { useTransition } from "react";
 
-export function loader({ params }: Route.LoaderArgs) {
+export async function loader({ params }: Route.LoaderArgs) {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
   return { name: `Super cool product #${params.id}` };
 }
 
-export default function Component({ loaderData }: Route.ComponentProps) {
-  return <h1>{loaderData.name}</h1>;
+export async function action() {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  return "Action complete!";
+}
+
+export default function Component({
+  actionData,
+  loaderData,
+}: Route.ComponentProps) {
+  const [pending, setPending] = useTransition();
+  return (
+    <>
+      <h1>{loaderData.name}</h1>
+      <p>{pending ? "Loading..." : "Idle"}</p>
+      <Form
+        onSubmit={() => {
+          setPending(() => {});
+        }}
+      >
+        <button type="submit">Perform Action</button>
+      </Form>
+      {actionData && <p>{actionData}</p>}
+    </>
+  );
 }