From b95a2a1823e372f587dea2f64c22e44cfae7a55a Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 12 Jun 2024 13:11:07 -0500
Subject: [PATCH] Activity indicator for alerts/detections count when loading

---
 web/src/views/events/EventView.tsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 192649c88..dd48853f7 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -90,7 +90,7 @@ export default function EventView({
 
   const reviewCounts = useMemo(() => {
     if (!reviewSummary) {
-      return { alert: 0, detection: 0, significant_motion: 0 };
+      return { alert: -1, detection: -1, significant_motion: -1 };
     }
 
     let summary;
@@ -248,8 +248,13 @@ export default function EventView({
             aria-label="Select alerts"
           >
             <MdCircle className="size-2 text-severity_alert md:mr-[10px]" />
-            <div className="hidden md:block">
-              Alerts{` ∙ ${reviewCounts.alert > -1 ? reviewCounts.alert : ""}`}
+            <div className="hidden md:flex md:flex-row md:items-center">
+              Alerts
+              {reviewCounts.alert > -1 ? (
+                ` ∙ ${reviewCounts.alert}`
+              ) : (
+                <ActivityIndicator className="ml-2 size-4" />
+              )}
             </div>
           </ToggleGroupItem>
           <ToggleGroupItem
@@ -258,9 +263,13 @@ export default function EventView({
             aria-label="Select detections"
           >
             <MdCircle className="size-2 text-severity_detection md:mr-[10px]" />
-            <div className="hidden md:block">
+            <div className="hidden md:flex md:flex-row md:items-center">
               Detections
-              {` ∙ ${reviewCounts.detection > -1 ? reviewCounts.detection : ""}`}
+              {reviewCounts.detection > -1 ? (
+                ` ∙ ${reviewCounts.detection}`
+              ) : (
+                <ActivityIndicator className="ml-2 size-4" />
+              )}
             </div>
           </ToggleGroupItem>
           <ToggleGroupItem