perf(feeds): use hasMore instead of length check for conditional virtualization

src/components/post-desktop/post-desktop.tsx

@@ -498,8 +498,8 @@ const PostDesktop = ({ post, roles, showAllReplies, showReplies = true }: PostPr
             )}
           </span>
         )}
-        {/* Virtuoso infinite scroll for post page view with more than 25 replies */}
+        {/* Virtuoso infinite scroll for post page view when there's more content to paginate */}
-        {!isHidden && showAllReplies && !isInPendingPostView && showReplies && replyCount > 25 && (
+        {!isHidden && showAllReplies && !isInPendingPostView && showReplies && hasMore && (
           <Virtuoso
             increaseViewportBy={{ bottom: 1200, top: 1200 }}
             totalCount={filteredReplies.length}
@@ -517,12 +517,12 @@ const PostDesktop = ({ post, roles, showAllReplies, showReplies = true }: PostPr
             initialScrollTop={lastVirtuosoState?.scrollTop}
           />
         )}
-        {/* Non-virtualized rendering for post page view with 25 or fewer replies */}
+        {/* Non-virtualized rendering for post page view when all replies fit on one page */}
         {!isHidden &&
           showAllReplies &&
           !isInPendingPostView &&
           showReplies &&
-          replyCount <= 25 &&
+          !hasMore &&
           filteredReplies.map((reply, index) => (
             <div key={index} className={styles.replyContainer}>
               <Reply reply={reply} roles={roles} postReplyCount={replyCount} threadNumber={post?.number} />

src/components/post-mobile/post-mobile.tsx

@@ -374,8 +374,8 @@ const PostMobile = ({ post, roles, showAllReplies, showReplies = true }: PostPro
                 </div>
               )}
             </div>
-            {/* Virtuoso infinite scroll for post page view with more than 25 replies */}
+            {/* Virtuoso infinite scroll for post page view when there's more content to paginate */}
-            {!(pinned && !isInPostView) && showAllReplies && !isInPendingPostView && showReplies && replyCount > 25 && (
+            {!(pinned && !isInPostView) && showAllReplies && !isInPendingPostView && showReplies && hasMore && (
               <Virtuoso
                 increaseViewportBy={{ bottom: 1200, top: 1200 }}
                 totalCount={filteredReplies.length}
@@ -393,12 +393,12 @@ const PostMobile = ({ post, roles, showAllReplies, showReplies = true }: PostPro
                 initialScrollTop={lastVirtuosoState?.scrollTop}
               />
             )}
-            {/* Non-virtualized rendering for post page view with 25 or fewer replies */}
+            {/* Non-virtualized rendering for post page view when all replies fit on one page */}
             {!(pinned && !isInPostView) &&
               showAllReplies &&
               !isInPendingPostView &&
               showReplies &&
-              replyCount <= 25 &&
+              !hasMore &&
               filteredReplies.map((reply, index) => (
                 <div key={index} className={styles.replyContainer}>
                   <Reply postReplyCount={replyCount} reply={reply} roles={roles} threadNumber={post?.number} />

src/views/board/board.tsx

@@ -381,18 +381,28 @@ const Board = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp, t
             <ErrorDisplay error={subplebbitError} />
           </div>
         )}
-        <Virtuoso
+        {/* Use Virtuoso for infinite scroll only when there's more content to paginate */}
-          increaseViewportBy={{ bottom: 1200, top: 1200 }}
+        {hasMore ? (
-          totalCount={combinedFeed.length}
+          <Virtuoso
-          data={combinedFeed}
+            increaseViewportBy={{ bottom: 1200, top: 1200 }}
-          itemContent={(index, post) => <Post index={index} post={post} />}
+            totalCount={combinedFeed.length}
-          useWindowScroll={true}
+            data={combinedFeed}
-          components={{ Footer }}
+            itemContent={(index, post) => <Post index={index} post={post} />}
-          endReached={loadMore}
+            useWindowScroll={true}
-          ref={virtuosoRef}
+            components={{ Footer }}
-          restoreStateFrom={lastVirtuosoState}
+            endReached={loadMore}
-          initialScrollTop={lastVirtuosoState?.scrollTop}
+            ref={virtuosoRef}
-        />
+            restoreStateFrom={lastVirtuosoState}
+            initialScrollTop={lastVirtuosoState?.scrollTop}
+          />
+        ) : (
+          <>
+            {combinedFeed.map((post, index) => (
+              <Post key={post.cid} index={index} post={post} />
+            ))}
+            <Footer />
+          </>
+        )}
       </div>
     </>
   );

src/views/catalog/catalog.tsx

@@ -540,18 +540,28 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
       <div className={styles.catalog}>
         {processedFeed?.length !== 0 ? (
           <>
-            <Virtuoso
+            {/* Use Virtuoso for infinite scroll only when there's more content to paginate */}
-              increaseViewportBy={{ bottom: 1200, top: 1200 }}
+            {hasMore ? (
-              totalCount={rows?.length || 0}
+              <Virtuoso
-              data={rows}
+                increaseViewportBy={{ bottom: 1200, top: 1200 }}
-              itemContent={(index, row) => <CatalogRow index={index} row={row} />}
+                totalCount={rows?.length || 0}
-              useWindowScroll={true}
+                data={rows}
-              components={{ Footer }}
+                itemContent={(index, row) => <CatalogRow index={index} row={row} />}
-              endReached={loadMore}
+                useWindowScroll={true}
-              ref={virtuosoRef}
+                components={{ Footer }}
-              restoreStateFrom={lastVirtuosoState}
+                endReached={loadMore}
-              initialScrollTop={lastVirtuosoState?.scrollTop}
+                ref={virtuosoRef}
-            />
+                restoreStateFrom={lastVirtuosoState}
+                initialScrollTop={lastVirtuosoState?.scrollTop}
+              />
+            ) : (
+              <>
+                {rows.map((row, index) => (
+                  <CatalogRow key={index} index={index} row={row} />
+                ))}
+                <Footer />
+              </>
+            )}
           </>
         ) : (
           <div className={styles.footer}>

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

@@ -632,8 +632,8 @@ export const ModQueueView = ({ boardIdentifier: propBoardIdentifier }: ModQueueV
             <div className={styles.actionsHeader}>{t('actions')}</div>
           </div>
 
-          {/* Use Virtuoso for infinite scroll only when feed is large enough to warrant it */}
+          {/* Use Virtuoso for infinite scroll only when there's more content to paginate */}
-          {feed.length > 25 ? (
+          {hasMore ? (
             <Virtuoso
               useWindowScroll
               data={feed}