Merge pull request #958 from slumbering/spinner-fix

docs: remove spinner causing css issue + add NProgress

website/package.json

@@ -27,6 +27,7 @@
     "docusaurus-plugin-sass": "^0.2.1",
     "docusaurus2-dotenv": "^1.4.0",
     "file-loader": "^6.2.0",
+    "nprogress": "^0.2.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-social-login-buttons": "^3.5.1",

website/src/components/DocPageCustom.js

@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import qs from 'querystringify';
 import isEmpty from 'lodash/isEmpty';
+import NProgress from "nprogress";
+
 import { checkUserCollaboratorStatus } from '../api/github'
-import Spinner from './Spinner';
 import DocPageAuthentication from './DocPageAuthentication';
 import DocPageRedirect from './DocPageRedirect';
 
@@ -12,6 +13,7 @@ function DocPageCustom({ location, userAccessStatus, setUserAccessStatus }) {
   const authQuery = qs.parse(location.search);
 
   useEffect(async () => {
+    NProgress.start()
     if (!isEmpty(authQuery) && userAccessStatus === null) { //callback after successful auth with github
       const user = await checkUserCollaboratorStatus(authQuery.code);
       setUserAccessStatus(user)
@@ -19,10 +21,11 @@ function DocPageCustom({ location, userAccessStatus, setUserAccessStatus }) {
         window.localStorage.setItem('user', JSON.stringify(user));
       }
     }
-    setIsLoading(false)
+      NProgress.done();
+      setIsLoading(false)
   }, [])
 
-  if (isLoading) return <Spinner />
+  if(isLoading) return <p>...</p>
 
   if (userAccessStatus?.permission === false) {
     return <DocPageRedirect />

website/src/components/Spinner.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import styles from './Spinner.module.css';
-
-export default function Spinner() {
-    return (
-        <div className={styles.ellipsis}><div></div><div></div><div></div><div></div></div>
-    )
-}

website/src/components/Spinner.module.css

@@ -1,64 +0,0 @@
-.ellipsis {
-  display: inline-block;
-  position: absolute;
-  top: 50vh;
-  z-index: 99999;
-  left: 50vw;
-  transform: translate(-50%, -50%);
-  width: 80px;
-  height: 80px;
-}
-.ellipsis div {
-  position: absolute;
-  top: 33px;
-  width: 13px;
-  height: 13px;
-  border-radius: 50%;
-  background: var(--ifm-color-primary-dark);
-  animation-timing-function: cubic-bezier(0, 1, 1, 0);
-}
-
-html[data-theme="dark"] .ellipsis div {
-  background: var(--ifm-color-primary-light);
-}
-
-.ellipsis div:nth-child(1) {
-  left: 8px;
-  animation: lds-ellipsis1 0.6s infinite;
-}
-.ellipsis div:nth-child(2) {
-  left: 8px;
-  animation: lds-ellipsis2 0.6s infinite;
-}
-.ellipsis div:nth-child(3) {
-  left: 32px;
-  animation: lds-ellipsis2 0.6s infinite;
-}
-.ellipsis div:nth-child(4) {
-  left: 56px;
-  animation: lds-ellipsis3 0.6s infinite;
-}
-@keyframes lds-ellipsis1 {
-  0% {
-    transform: scale(0);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-@keyframes lds-ellipsis3 {
-  0% {
-    transform: scale(1);
-  }
-  100% {
-    transform: scale(0);
-  }
-}
-@keyframes lds-ellipsis2 {
-  0% {
-    transform: translate(0, 0);
-  }
-  100% {
-    transform: translate(24px, 0);
-  }
-}