Feat: Add Top bar while routing different different pages (#2298)

web/app/components/base/topbar/index.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import { AppProgressBar as ProgressBar } from 'next-nprogress-bar'
+
+const Topbar = () => {
+  return (
+    <>
+      <ProgressBar
+        height='2px'
+        color="#1C64F2FF"
+        options={{ showSpinner: false }}
+        shallowRouting />
+    </>)
+}
+
+export default Topbar

web/app/layout.tsx

@@ -2,8 +2,8 @@ import type { Viewport } from 'next'
 import I18nServer from './components/i18n-server'
 import BrowerInitor from './components/browser-initor'
 import SentryInitor from './components/sentry-initor'
+import Topbar from './components/base/topbar'
 import { getLocaleOnServer } from '@/i18n/server'
-
 import './styles/globals.css'
 import './styles/markdown.scss'
 
@@ -43,6 +43,7 @@ const LocaleLayout = ({
         data-public-maintenance-notice={process.env.NEXT_PUBLIC_MAINTENANCE_NOTICE}
         data-public-site-about={process.env.NEXT_PUBLIC_SITE_ABOUT}
       >
+        <Topbar/>
         <BrowerInitor>
           <SentryInitor>
             {/* @ts-expect-error Async Server Component */}

web/package.json

@@ -48,6 +48,7 @@
     "mermaid": "10.4.0",
     "negotiator": "^0.6.3",
     "next": "^14.0.4",
+    "next-nprogress-bar": "^2.1.2",
     "qrcode.react": "^3.1.0",
     "qs": "^6.11.1",
     "rc-textarea": "^1.5.2",