Improved loading states in dashboard

frontend/pages/Dashboard.tsx

@@ -5,6 +5,8 @@ import DashboardClickChart from '../src/components/admin/DashboardClickChart'
 import Navbar from '../src/components/general/Navbar'
 import styles from '../styles/Dashboard.module.css'
 import DashboardTwoItemTable from '../src/components/admin/DashboardTwoItemTable'
+import Spinner from '../src/components/admin/Spinner'
+import FancySpinner from '../src/components/admin/FancySpinner'
 
 function Dashboard() {
   const currentDateObj = new Date()
@@ -30,7 +32,11 @@ function Dashboard() {
     }
   }, [endDate, getPageData, pageCalled, startDate])
 
-  let DashboardContent = <div>Loading...</div>
+  let DashboardContent = (
+    <div className={styles.center}>
+      <FancySpinner />
+    </div>
+  )
   const currentPageData = pageData ? pageData : previousPageData
   if (currentPageData) {
     const scholarsByMajor: [{ major: string; scholar_count: string }] = currentPageData['scholarsRankedByMajor']
@@ -112,7 +118,7 @@ function Dashboard() {
               className={styles.dateLimitSubmit}
               disabled={pageLoading}
             >
-              {pageLoading ? <div>Loading</div> : 'Get Clicks'}
+              {pageLoading ? <Spinner size={16} thickness={3} /> : 'Get Clicks'}
             </button>
           </form>
         </div>
@@ -134,7 +140,15 @@ function Dashboard() {
   return (
     <>
       <Navbar />
-      <main className={styles.wrapper}>{pageError ? <div>Error: {pageError.message}</div> : DashboardContent}</main>
+      <main className={styles.wrapper}>
+        {pageError ? (
+          <div>
+            <strong>Error:</strong> {pageError.message}
+          </div>
+        ) : (
+          DashboardContent
+        )}
+      </main>
     </>
   )
 }

frontend/src/components/admin/FancySpinner.tsx

@@ -0,0 +1,10 @@
+import styles from '../../../styles/components/FancySpinner.module.css'
+
+type SpinnerProps = {
+  size?: number
+  thickness?: number
+}
+
+export default function FancySpinner({ size = 100 }: SpinnerProps) {
+  return <div style={{ width: `${size}px`, height: `${size}px` }} className={styles.loader} />
+}

frontend/src/components/admin/Spinner.tsx

@@ -0,0 +1,12 @@
+import styles from '../../../styles/components/Spinner.module.css'
+
+type SpinnerProps = {
+  size?: number
+  thickness?: number
+}
+
+export default function Spinner({ size = 80, thickness = 6 }: SpinnerProps) {
+  return (
+    <div style={{ width: `${size}px`, height: `${size}px`, borderWidth: `${thickness}px` }} className={styles.loader} />
+  )
+}

frontend/styles/Dashboard.module.css

@@ -7,6 +7,17 @@
   margin: 0 auto;
 }
 
+.center {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .titleRow {
   display: flex;
   flex-direction: column;
@@ -32,7 +43,6 @@
 }
 
 .dateLimitInputContainer {
-  color: #ddd;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -46,12 +56,18 @@
   font-size: 0.85rem;
 }
 
+.dateLimitInput:disabled,
+.dateLimitSubmit:disabled,
+.dateLimitSubmit:disabled:hover {
+  cursor: not-allowed;
+}
+
 .dateLimitInput,
 .dateLimitSubmit {
   padding: 0 1rem;
   height: 2.2rem;
   transition-duration: 150ms;
-  transition-property: border-color;
+  transition-property: border-color, opacity;
 }
 
 .dateLimitInputLabel {
@@ -60,11 +76,17 @@
 
 .dateLimitInput {
   background-color: transparent;
-  border: 1px solid #333;
+  border-width: 1px;
+  border-style: solid;
   border-radius: 0.5rem;
   cursor: text;
 }
 
+.dateLimitInput,
+.dateLimitInput:disabled:hover {
+  border-color: #333;
+}
+
 .dateLimitInput:hover {
   border-color: #666;
 }
@@ -81,15 +103,27 @@
   background-color: #333;
   border-width: 2px;
   border-style: solid;
-  border-color: #555;
   border-radius: 0.25rem;
   font-weight: bold;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.dateLimitSubmit,
+.dateLimitSubmit:disabled:hover {
+  border-color: #555;
 }
 
 .dateLimitSubmit:hover {
   border-color: #888;
 }
 
+.dateLimitInput:disabled,
+.dateLimitSubmit:disabled {
+  opacity: 0.7;
+}
+
 .quickStats {
   display: grid;
   grid-template-columns: minmax(0, 1fr);

frontend/styles/components/FancySpinner.module.css

@@ -0,0 +1,74 @@
+.loader {
+  transform: rotateZ(45deg);
+  perspective: 1000px;
+  border-radius: 50%;
+  width: 48px;
+  height: 48px;
+  color: #fff;
+}
+
+.loader:before,
+.loader:after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: inherit;
+  height: inherit;
+  border-radius: 50%;
+  transform: rotateX(70deg);
+  animation: 1s spin linear infinite;
+}
+
+.loader:after {
+  color: #999;
+  transform: rotateY(70deg);
+  animation-delay: 0.4s;
+}
+
+@keyframes rotate {
+  0% {
+    transform: translate(-50%, -50%) rotateZ(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotateZ(360deg);
+  }
+}
+
+@keyframes rotateccw {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(-360deg);
+  }
+}
+
+@keyframes spin {
+  0%,
+  100% {
+    box-shadow: 0.5em 0px 0 0px currentcolor;
+  }
+  12% {
+    box-shadow: 0.5em 0.5em 0 0 currentcolor;
+  }
+  25% {
+    box-shadow: 0 0.5em 0 0px currentcolor;
+  }
+  37% {
+    box-shadow: -0.5em 0.5em 0 0 currentcolor;
+  }
+  50% {
+    box-shadow: -0.5em 0 0 0 currentcolor;
+  }
+  62% {
+    box-shadow: -0.5em -0.5em 0 0 currentcolor;
+  }
+  75% {
+    box-shadow: 0px -0.5em 0 0 currentcolor;
+  }
+  87% {
+    box-shadow: 0.5em -0.5em 0 0 currentcolor;
+  }
+}

frontend/styles/components/Spinner.module.css

@@ -0,0 +1,19 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border: 5px solid #fff;
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}