From 472750540c52b07cdcbb0970f9925b053be0fb33 Mon Sep 17 00:00:00 2001
From: jffarge <jf@dagger.io>
Date: Thu, 9 Sep 2021 11:01:20 +0200
Subject: [PATCH 1/2] docs: :bug: remove spinner causing css issue + add
 NProgress

Signed-off-by: jffarge <jf@dagger.io>
---
 website/package.json                    | 1 +
 website/src/components/DocPageCustom.js | 9 ++++++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/website/package.json b/website/package.json
index 2e007643..ae0a55ab 100644
--- a/website/package.json
+++ b/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",
diff --git a/website/src/components/DocPageCustom.js b/website/src/components/DocPageCustom.js
index a7ac4ebb..46bf35ac 100644
--- a/website/src/components/DocPageCustom.js
+++ b/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 />

From 7c3d04e3e10409549c554769e359cf428a0af7ad Mon Sep 17 00:00:00 2001
From: jffarge <jf@dagger.io>
Date: Thu, 9 Sep 2021 11:03:54 +0200
Subject: [PATCH 2/2] docs: :fire: remove spinner files

Signed-off-by: jffarge <jf@dagger.io>
---
 website/src/components/Spinner.js         |  8 ---
 website/src/components/Spinner.module.css | 64 -----------------------
 2 files changed, 72 deletions(-)
 delete mode 100644 website/src/components/Spinner.js
 delete mode 100644 website/src/components/Spinner.module.css

diff --git a/website/src/components/Spinner.js b/website/src/components/Spinner.js
deleted file mode 100644
index 1cdb3161..00000000
--- a/website/src/components/Spinner.js
+++ /dev/null
@@ -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>
-    )
-}
\ No newline at end of file
diff --git a/website/src/components/Spinner.module.css b/website/src/components/Spinner.module.css
deleted file mode 100644
index 15f5d9de..00000000
--- a/website/src/components/Spinner.module.css
+++ /dev/null
@@ -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);
-  }
-}