feat: 尝试react scan

coderz-w · Nov 26, 2024 · bd7cdcb · bd7cdcb
1 parent 8af2b78
commit bd7cdcb
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 12 deletions.
diff --git a/.million/store.json b/.million/store.json
@@ -0,0 +1 @@
+{"encodings":[],"reactData":{},"unusedFiles":[],"mtime":null}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -71,6 +71,8 @@ export default async function RootLayout({ children }: PropsWithChildren) {
   return (
     <html lang="zh-CN" className=" noise" suppressHydrationWarning>
       <head>
+        {/* react scan */}
+        {/* <script src="https://unpkg.com/react-scan/dist/auto.global.js" async></script> */}
         <SayHi />
         <AccentColorStyleInjector />
       </head>

diff --git a/src/components/modules/shared/ReadIndicator.tsx b/src/components/modules/shared/ReadIndicator.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { memo, useDeferredValue, useEffect, useState } from 'react';
 
 import { MaterialSymbolsProgressActivity } from '@/components/icons/Progress';
 import { MotionButtonBase } from '@/components/ui/button';
@@ -35,21 +35,27 @@ export const ReadIndicator = () => {
   }, [Element]);
 
   return (
-    <div className="text-gray-800 dark:text-neutral-300">
+    <div className="text-gray-800 dark:text-neutral-300 gap-4">
       <div className="flex items-center gap-2">
         <MaterialSymbolsProgressActivity progress={readPercent} />
         {readPercent}%<br />
       </div>
-      <MotionButtonBase
-        onClick={springScrollToTop}
-        className={cn(
-          'mt-1 flex flex-nowrap items-center gap-2 opacity-50 transition-all duration-500 hover:opacity-100',
-          readPercent > 10 ? '' : 'pointer-events-none opacity-0',
-        )}
-      >
-        <i className="i-mingcute-arrow-up-circle-line" />
-        <span className="whitespace-nowrap">回到顶部</span>
-      </MotionButtonBase>
+      <BackToTop readPercent={useDeferredValue(readPercent)} />
     </div>
   );
 };
+
+const BackToTop = memo(({ readPercent }: { readPercent: number }) => {
+  return (
+    <MotionButtonBase
+      onClick={springScrollToTop}
+      className={cn(
+        'mt-1 flex flex-nowrap items-center gap-2 opacity-50 transition-all duration-500 hover:opacity-100',
+        readPercent > 10 ? '' : 'pointer-events-none opacity-0',
+      )}
+    >
+      <i className="i-mingcute-arrow-up-circle-line" />
+      <span className="whitespace-nowrap">回到顶部</span>
+    </MotionButtonBase>
+  );
+});