feat: 使用 startTransition 优化 Modal 和 Explore 页面状态更新

Author: sxjeru

app/components/Modal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { startTransition, useEffect, useState } from "react";
 import { X } from "lucide-react";
 
 interface ModalProps {
@@ -30,13 +30,15 @@ export function Modal({
   // Handle visibility transitions and initial sync
   useEffect(() => {
     if (isOpen) {
-      setIsVisible(true);
-      setIsClosing(false);
-      setCachedChildren(children);
-      setCachedTitle(title);
+      startTransition(() => {
+        setIsVisible(true);
+        setIsClosing(false);
+        setCachedChildren(children);
+        setCachedTitle(title);
+      });
     } else if (isVisible && !isClosing) {
       // Start closing animation if we are currently visible and not already closing
-      setIsClosing(true);
+      startTransition(() => setIsClosing(true));
     }
   }, [isOpen, isVisible, isClosing, children, title]);
 

app/explore/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { forwardRef, startTransition, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Area, AreaChart, CartesianGrid, ComposedChart, ReferenceLine, ResponsiveContainer, Scatter, Tooltip, XAxis, YAxis } from "recharts";
 import { formatCompactNumber, formatNumberWithCommas } from "@/lib/utils";
 
@@ -210,7 +210,7 @@ function useLerpYDomain(
   // Sync domain when target changes or animation is disabled
   useEffect(() => {
     if (!targetDomain || !enabled) {
-      setCurrentDomain(targetDomain);
+      startTransition(() => setCurrentDomain(targetDomain));
     }
   }, [targetDomain, enabled]);