Further improve loading

This commit is contained in:
Nicolas Mowen 2024-04-11 18:19:59 -06:00
parent 13cac082d5
commit 111bffb3c8

View File

@ -290,7 +290,7 @@ export default function EventView({
reviewItems={reviewItems} reviewItems={reviewItems}
relevantPreviews={relevantPreviews} relevantPreviews={relevantPreviews}
selectedReviews={selectedReviews} selectedReviews={selectedReviews}
itemsToReview={reviewCounts[severity]} itemsToReview={reviewCounts[severityToggle]}
severity={severity} severity={severity}
filter={filter} filter={filter}
timeRange={timeRange} timeRange={timeRange}
@ -533,7 +533,7 @@ function DetectionReview({
className="absolute left-1/2 -translate-x-1/2 z-50 pointer-events-none" className="absolute left-1/2 -translate-x-1/2 z-50 pointer-events-none"
contentRef={contentRef} contentRef={contentRef}
reviewItems={currentItems} reviewItems={currentItems}
itemsToReview={itemsToReview} itemsToReview={loading ? 0 : itemsToReview}
pullLatestData={pullLatestData} pullLatestData={pullLatestData}
/> />
)} )}
@ -544,7 +544,7 @@ function DetectionReview({
</div> </div>
)} )}
{currentItems?.length === 0 && ( {!loading && currentItems?.length === 0 && (
<div className="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 flex flex-col justify-center items-center text-center"> <div className="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 flex flex-col justify-center items-center text-center">
<LuFolderCheck className="size-16" /> <LuFolderCheck className="size-16" />
There are no {severity.replace(/_/g, " ")}s to review There are no {severity.replace(/_/g, " ")}s to review
@ -555,8 +555,8 @@ function DetectionReview({
className="w-full mx-2 px-1 grid sm:grid-cols-2 md:grid-cols-3 3xl:grid-cols-4 gap-2 md:gap-4" className="w-full mx-2 px-1 grid sm:grid-cols-2 md:grid-cols-3 3xl:grid-cols-4 gap-2 md:gap-4"
ref={contentRef} ref={contentRef}
> >
{currentItems && {!loading && currentItems
currentItems.map((value) => { ? currentItems.map((value) => {
const selected = selectedReviews.includes(value.id); const selected = selectedReviews.includes(value.id);
return ( return (
@ -565,7 +565,8 @@ function DetectionReview({
ref={minimapRef} ref={minimapRef}
data-start={value.start_time} data-start={value.start_time}
data-segment-start={ data-segment-start={
alignStartDateToTimeline(value.start_time) - segmentDuration alignStartDateToTimeline(value.start_time) -
segmentDuration
} }
className="review-item relative rounded-lg" className="review-item relative rounded-lg"
> >
@ -585,8 +586,13 @@ function DetectionReview({
/> />
</div> </div>
); );
})} })
{(currentItems?.length ?? 0) > 0 && (itemsToReview ?? 0) > 0 && ( : Array(itemsToReview)
.fill(0)
.map(() => <Skeleton className="size-full aspect-video" />)}
{!loading &&
(currentItems?.length ?? 0) > 0 &&
(itemsToReview ?? 0) > 0 && (
<div className="col-span-full flex justify-center items-center"> <div className="col-span-full flex justify-center items-center">
<Button <Button
className="text-white" className="text-white"