Improve event switching speed

web/src/views/events/EventView.tsx

@@ -295,6 +295,7 @@ export default function EventView({
             filter={filter}
             timeRange={timeRange}
             startTime={startTime}
+            loading={severity != severityToggle}
             markItemAsReviewed={markItemAsReviewed}
             markAllItemsAsReviewed={markAllItemsAsReviewed}
             onSelectReview={onSelectReview}
@@ -334,6 +335,7 @@ type DetectionReviewProps = {
   filter?: ReviewFilter;
   timeRange: { before: number; after: number };
   startTime?: number;
+  loading: boolean;
   markItemAsReviewed: (review: ReviewSegment) => void;
   markAllItemsAsReviewed: (currentItems: ReviewSegment[]) => void;
   onSelectReview: (review: ReviewSegment, ctrl: boolean) => void;
@@ -349,6 +351,7 @@ function DetectionReview({
   filter,
   timeRange,
   startTime,
+  loading,
   markItemAsReviewed,
   markAllItemsAsReviewed,
   onSelectReview,
@@ -600,6 +603,9 @@ function DetectionReview({
       </div>
       <div className="w-[65px] md:w-[110px] flex flex-row">
         <div className="w-[55px] md:w-[100px] overflow-y-auto no-scrollbar">
+          {loading ? (
+            <Skeleton className="size-full" />
+          ) : (
             <EventReviewTimeline
               segmentDuration={segmentDuration}
               timestampSpread={15}
@@ -617,8 +623,12 @@ function DetectionReview({
               timelineRef={reviewTimelineRef}
               dense={isMobile}
             />
+          )}
         </div>
         <div className="w-[10px]">
+          {loading ? (
+            <Skeleton className="w-full" />
+          ) : (
             <SummaryTimeline
               reviewTimelineRef={reviewTimelineRef}
               timelineStart={timeRange.before}
@@ -627,6 +637,7 @@ function DetectionReview({
               events={reviewItems?.all ?? []}
               severityType={severity}
             />
+          )}
         </div>
       </div>
     </>