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

@@ -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