From f1c6a2bfb0780d53f75b8c6f8fe7f7aec5e9f4da Mon Sep 17 00:00:00 2001 From: baurine <2008.hbl@gmail.com> Date: Mon, 29 Jun 2020 16:47:04 +0800 Subject: [PATCH 1/2] show progress bar when switching pages --- ui/dashboardApp/index.ts | 12 ++++++-- ui/dashboardApp/layout/root/index.tsx | 17 ++++++++++++ ui/lib/components/TopLoadingBar/index.tsx | 34 +++++++++++++++++++++++ ui/lib/components/index.ts | 1 + ui/package.json | 1 + ui/yarn.lock | 5 ++++ 6 files changed, 68 insertions(+), 2 deletions(-) create mode 100644 ui/dashboardApp/layout/root/index.tsx create mode 100644 ui/lib/components/TopLoadingBar/index.tsx diff --git a/ui/dashboardApp/index.ts b/ui/dashboardApp/index.ts index d9adf8eefb..3e521af8fc 100644 --- a/ui/dashboardApp/index.ts +++ b/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() }, diff --git a/ui/dashboardApp/layout/root/index.tsx b/ui/dashboardApp/layout/root/index.tsx new file mode 100644 index 0000000000..49fe281a4e --- /dev/null +++ b/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 ( + + + +
+ + + ) +} + +export default App diff --git a/ui/lib/components/TopLoadingBar/index.tsx b/ui/lib/components/TopLoadingBar/index.tsx new file mode 100644 index 0000000000..33bf3e6236 --- /dev/null +++ b/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(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 +} diff --git a/ui/lib/components/index.ts b/ui/lib/components/index.ts index 6faae1b285..13d16ff3a5 100644 --- a/ui/lib/components/index.ts +++ b/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' diff --git a/ui/package.json b/ui/package.json index 4247d390bd..d1d1912b58 100644 --- a/ui/package.json +++ b/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", diff --git a/ui/yarn.lock b/ui/yarn.lock index e1ef05b755..d0ad4c90ef 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -11377,6 +11377,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" From 87b8a777ba828f53465f1285ecde0a2b7cf0e32f Mon Sep 17 00:00:00 2001 From: baurine <2008.hbl@gmail.com> Date: Tue, 30 Jun 2020 14:58:40 +0800 Subject: [PATCH 2/2] use useEventListener hook to simplify the code --- ui/lib/components/TopLoadingBar/index.tsx | 32 +++++++---------------- 1 file changed, 9 insertions(+), 23 deletions(-) diff --git a/ui/lib/components/TopLoadingBar/index.tsx b/ui/lib/components/TopLoadingBar/index.tsx index 33bf3e6236..ee7e5a5a82 100644 --- a/ui/lib/components/TopLoadingBar/index.tsx +++ b/ui/lib/components/TopLoadingBar/index.tsx @@ -1,29 +1,15 @@ -import React, { useRef, useEffect } from 'react' +import React, { useRef } from 'react' +import { useEventListener } from '@umijs/hooks' import LoadingBar from 'react-top-loading-bar' const useLoadingBar = () => { - const loadingBar = useRef(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) - }, []) + const loadingBar = useRef() + useEventListener('single-spa:before-routing-event', () => + loadingBar.current.continuousStart() + ) + useEventListener('single-spa:routing-event', () => + loadingBar.current.complete() + ) return loadingBar }