From d5d5a447feb26fec62aa2c18ce4a0868ccf05054 Mon Sep 17 00:00:00 2001
From: David Klakurka <klakurka@gmail.com>
Date: Sat, 20 Dec 2025 18:39:13 -0800
Subject: [PATCH 1/3] Added loading spinner on /dashboard when filtering

---
 pages/dashboard/index.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/pages/dashboard/index.tsx b/pages/dashboard/index.tsx
index 57d543e2..c1f614c9 100644
--- a/pages/dashboard/index.tsx
+++ b/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)
@@ -149,7 +152,7 @@ export default function Dashboard ({ user }: PaybuttonsProps): React.ReactElemen
     }
   }, [activePeriodString, dashboardData])
 
-  if (dashboardData === undefined || activePeriod === undefined) {
+  if (dashboardData === undefined || activePeriod === undefined || isLoading) {
     return (
       <>
         <TopBar title="Dashboard" user={user.stUser?.email} />

From feb8793a28c63cfecda1b7141c3e52311218a07b Mon Sep 17 00:00:00 2001
From: David Klakurka <klakurka@gmail.com>
Date: Sat, 20 Dec 2025 19:24:37 -0800
Subject: [PATCH 2/3] Less jarring loading spinner bg

---
 components/Loading/index.tsx          |  2 +-
 components/Loading/loading.module.css | 10 +++++++---
 pages/dashboard/index.tsx             |  7 ++++---
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/components/Loading/index.tsx b/components/Loading/index.tsx
index ef08e829..cfd82f9a 100644
--- a/components/Loading/index.tsx
+++ b/components/Loading/index.tsx
@@ -20,7 +20,7 @@ export default function Loading ({ size = 60, color }: LoadingProps): React.Reac
   }, [color])
 
   return (
-    <div className={style.loading_container}>
+    <div className={style.loading_overlay}>
       <DotLoader
         color={accentColor}
         size={size}
diff --git a/components/Loading/loading.module.css b/components/Loading/loading.module.css
index cd834c1a..7e0fe39f 100644
--- a/components/Loading/loading.module.css
+++ b/components/Loading/loading.module.css
@@ -1,7 +1,11 @@
-.loading_container {
+.loading_overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: 50vh;
-  width: 100%;
+  z-index: 9999;
 }
diff --git a/pages/dashboard/index.tsx b/pages/dashboard/index.tsx
index c1f614c9..f374169d 100644
--- a/pages/dashboard/index.tsx
+++ b/pages/dashboard/index.tsx
@@ -152,10 +152,10 @@ export default function Dashboard ({ user }: PaybuttonsProps): React.ReactElemen
     }
   }, [activePeriodString, dashboardData])
 
-  if (dashboardData === undefined || activePeriod === undefined || isLoading) {
+  if (dashboardData === undefined || activePeriod === undefined) {
     return (
       <>
-        <TopBar title="Dashboard" user={user.stUser?.email} />
+        <TopBar title="Dashboard" user={user?.stUser?.email} />
         <Loading />
       </>
     )
@@ -163,7 +163,8 @@ export default function Dashboard ({ user }: PaybuttonsProps): React.ReactElemen
 
   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)}

From 1c79b5db4e4e6fb4a6e8a398b1ee0a2052021c35 Mon Sep 17 00:00:00 2001
From: David Klakurka <klakurka@gmail.com>
Date: Sun, 21 Dec 2025 11:27:35 -0800
Subject: [PATCH 3/3] Added bg overlay on loading spinner

---
 components/Loading/loading.module.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/Loading/loading.module.css b/components/Loading/loading.module.css
index 7e0fe39f..73bcaa9f 100644
--- a/components/Loading/loading.module.css
+++ b/components/Loading/loading.module.css
@@ -1,4 +1,5 @@
 .loading_overlay {
+  --z-overlay-loading: 999999;
   position: fixed;
   top: 0;
   left: 0;
@@ -7,5 +8,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 9999;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: var(--z-overlay-loading);
 }