ui: show progress bar when switching pages

ui/dashboardApp/index.ts

@@ -15,6 +15,7 @@ import {
 } from '@lib/utils/appOptions'
 import * as telemetry from '@lib/utils/telemetry'
 
+import LayoutRoot from '@dashboard/layout/root'
 import LayoutMain from '@dashboard/layout/main'
 import LayoutSignIn from '@dashboard/layout/signin'
 
@@ -43,9 +44,16 @@ async function main(options: AppOptions) {
 
   const registry = new AppRegistry(options)
 
+  singleSpa.registerApplication(
+    'root',
+    AppRegistry.newReactSpaApp(() => LayoutRoot, 'root'),
+    () => true,
+    { registry }
+  )
+
   singleSpa.registerApplication(
     'layout',
-    AppRegistry.newReactSpaApp(() => LayoutMain, 'root'),
+    AppRegistry.newReactSpaApp(() => LayoutMain, '__spa__main__'),
     () => {
       return !routing.isSignInPage()
     },
@@ -54,7 +62,7 @@ async function main(options: AppOptions) {
 
   singleSpa.registerApplication(
     'signin',
-    AppRegistry.newReactSpaApp(() => LayoutSignIn, 'root'),
+    AppRegistry.newReactSpaApp(() => LayoutSignIn, '__spa__main__'),
     () => {
       return routing.isSignInPage()
     },

ui/dashboardApp/layout/root/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { HashRouter as Router } from 'react-router-dom'
+
+import { Root, TopLoadingBar } from '@lib/components'
+
+function App() {
+  return (
+    <Root>
+      <Router>
+        <TopLoadingBar />
+        <div id="__spa__main__"></div>
+      </Router>
+    </Root>
+  )
+}
+
+export default App

ui/lib/components/TopLoadingBar/index.tsx

@@ -0,0 +1,20 @@
+import React, { useRef } from 'react'
+import { useEventListener } from '@umijs/hooks'
+import LoadingBar from 'react-top-loading-bar'
+
+const useLoadingBar = () => {
+  const loadingBar = useRef<LoadingBar>()
+  useEventListener('single-spa:before-routing-event', () =>
+    loadingBar.current.continuousStart()
+  )
+  useEventListener('single-spa:routing-event', () =>
+    loadingBar.current.complete()
+  )
+
+  return loadingBar
+}
+
+export default function TopLoadinngBar() {
+  const loadingBar = useLoadingBar()
+  return <LoadingBar ref={loadingBar} />
+}

ui/lib/components/index.ts

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

ui/package.json

@@ -36,6 +36,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

@@ -11442,6 +11442,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"