ui: add progress bar when switching pages

ui/dashboardApp/layout/main/index.js

@@ -3,6 +3,7 @@ import { Root } from '@lib/components'
 import { useLocalStorageState } from '@umijs/hooks'
 import { HashRouter as Router } from 'react-router-dom'
 import { useSpring, animated } from 'react-spring'
+import { TopLoadingBar } from '@lib/components'
 
 import Sider from './Sider'
 import styles from './index.module.less'
@@ -70,6 +71,7 @@ export default function App({ registry }) {
   return (
     <Root>
       <Router>
+        <TopLoadingBar />
         <animated.div className={styles.container} style={transContainer}>
           <Sider
             registry={registry}

ui/dashboardApp/layout/signin/index.js

@@ -1,6 +1,7 @@
 import * as singleSpa from 'single-spa'
 import { Root } from '@lib/components'
 import React, { useState, useEffect, useRef } from 'react'
+import { HashRouter as Router } from 'react-router-dom'
 import {
   DownOutlined,
   GlobalOutlined,
@@ -10,7 +11,7 @@ import {
 import { Form, Input, Button, message } from 'antd'
 import { motion } from 'framer-motion'
 import { useTranslation } from 'react-i18next'
-import LanguageDropdown from '@lib/components/LanguageDropdown'
+import { LanguageDropdown, TopLoadingBar } from '@lib/components'
 import client from '@lib/client'
 import * as auth from '@lib/utils/auth'
 
@@ -172,19 +173,22 @@ function TiDBSignInForm({ registry }) {
 function App({ registry }) {
   return (
     <Root>
-      <div className={styles.container}>
-        <div className={styles.dialogContainer}>
-          <div className={styles.dialog}>
-            <TiDBSignInForm registry={registry} />
+      <Router>
+        <TopLoadingBar />
+        <div className={styles.container}>
+          <div className={styles.dialogContainer}>
+            <div className={styles.dialog}>
+              <TiDBSignInForm registry={registry} />
+            </div>
           </div>
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ ease: 'easeOut', duration: 0.5 }}
+            className={styles.landing}
+          ></motion.div>
         </div>
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ ease: 'easeOut', duration: 0.5 }}
-          className={styles.landing}
-        ></motion.div>
-      </div>
+      </Router>
     </Root>
   )
 }

ui/lib/components/TopLoadingBar/index.tsx

@@ -0,0 +1,34 @@
+import React, { useRef, useEffect } from 'react'
+import LoadingBar from 'react-top-loading-bar'
+
+const useLoadingBar = () => {
+  const loadingBar = useRef<LoadingBar>(null)
+
+  useEffect(() => {
+    function startLoading() {
+      loadingBar?.current?.continuousStart()
+    }
+    window.addEventListener('single-spa:before-routing-event', startLoading)
+    return () =>
+      window.removeEventListener(
+        'single-spa:before-routing-event',
+        startLoading
+      )
+  }, [])
+
+  useEffect(() => {
+    function completeLoading() {
+      loadingBar?.current?.complete()
+    }
+    window.addEventListener('single-spa:routing-event', completeLoading)
+    return () =>
+      window.removeEventListener('single-spa:routing-event', completeLoading)
+  }, [])
+
+  return loadingBar
+}
+
+export default function TopLoadinngBar() {
+  const loadingBar = useLoadingBar()
+  return <LoadingBar ref={loadingBar} />
+}

ui/lib/components/index.ts

@@ -43,3 +43,4 @@ export { default as ShortValueWithTooltip } from './ShortValueWithTooltip'
 
 export { default as LanguageDropdown } from './LanguageDropdown'
 export { default as ParamsPageWrapper } from './ParamsPageWrapper'
+export { default as TopLoadingBar } from './TopLoadingBar'

ui/package.json

@@ -34,6 +34,7 @@
     "react-router-dom": "^6.0.0-alpha.3",
     "react-spring": "^8.0.27",
     "react-syntax-highlighter": "^12.2.1",
+    "react-top-loading-bar": "^1.2.0",
     "react-use": "^14.2.0",
     "single-spa": "^5.3.4",
     "single-spa-react": "^2.14.0",

ui/yarn.lock

@@ -11372,6 +11372,11 @@ react-syntax-highlighter@^12.2.1:
     prismjs "^1.8.4"
     refractor "^2.4.1"
 
+react-top-loading-bar@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/react-top-loading-bar/-/react-top-loading-bar-1.2.0.tgz#fcbca3c2e462bee7b1c0d1850e8b584cd7bd5a26"
+  integrity sha512-5oNdy+DfD5JK06bcc/gsnnXHmml+d8eaBe3C8KQ3eLiH/BD8+FcwsgbAwqgOaRjuSeVQXdYN2JC2G1uVFtCLfA==
+
 react-universal-interface@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/react-universal-interface/-/react-universal-interface-0.6.0.tgz#b65cbf7d71a2f3f7dd9705d8e4f06748539bd465"