From 2d4d1584fde93af059d375d4fb85540757fd8c54 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 12 Jun 2024 13:30:22 -0500
Subject: [PATCH] Activity indicator for alerts/detections count when loading
 (#11914)

* Activity indicator for alerts/detections count when loading

* Return zeros if summary is unavailable
---
 web/src/views/events/EventView.tsx | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 192649c88..b94640e25 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;
@@ -103,7 +103,7 @@ export default function EventView({
     }
 
     if (!summary) {
-      return { alert: -1, detection: -1, significant_motion: -1 };
+      return { alert: 0, detection: 0, significant_motion: 0 };
     }
 
     if (filter?.showReviewed == 1) {
@@ -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