perf(mod queue): conditionally virtualize table for large feeds

src/views/mod-queue/mod-queue.tsx

@@ -522,14 +522,25 @@ export const ModQueueView = ({ boardIdentifier: propBoardIdentifier }: ModQueueV
             <div className={styles.actionsHeader}>{t('actions')}</div>
           </div>
 
-          <Virtuoso
+          {/* Use Virtuoso for infinite scroll only when feed is large enough to warrant it */}
-            useWindowScroll
+          {feed.length > 25 ? (
-            data={feed}
+            <Virtuoso
-            totalCount={feed.length}
+              useWindowScroll
-            endReached={loadMore}
+              data={feed}
-            itemContent={(index, comment) => <ModQueueRow key={comment.cid} comment={comment} showBoardColumn={showBoardColumn} isOdd={index % 2 === 1} />}
+              totalCount={feed.length}
-            components={footerComponents}
+              endReached={loadMore}
-          />
+              increaseViewportBy={{ bottom: 1200, top: 1200 }}
+              itemContent={(index, comment) => <ModQueueRow key={comment.cid} comment={comment} showBoardColumn={showBoardColumn} isOdd={index % 2 === 1} />}
+              components={footerComponents}
+            />
+          ) : (
+            <>
+              {feed.map((comment, index) => (
+                <ModQueueRow key={comment.cid} comment={comment} showBoardColumn={showBoardColumn} isOdd={index % 2 === 1} />
+              ))}
+              <ModQueueFooter hasMore={hasMore} subplebbitAddresses={subplebbitAddresses} />
+            </>
+          )}
         </>
       )}
     </div>