From 9299bdb7814888c2c16a22f272495c65487db1fd Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Sun, 23 May 2021 14:32:59 +0800
Subject: [PATCH] --- for fun

---
 ui/component/app/view.jsx    |  5 +++-
 ui/component/router/view.jsx | 58 ++++++++++++++++++++++++++++++++++++
 2 files changed, 62 insertions(+), 1 deletion(-)

diff --git a/ui/component/app/view.jsx b/ui/component/app/view.jsx
index c7ecf9475..bdde3d2a2 100644
--- a/ui/component/app/view.jsx
+++ b/ui/component/app/view.jsx
@@ -17,6 +17,7 @@ import usePrevious from 'effects/use-previous';
 import Nag from 'component/common/nag';
 import REWARDS from 'rewards';
 import usePersistedState from 'effects/use-persisted-state';
+import LoadingBar from 'react-top-loading-bar';
 import FileDrop from 'component/fileDrop';
 import NagContinueFirstRun from 'component/nagContinueFirstRun';
 import Spinner from 'component/spinner';
@@ -120,6 +121,7 @@ function App(props: Props) {
   } = props;
 
   const appRef = useRef();
+  const loadingBarRef = useRef();
   const isEnhancedLayout = useKonamiListener();
   const [hasSignedIn, setHasSignedIn] = useState(false);
   const [readyForSync, setReadyForSync] = useState(false);
@@ -381,7 +383,8 @@ function App(props: Props) {
         />
       ) : (
         <React.Fragment>
-          <Router />
+          <Router loadingBar={loadingBarRef} />
+          {<LoadingBar ref={loadingBarRef} loaderSpeed={10} transitionTime={10} />}
           <ModalRouter />
           <FileDrop />
           <FileRenderFloating />
diff --git a/ui/component/router/view.jsx b/ui/component/router/view.jsx
index 555567d25..165194399 100644
--- a/ui/component/router/view.jsx
+++ b/ui/component/router/view.jsx
@@ -89,6 +89,7 @@ type Props = {
   setReferrer: (string) => void,
   hasUnclaimedRefereeReward: boolean,
   homepageData: any,
+  loadingBar?: any,
 };
 
 type PrivateRouteProps = Props & {
@@ -128,6 +129,8 @@ function AppRouter(props: Props) {
     hasUnclaimedRefereeReward,
     setReferrer,
     homepageData,
+    loadingBar,
+    location,
   } = props;
   const { entries, listen, action: historyAction } = history;
   const entryIndex = history.index;
@@ -139,6 +142,20 @@ function AppRouter(props: Props) {
     (potentialRoute: any) => potentialRoute && potentialRoute.route
   );
 
+  console.log('router:', props);
+  const isPathResolved = history.location.pathname === location.pathname;
+
+  useEffect(() => {
+    return () => {
+      if (history.action === 'POP' || history.action === 'PUSH') {
+        if (loadingBar && loadingBar.current) {
+          console.log('start');
+          loadingBar.current.staticStart();
+        }
+      }
+    };
+  }, [history.action, history.location]);
+
   // For people arriving at settings page from deeplinks, know whether they can "go back"
   useEffect(() => {
     const unlisten = listen((location, action) => {
@@ -198,6 +215,47 @@ function AppRouter(props: Props) {
     }
   }, [currentScroll, pathname, search, hash, resetScroll, hasLinkedCommentInUrl, historyAction]);
 
+  // useEffect(() => {
+  //   if (loadingBar && loadingBar.current) {
+  //     console.log('hasNavigated:', hasNavigated);
+  //     if (hasNavigated) {
+  //       loadingBar.current.continuousStart();
+  //     } else {loadingBar.current.complete();
+  //     }
+  //   }
+  // }, [hasNavigated]);
+
+  // useEffect(() => {
+  //   console.log('isPathResolved:', isPathResolved);
+  //   if (loadingBar && loadingBar.current) {
+  //     if (isPathResolved) {
+  //       console.log('  stop');
+  //       loadingBar.current.complete();
+  //     } else {
+  //       console.log('  start');
+  //       loadingBar.current.continuousStart();
+  //     }
+  //   }
+  // }, [isPathResolved]);
+
+  // useEffect(() => {
+  //   console.log('isPathResolved:', isPathResolved);
+  //   if (loadingBar && loadingBar.current) {
+  //     if (isPathResolved) {
+  //       console.log('  stop');
+  //       loadingBar.current.complete();
+  //     }
+  //   }
+  // }, [isPathResolved]);
+
+  useEffect(() => {
+    console.log('router done');
+    if (isPathResolved && loadingBar && loadingBar.current) {
+      console.log('stop');
+      loadingBar.current.complete();
+    }
+  });
+
   // react-router doesn't decode pathanmes before doing the route matching check
   // We have to redirect here because if we redirect on the server, it might get encoded again
   // in the browser causing a redirect loop