✨ feat: page top loading

rdmclin2 · rdmclin2 · commit 778075ebd0a2 · 2024-10-04T09:46:39.000+08:00
diff --git a/package.json b/package.json
@@ -104,6 +104,7 @@
     "nanoid": "^5.0.7",
     "next": "^14.2.13",
     "next-pwa": "^5.6.0",
+    "nextjs-toploader": "^3.6.15",
     "numeral": "^2.0.6",
     "openai": "^4.63.0",
     "pino": "^9.4.0",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import { Analytics } from '@vercel/analytics/react';
 import { PropsWithChildren } from 'react';
 
+import NProgress from '@/components/NProgress';
 import Layout from '@/layout';
 
 import StyleRegistry from './StyleRegistry';
@@ -12,7 +13,10 @@ const RootLayout = ({ children }: PropsWithChildren) => {
     <html lang="cn" suppressHydrationWarning>
       <body>
         <StyleRegistry>
-          <Layout>{children}</Layout>
+          <Layout>
+            <NProgress />
+            {children}
+          </Layout>
         </StyleRegistry>
         <Analytics />
       </body>
diff --git a/src/components/NProgress/index.tsx b/src/components/NProgress/index.tsx
@@ -0,0 +1,12 @@
+'use client';
+
+import { useTheme } from 'antd-style';
+import NextTopLoader from 'nextjs-toploader';
+import { memo } from 'react';
+
+const NProgress = memo(() => {
+  const theme = useTheme();
+  return <NextTopLoader color={theme.colorText} height={2} shadow={false} showSpinner={false} />;
+});
+
+export default NProgress;
