feat: add page indicator (#21)

Gumichocopengin8 · Oct 24, 2020 · 93dda0b · 93dda0b
1 parent cdf24c6
commit 93dda0b
Show file tree

Hide file tree

Showing 3 changed files with 617 additions and 495 deletions.
diff --git a/web/package.json b/web/package.json
@@ -12,32 +12,32 @@
   "dependencies": {
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
-    "axios": "^0.20.0",
+    "axios": "^0.21.0",
     "lodash.zip": "^4.2.0",
     "moment": "^2.29.1",
-    "next": "^9.5.4",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-hook-form": "^6.9.2",
-    "react-is": "^16.13.1",
+    "next": "^9.5.5",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-hook-form": "^6.9.6",
+    "react-is": "^17.0.1",
     "recharts": "^1.8.5",
     "styled-components": "^5.2.0"
   },
   "devDependencies": {
     "@types/lodash.zip": "^4.2.6",
-    "@types/node": "^14.11.7",
-    "@types/react": "^16.9.51",
+    "@types/node": "^14.14.2",
+    "@types/react": "^16.9.53",
     "@types/recharts": "^1.8.16",
-    "@types/styled-components": "^5.1.3",
-    "@typescript-eslint/eslint-plugin": "^4.4.0",
-    "@typescript-eslint/parser": "^4.4.0",
+    "@types/styled-components": "^5.1.4",
+    "@typescript-eslint/eslint-plugin": "^4.5.0",
+    "@typescript-eslint/parser": "^4.5.0",
     "babel-plugin-styled-components": "^1.11.1",
-    "eslint": "^7.10.0",
-    "eslint-config-prettier": "^6.12.0",
+    "eslint": "^7.12.0",
+    "eslint-config-prettier": "^6.14.0",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.21.3",
+    "eslint-plugin-react": "^7.21.5",
     "husky": "^4.3.0",
-    "lint-staged": "^10.4.0",
+    "lint-staged": "^10.4.2",
     "prettier": "^2.1.2",
     "typescript": "^4.0.3"
   },

diff --git a/web/src/app/pages/_app.tsx b/web/src/app/pages/_app.tsx
@@ -5,26 +5,40 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { AppProps } from 'next/app';
+import { useRouter } from 'next/router';
+import { CircularProgress } from '@material-ui/core';
 import styled from 'styled-components';
 import Header from 'components/shared/Header';
 import Footer from 'components/shared/Footer';
 
 const MyApp = (props: AppProps): JSX.Element => {
   const { Component, pageProps } = props;
+  const [isLoading, setLoadingState] = useState(false);
+  const router = useRouter();
 
   useEffect(() => {
     // Remove the server-side injected CSS.
     const jssStyles = document.querySelector('#jss-server-side');
     if (jssStyles) {
       jssStyles.parentElement.removeChild(jssStyles);
     }
+
+    router.events.on('routeChangeStart', () => setLoadingState(true));
+    router.events.on('routeChangeComplete', () => setLoadingState(false));
+    router.events.on('routeChangeError', () => setLoadingState(false));
   }, []);
 
   return (
     <Wrapper>
       <Header />
+      {!isLoading && (
+        <PageIndicator>
+          <img src="/ferris.png" alt="ferris icon" />
+          <CircularProgress size={36} />
+        </PageIndicator>
+      )}
       <Component {...pageProps} />
       <Footer />
     </Wrapper>
@@ -42,4 +56,18 @@ const Wrapper = styled.div`
   }
 `;
 
+const PageIndicator = styled.div`
+  position: fixed;
+  top: 1rem;
+  right: 2rem;
+
+  > img {
+    position: fixed;
+    top: 20px;
+    right: 38px;
+    width: 24px;
+    height: 24px;
+  }
+`;
+
 export default MyApp;