From cad423e6134de7decb25c5b1b2f6a78d77c9fdc9 Mon Sep 17 00:00:00 2001
From: miguel-merlin <mmerlin@stevens.edu>
Date: Thu, 28 Mar 2024 15:55:34 -0400
Subject: [PATCH] feat: Added spinner when loading table

---
 src/pages/HomePage.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 9c15a47..7f6cad7 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,4 +1,4 @@
-import { Container, HStack, Text } from '@chakra-ui/react'
+import { Center, Container, HStack, Spinner, Text } from '@chakra-ui/react'
 import TableDashboard from '../components/TableDashboard'
 import Sidebar from '../components/Sidebar'
 import { getAllUsers } from '../api/lib/users'
@@ -8,13 +8,16 @@ import React, { useEffect, useState } from 'react'
 function HomePage (): JSX.Element {
   const [members, setMembers] = React.useState<User[]>([])
   const [error, setError] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState<boolean>(true)
 
   useEffect(() => {
     void getAllUsers().then((response) => {
       setMembers(response.data as User[])
+      setIsLoading(false)
     }).catch((error) => {
       console.error(error)
       setError('Failed to load Blueprint members. Please try again later.')
+      setIsLoading(false)
     })
   }, [])
 
@@ -22,7 +25,8 @@ function HomePage (): JSX.Element {
     <HStack height="100vh" spacing="0">
       <Sidebar />
       <Container>
-        {error ? (<Text color="red.500">{error}</Text>) : (<TableDashboard members={members} />)}
+      {error && <Text color="red.500">{error}</Text>}
+      {isLoading ? <Center> <Spinner size="xl"/> </Center> : <TableDashboard members={members} />}
       </Container>
     </HStack>
   )