Add a loading state to the useGuests hook.

Enable us to render a spinner while the hook loads

frontend/src/hooks/useGuests/index.tsx

@@ -4,6 +4,7 @@ import { parseIdentity, parseRole, fetchJsonOpts } from 'utils'
 
 const useGuests = () => {
   const [guests, setGuests] = useState<Guest[]>([])
+  const [loading, setLoading] = useState<boolean>(true)
 
   const getGuestsInfo = () =>
     fetch('/api/ui/v1/guests/', fetchJsonOpts())
@@ -28,8 +29,12 @@ const useGuests = () => {
             })
           )
         )
+        setLoading(false)
+      })
+      .catch(() => {
+        setGuests([])
+        setLoading(false)
       })
-      .catch(() => setGuests([]))
 
   const reloadGuests = () => {
     getGuestsInfo()
@@ -39,7 +44,7 @@ const useGuests = () => {
     getGuestsInfo()
   }, [])
 
-  return { guests, reloadGuests }
+  return { guests, reloadGuests, loading }
 }
 
 export default useGuests

frontend/src/routes/sponsor/frontpage/index.tsx

@@ -17,6 +17,7 @@ import {
 import { styled } from '@mui/system'
 import { useState } from 'react'
 
+import Loading from 'components/loading'
 import Page from 'components/page'
 import { differenceInDays, format, isBefore } from 'date-fns'
 import { Guest, Role } from 'interfaces'
@@ -47,6 +48,7 @@ interface GuestTableProps {
 
 interface FrontPageProps {
   guests: Guest[]
+  loading: boolean
 }
 
 const StyledTableRow = styled(TableRow)({
@@ -401,15 +403,22 @@ const WaitingGuests = ({ persons }: GuestProps) => {
   )
 }
 
-function FrontPage({ guests }: FrontPageProps) {
+function FrontPage({ guests, loading }: FrontPageProps) {
   return (
     <Page pageWidth>
       <SponsorGuestButtons yourGuestsActive />
-      <InvitedGuests persons={guests} />
-      <br />
-      <WaitingGuests persons={guests} />
-      <br />
-      <ActiveGuests persons={guests} />
+
+      {loading ? (
+        <Loading />
+      ) : (
+        <>
+          <InvitedGuests persons={guests} />
+          <br />
+          <WaitingGuests persons={guests} />
+          <br />
+          <ActiveGuests persons={guests} />
+        </>
+      )}
     </Page>
   )
 }

frontend/src/routes/sponsor/index.tsx

@@ -5,7 +5,7 @@ import useGuests from 'hooks/useGuests'
 import GuestRoutes from './guest'
 
 function Sponsor() {
-  const { guests, reloadGuests } = useGuests()
+  const { guests, reloadGuests, loading } = useGuests()
 
   return (
     <Routes>
@@ -13,7 +13,10 @@ function Sponsor() {
         path="guest/:pid/*"
         element={<GuestRoutes reloadGuests={reloadGuests} />}
       />
-      <Route path="" element={<FrontPage guests={guests} />} />
+      <Route
+        path=""
+        element={<FrontPage guests={guests} loading={loading} />}
+      />
     </Routes>
   )
 }