Merge pull request #126 from Eddie992/createloadspinner

chore: create a load spinner for data fetching (WEB-100) #115

Author: dgarcia-appdev

src/app/cohorts/page.tsx

@@ -8,6 +8,7 @@ import NotificationForm from './notificationForm';
 import { useQuery } from '@tanstack/react-query';
 import Button from '../components/button/button';
 import { useGlobalState } from '../hooks/useGlobalState/useGlobalState';
+import Spinner from '../components/spinner/spinner';
 
 interface Group {
   id: number;
@@ -97,7 +98,7 @@ export default function CohortPage() {
   }, [cohortStatusResponse]);
 
   if (isLoading) {
-    return <h1>Loading...</h1>;
+    return <Spinner />;
   }
 
   return (

src/app/community/page.tsx

@@ -4,6 +4,7 @@ import styles from './community.module.css';
 import Person from '../components/person/person';
 import Section from '../components/Section/section';
 import { useQuery } from '@tanstack/react-query';
+import Spinner from '../components/spinner/spinner';
 
 interface Speaker {
   documentId: number;
@@ -24,7 +25,7 @@ export default function CommunityPage() {
   });
   const peopleData = (peopleDataResponse ?? []) as Speaker[];
   if (isLoading) {
-    return <h1>Loading...</h1>;
+    return <Spinner />;
   }
 
   return (

src/app/components/spinner/spinner.module.css

@@ -0,0 +1,35 @@
+.load-spinner {
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  border-top-color: #8105f6;
+  animation: spin 1s ease-in-out infinite;
+  -webkit-animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes spin {
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
+/* For centering the spinner */
+.spinner-container {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255);
+  z-index: 9999;
+}

src/app/components/spinner/spinner.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import styles from './spinner.module.css'; // Import css modules stylesheet as styles
+
+export default function Spinner() {
+  return (
+    <div className={styles['spinner-container']}>
+      <div className={styles['load-spinner']}></div>
+    </div>
+  );
+}

src/app/hooks/useGlobalState/useGlobalState.tsx

@@ -1,4 +1,5 @@
 'use client';
+import Spinner from '../../components/spinner/spinner';
 
 import { useQuery } from '@tanstack/react-query';
 import {
@@ -42,7 +43,7 @@ export const GlobalStateProvider = ({ children }: { children: ReactNode }) => {
     }
   }, [actionLinksResponse]);
 
-  if (isLoading) return <h1>Loading...</h1>;
+  if (isLoading) return <Spinner />;
 
   return (
     <GlobalStateContext.Provider value={state}>