Activity indicator for alerts/detections count when loading (#11914)

* Activity indicator for alerts/detections count when loading

* Return zeros if summary is unavailable
This commit is contained in:
Josh Hawkins 2024-06-12 13:30:22 -05:00 committed by GitHub
parent c75fc40833
commit 2d4d1584fd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -90,7 +90,7 @@ export default function EventView({
const reviewCounts = useMemo(() => { const reviewCounts = useMemo(() => {
if (!reviewSummary) { if (!reviewSummary) {
return { alert: 0, detection: 0, significant_motion: 0 }; return { alert: -1, detection: -1, significant_motion: -1 };
} }
let summary; let summary;
@ -103,7 +103,7 @@ export default function EventView({
} }
if (!summary) { if (!summary) {
return { alert: -1, detection: -1, significant_motion: -1 }; return { alert: 0, detection: 0, significant_motion: 0 };
} }
if (filter?.showReviewed == 1) { if (filter?.showReviewed == 1) {
@ -248,8 +248,13 @@ export default function EventView({
aria-label="Select alerts" aria-label="Select alerts"
> >
<MdCircle className="size-2 text-severity_alert md:mr-[10px]" /> <MdCircle className="size-2 text-severity_alert md:mr-[10px]" />
<div className="hidden md:block"> <div className="hidden md:flex md:flex-row md:items-center">
Alerts{`${reviewCounts.alert > -1 ? reviewCounts.alert : ""}`} Alerts
{reviewCounts.alert > -1 ? (
`${reviewCounts.alert}`
) : (
<ActivityIndicator className="ml-2 size-4" />
)}
</div> </div>
</ToggleGroupItem> </ToggleGroupItem>
<ToggleGroupItem <ToggleGroupItem
@ -258,9 +263,13 @@ export default function EventView({
aria-label="Select detections" aria-label="Select detections"
> >
<MdCircle className="size-2 text-severity_detection md:mr-[10px]" /> <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 Detections
{`${reviewCounts.detection > -1 ? reviewCounts.detection : ""}`} {reviewCounts.detection > -1 ? (
`${reviewCounts.detection}`
) : (
<ActivityIndicator className="ml-2 size-4" />
)}
</div> </div>
</ToggleGroupItem> </ToggleGroupItem>
<ToggleGroupItem <ToggleGroupItem