From 1115135380d8b45cedf13f4dce952f53dda42ae6 Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Thu, 2 Jan 2025 21:05:20 +0800
Subject: [PATCH] StackedRouter: add startTransition

---
 src/platform/StackedRouter.tsx | 32 ++++++++++++++++++++------------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/platform/StackedRouter.tsx b/src/platform/StackedRouter.tsx
index df3d522..fbfc713 100644
--- a/src/platform/StackedRouter.tsx
+++ b/src/platform/StackedRouter.tsx
@@ -15,6 +15,8 @@ import {
   useContext,
   onCleanup,
   type Accessor,
+  useTransition,
+  getOwner,
 } from "solid-js";
 import { createStore, unwrap } from "solid-js/store";
 import "./StackedRouter.css";
@@ -79,8 +81,8 @@ export type NewFrameOptions<T> = (T extends undefined
 export type FramePusher<T, K extends keyof T = keyof T> = T[K] extends
   | undefined
   | any
-  ? (path: K, state?: Readonly<NewFrameOptions<T[K]>>) => Readonly<StackFrame>
-  : (path: K, state: Readonly<NewFrameOptions<T[K]>>) => Readonly<StackFrame>;
+  ? (path: K, state?: Readonly<NewFrameOptions<T[K]>>) => Promise<Readonly<StackFrame>>
+  : (path: K, state: Readonly<NewFrameOptions<T[K]>>) => Promise<Readonly<StackFrame>>;
 
 export type Navigator<PushGuide = Record<string, any>> = {
   frames: readonly StackFrame[];
@@ -465,6 +467,8 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
   const [stack, mutStack] = createStore([] as StackFrame[], { name: "stack" });
   const windowSize = useWindowSize();
 
+  const [, startTransition] = useTransition();
+
   if (import.meta.hot) {
     const saveStack = () => {
       import.meta.hot!.data[$StackedRouterSavedStack] = unwrap(stack);
@@ -488,8 +492,8 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
     });
   }
 
-  const pushFrame = (path: string, opts?: Readonly<NewFrameOptions<any>>) =>
-    untrack(() => {
+  const pushFrame = async (path: string, opts?: Readonly<NewFrameOptions<any>>) =>
+    await untrack(async () => {
       const frame = {
         path,
         state: opts?.state,
@@ -499,14 +503,17 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
       };
 
       const replace = opts?.replace;
-      if (replace === "all" || stack.length === 0) {
-        mutStack([frame]);
-      } else if (replace) {
-        const idx = stack.length - 1;
-        mutStack(idx, frame);
-      } else {
-        mutStack(stack.length, frame);
-      }
+      const length = stack.length;
+      await startTransition(() => {
+        if (replace === "all" || length === 0) {
+          mutStack([frame]);
+        } else if (replace) {
+          const idx = length - 1;
+          mutStack(idx, frame);
+        } else {
+          mutStack(length, frame);
+        }
+      });
 
       const savedStack = serializableStack(stack);
 
@@ -515,6 +522,7 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
       } else {
         window.history.pushState(savedStack, "", path);
       }
+
       return frame;
     });