feat: added loading spinner on /dashboard when filtering (#1090)

* Added loading spinner on /dashboard when filtering

* Less jarring loading spinner bg

* Added bg overlay on loading spinner

Author: Klakurka

components/Loading/index.tsx

@@ -9,7 +9,7 @@ interface LoadingProps {
 
 export default function Loading ({ size = 60, color }: LoadingProps): React.ReactElement {
   return (
-    <div className={style.loading_container}>
+    <div className={style.loading_overlay}>
       <DotLoader
         color={color ?? 'var(--accent-color)'}
         size={size}

components/Loading/loading.module.css

@@ -1,7 +1,13 @@
-.loading_container {
+.loading_overlay {
+  --z-overlay-loading: 999999;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: 50vh;
-  width: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: var(--z-overlay-loading);
 }

pages/dashboard/index.tsx

@@ -77,6 +77,7 @@ export default function Dashboard ({ user }: PaybuttonsProps): React.ReactElemen
   const [selectedButtonIds, setSelectedButtonIds] = useState<any[]>([])
   const [showFilters, setShowFilters] = useState<boolean>(false)
   const [buttons, setButtons] = useState<any[]>([])
+  const [isLoading, setIsLoading] = useState<boolean>(false)
 
   const setPeriodFromString = (data?: DashboardData, periodString?: PeriodString): void => {
     if (data === undefined) return
@@ -118,6 +119,7 @@ export default function Dashboard ({ user }: PaybuttonsProps): React.ReactElemen
 
   useEffect(() => {
     const fetchData = async (): Promise<void> => {
+      setIsLoading(true)
       let url = 'api/dashboard'
       if (selectedButtonIds.length > 0) {
         url += `?buttonIds=${selectedButtonIds.join(',')}`
@@ -129,6 +131,7 @@ export default function Dashboard ({ user }: PaybuttonsProps): React.ReactElemen
       })
       const json = await res.json()
       setDashboardData(json)
+      setIsLoading(false)
     }
     fetchData().catch(console.error)
     const savedActivePeriodString = loadStateFromCookie(COOKIE_NAMES.DASHBOARD_FILTER, undefined) as (PeriodString | undefined)
@@ -152,15 +155,16 @@ export default function Dashboard ({ user }: PaybuttonsProps): React.ReactElemen
   if (dashboardData === undefined || activePeriod === undefined) {
     return (
       <>
-        <TopBar title="Dashboard" user={user.stUser?.email} />
+        <TopBar title="Dashboard" user={user?.stUser?.email} />
         <Loading />
       </>
     )
   }
 
   return (
     <>
-      <TopBar title="Dashboard" user={user.stUser?.email} />
+      <TopBar title="Dashboard" user={user?.stUser?.email} />
+      {isLoading && <Loading />}
       <div className={style.filter_btns}>
           <div
             onClick={() => setShowFilters(!showFilters)}