Be smarter about paging empty

web/src/views/events/DesktopEventView.tsx

@@ -116,15 +116,15 @@ export default function DesktopEventView() {
     [reviewPages]
   );
 
-  useEffect(() => {
+  const currentItems = useMemo(() => {
-    if (!reviewItems || !reviewItems.all) {
+    const current = reviewItems[severity];
-      return
+
+    if (!current || current.length == 0) {
+      return null;
     }
 
-    if (reviewItems.all.length > 0 && reviewItems[severity].length == 0) {
+    return current;
-      setSize(size + 1)
+  }, [reviewItems, severity]);
-    }
-  }, [reviewItems, severity])
 
   // review interaction
 
@@ -311,7 +311,8 @@ export default function DesktopEventView() {
         ref={contentRef}
         className="absolute left-0 top-12 bottom-0 right-28 flex flex-wrap content-start gap-2 overflow-y-auto no-scrollbar"
       >
-        {reviewItems[severity]?.map((value, segIdx) => {
+        {currentItems ? (
+          currentItems.map((value, segIdx) => {
             const lastRow = segIdx == reviewItems[severity].length - 1;
             const relevantPreview = Object.values(allPreviews || []).find(
               (preview) =>
@@ -336,7 +337,10 @@ export default function DesktopEventView() {
                 {lastRow && !isDone && <ActivityIndicator />}
               </div>
             );
-        })}
+          })
+        ) : (
+          <div ref={lastReviewRef} />
+        )}
       </div>
       <div className="absolute top-12 right-0 bottom-0">
         {after != 0 && (

web/src/views/events/MobileEventView.tsx

@@ -106,15 +106,15 @@ export default function MobileEventView() {
     [reviewPages]
   );
 
-  useEffect(() => {
+  const currentItems = useMemo(() => {
-    if (!reviewItems || !reviewItems.all) {
+    const current = reviewItems[severity];
-      return
+
+    if (!current || current.length == 0) {
+      return null;
     }
 
-    if (reviewItems.all.length > 0 && reviewItems[severity].length == 0) {
+    return current;
-      setSize(size + 1)
+  }, [reviewItems, severity]);
-    }
-  }, [reviewItems, severity, size])
 
   // review interaction
 
@@ -288,7 +288,8 @@ export default function MobileEventView() {
         ref={contentRef}
         className="w-full h-full grid grid-cols-1 sm:grid-cols-2 mt-2 gap-2 overflow-y-auto"
       >
-        {reviewItems[severity]?.map((value, segIdx) => {
+        {currentItems ? (
+          currentItems.map((value, segIdx) => {
             const lastRow = segIdx == reviewItems[severity].length - 1;
             const relevantPreview = Object.values(allPreviews || []).find(
               (preview) =>
@@ -314,7 +315,10 @@ export default function MobileEventView() {
                 {lastRow && !isDone && <ActivityIndicator />}
               </div>
             );
-        })}
+          })
+        ) : (
+          <div ref={lastReviewRef} />
+        )}
       </div>
     </>
   );