perf(feeds): defer useReplies, Virtuoso for all paths, CLS fixes, memo

Defer useReplies to hover-only in CatalogPost. Memo CatalogRow and Post. Remove useWindowWidth and autoUpdate from CatalogPost. Replace display:none with opacity for images. Add width/height to img tags in catalog-row and comment-media. Use Virtuoso for all rendering paths (infinite, finite, pagination). Optimize filteredComments with Set lookup. Add Vite manual chunks for markdown, virtuoso, floating-ui.

src/views/board/board.tsx

@@ -180,10 +180,11 @@ const Board = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp, i
   }, [reset, setResetFunction, feed, isVisible]);
 
   // show account comments instantly in the feed once published (cid defined), instead of waiting for the feed to update
+  const feedCids = useMemo(() => new Set(feed.map((f) => f.cid)), [feed]);
   const filteredComments = useMemo(
     () =>
       accountComments.filter((comment) => {
-        const { cid, deleted, link, linkHeight, linkWidth, postCid, removed, state, thumbnailUrl, timestamp } = comment || {};
+        const { cid, deleted, postCid, removed, state, timestamp } = comment || {};
         return (
           !deleted &&
           !removed &&
@@ -192,10 +193,10 @@ const Board = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp, i
           cid &&
           cid === postCid &&
           comment?.subplebbitAddress === subplebbitAddress &&
-          !feed.some((post) => post.cid === cid)
+          !feedCids.has(cid)
         );
       }),
-    [accountComments, subplebbitAddress, feed],
+    [accountComments, subplebbitAddress, feedCids],
   );
 
   // show newest account comment at the top of the feed but after pinned posts
@@ -361,6 +362,7 @@ const Board = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp, i
   }, [title, shortAddress, subplebbitAddress, isVisible, params.boardIdentifier, boardIdentifierProp, directories, isInAllView, isInSubscriptionsView, isInModView, t]);
 
   const shouldShowErrorToUser = subplebbitError?.message && feed.length === 0;
+  const displayFeed = effectiveInfiniteScroll ? combinedFeed : currentPageFeed;
 
   return (
     <>
@@ -371,66 +373,19 @@ const Board = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp, i
             <ErrorDisplay error={subplebbitError} />
           </div>
         )}
-        {/* Infinite mode: Virtuoso when hasMore, else plain list */}
-        {effectiveInfiniteScroll ? (
-          hasMore ? (
-            <Virtuoso
-              increaseViewportBy={{ bottom: 1200, top: 1200 }}
-              totalCount={combinedFeed.length}
-              data={combinedFeed}
-              itemContent={(index, post) => <Post index={index} post={post} />}
-              useWindowScroll={true}
-              components={footerComponents}
-              endReached={loadMore}
-              ref={virtuosoRef}
-              restoreStateFrom={lastVirtuosoState}
-              initialScrollTop={lastVirtuosoState?.scrollTop}
-            />
-          ) : (
-            <>
-              {combinedFeed.map((post, index) => (
-                <Post key={post.cid} index={index} post={post} />
-              ))}
-              <BoardFooter
-                subplebbitAddresses={subplebbitAddresses}
-                hasMore={hasMore}
-                combinedFeedLength={combinedFeed.length}
-                subplebbitAddressesWithNewerPosts={subplebbitAddressesWithNewerPosts}
-                onNewerPostsClick={handleNewerPostsButtonClick}
-                isInAllView={isInAllView}
-                isInSubscriptionsView={isInSubscriptionsView}
-                isInModView={isInModView}
-                subplebbitState={subplebbitState}
-                subscriptionsLength={subscriptions?.length || 0}
-                accountSubplebbitAddressesLength={accountSubplebbitAddresses?.length || 0}
-                showLoadingEllipsis={true}
-              />
-              <PageFooterDesktop firstRow={<BoardPagination basePath={paginationBasePath} currentPage={currentPage} totalPages={totalPages} footerStyle />} />
-            </>
-          )
-        ) : (
-          /* Pagination mode: plain list, no Virtuoso, no loadMore */
-          <>
-            {currentPageFeed.map((post, index) => (
-              <Post key={post.cid} index={index} post={post} />
-            ))}
-            <BoardFooter
-              subplebbitAddresses={subplebbitAddresses}
-              hasMore={hasMore}
-              combinedFeedLength={combinedFeed.length}
-              subplebbitAddressesWithNewerPosts={subplebbitAddressesWithNewerPosts}
-              onNewerPostsClick={handleNewerPostsButtonClick}
-              isInAllView={isInAllView}
-              isInSubscriptionsView={isInSubscriptionsView}
-              isInModView={isInModView}
-              subplebbitState={subplebbitState}
-              subscriptionsLength={subscriptions?.length || 0}
-              accountSubplebbitAddressesLength={accountSubplebbitAddresses?.length || 0}
-              showLoadingEllipsis={combinedFeed.length === 0}
-            />
-            <PageFooterDesktop firstRow={<BoardPagination basePath={paginationBasePath} currentPage={currentPage} totalPages={totalPages} footerStyle />} />
-          </>
-        )}
+        <Virtuoso
+          defaultItemHeight={300}
+          increaseViewportBy={{ bottom: 1200, top: 1200 }}
+          totalCount={displayFeed.length}
+          data={displayFeed}
+          itemContent={(index, post) => <Post index={index} post={post} />}
+          useWindowScroll={true}
+          components={footerComponents}
+          endReached={effectiveInfiniteScroll && hasMore ? loadMore : undefined}
+          ref={virtuosoRef}
+          restoreStateFrom={lastVirtuosoState}
+          initialScrollTop={lastVirtuosoState?.scrollTop}
+        />
       </div>
     </>
   );

src/views/catalog/catalog.tsx

@@ -320,6 +320,7 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
   const resetTriggeredRef = useRef(false);
 
   // show account comments instantly in the feed once published (cid defined), instead of waiting for the feed to update
+  const feedCids = useMemo(() => new Set(feed.map((f) => f.cid)), [feed]);
   const filteredComments = useMemo(
     () =>
       accountComments.filter((comment) => {
@@ -334,7 +335,7 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
           cid &&
           cid === postCid &&
           comment?.subplebbitAddress === subplebbitAddress &&
-          !feed.some((post) => post.cid === cid);
+          !feedCids.has(cid);
 
         // If search is active, also check search conditions
         if (basicConditions && searchText.trim()) {
@@ -347,7 +348,7 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
 
         return basicConditions;
       }),
-    [accountComments, subplebbitAddress, feed, searchText],
+    [accountComments, subplebbitAddress, feedCids, searchText],
   );
 
   // show newest account comment at the top of the feed but after pinned posts
@@ -548,76 +549,19 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
       <div className={styles.catalog}>
         {processedFeed?.length !== 0 ? (
           <>
-            {effectiveInfiniteScroll ? (
-              hasMore ? (
-                <Virtuoso
-                  increaseViewportBy={{ bottom: 1200, top: 1200 }}
-                  totalCount={rows?.length || 0}
-                  data={rows}
-                  itemContent={(index, row) => <CatalogRow index={index} row={row} />}
-                  useWindowScroll={true}
-                  components={footerComponents}
-                  endReached={loadMore}
-                  ref={virtuosoRef}
-                  restoreStateFrom={lastVirtuosoState}
-                  initialScrollTop={lastVirtuosoState?.scrollTop}
-                />
-              ) : (
-                <>
-                  {rows.map((row, index) => (
-                    <CatalogRow
-                      key={
-                        row
-                          .map((p) => p?.cid ?? (p?.timestamp != null ? `t${p.timestamp}` : ''))
-                          .filter(Boolean)
-                          .join('-') || 'row-no-ids'
-                      }
-                      index={index}
-                      row={row}
-                    />
-                  ))}
-                  <CatalogFooter
-                    subplebbitAddresses={subplebbitAddresses}
-                    hasMore={hasMore}
-                    combinedFeedLength={cappedFeed.length}
-                    subplebbitAddressesWithNewerPosts={subplebbitAddressesWithNewerPosts}
-                    onNewerPostsClick={handleNewerPostsButtonClick}
-                    isInAllView={isInAllView}
-                    isInSubscriptionsView={isInSubscriptionsView}
-                    isInModView={isInModView}
-                    showLoadingEllipsis={true}
-                  />
-                  <PageFooterDesktop firstRow={<CatalogFooterFirstRow />} />
-                </>
-              )
-            ) : (
-              <>
-                {rows.map((row, index) => (
-                  <CatalogRow
-                    key={
-                      row
-                        .map((p) => p?.cid ?? (p?.timestamp != null ? `t${p.timestamp}` : ''))
-                        .filter(Boolean)
-                        .join('-') || 'row-no-ids'
-                    }
-                    index={index}
-                    row={row}
-                  />
-                ))}
-                <CatalogFooter
-                  subplebbitAddresses={subplebbitAddresses}
-                  hasMore={hasMore}
-                  combinedFeedLength={cappedFeed.length}
-                  subplebbitAddressesWithNewerPosts={subplebbitAddressesWithNewerPosts}
-                  onNewerPostsClick={handleNewerPostsButtonClick}
-                  isInAllView={isInAllView}
-                  isInSubscriptionsView={isInSubscriptionsView}
-                  isInModView={isInModView}
-                  showLoadingEllipsis={false}
-                />
-                <PageFooterDesktop firstRow={<CatalogFooterFirstRow />} />
-              </>
-            )}
+            <Virtuoso
+              defaultItemHeight={imageSize === 'Large' ? 320 : 200}
+              increaseViewportBy={{ bottom: 1200, top: 1200 }}
+              totalCount={rows?.length || 0}
+              data={rows}
+              itemContent={(index, row) => <CatalogRow index={index} row={row} />}
+              useWindowScroll={true}
+              components={footerComponents}
+              endReached={effectiveInfiniteScroll && hasMore ? loadMore : undefined}
+              ref={virtuosoRef}
+              restoreStateFrom={lastVirtuosoState}
+              initialScrollTop={lastVirtuosoState?.scrollTop}
+            />
           </>
         ) : (
           <>

src/views/post/post.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { memo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Comment, Role, useComment, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import { useSubplebbitField } from '../../hooks/use-stable-subplebbit';
@@ -36,66 +36,75 @@ export interface PostProps {
   quotedByMap?: Map<string, Comment[]>;
 }
 
-export const Post = ({
-  post,
-  showAllReplies = false,
-  showReplies = true,
-  targetReplyCid,
-  isModQueue,
-  modQueueStatus,
-  modQueueError,
-  isPublishing,
-  onApprove,
-  onReject,
-}: PostProps) => {
-  // Only subscribe to roles field to avoid rerenders from updatingState changes
-  const roles = useSubplebbitField(post?.subplebbitAddress, (subplebbit) => subplebbit?.roles);
-  const isMobile = useIsMobile();
+export const Post = memo(
+  ({ post, showAllReplies = false, showReplies = true, targetReplyCid, isModQueue, modQueueStatus, modQueueError, isPublishing, onApprove, onReject }: PostProps) => {
+    // Only subscribe to roles field to avoid rerenders from updatingState changes
+    const roles = useSubplebbitField(post?.subplebbitAddress, (subplebbit) => subplebbit?.roles);
+    const isMobile = useIsMobile();
 
-  let comment = post;
+    let comment = post;
 
-  // handle pending mod or author edit
-  const { editedComment } = useEditedComment({ comment });
-  if (editedComment) {
-    comment = editedComment;
-  }
+    // handle pending mod or author edit
+    const { editedComment } = useEditedComment({ comment });
+    if (editedComment) {
+      comment = editedComment;
+    }
 
-  return (
-    <div className={styles.thread}>
-      <div className={styles.postContainer}>
-        {isMobile ? (
-          <PostMobile
-            post={comment}
-            roles={roles}
-            showAllReplies={showAllReplies}
-            showReplies={showReplies}
-            targetReplyCid={targetReplyCid}
-            isModQueue={isModQueue}
-            modQueueStatus={modQueueStatus}
-            modQueueError={modQueueError}
-            isPublishing={isPublishing}
-            onApprove={onApprove}
-            onReject={onReject}
-          />
-        ) : (
-          <PostDesktop
-            post={comment}
-            roles={roles}
-            showAllReplies={showAllReplies}
-            showReplies={showReplies}
-            targetReplyCid={targetReplyCid}
-            isModQueue={isModQueue}
-            modQueueStatus={modQueueStatus}
-            modQueueError={modQueueError}
-            isPublishing={isPublishing}
-            onApprove={onApprove}
-            onReject={onReject}
-          />
-        )}
+    return (
+      <div className={styles.thread}>
+        <div className={styles.postContainer}>
+          {isMobile ? (
+            <PostMobile
+              post={comment}
+              roles={roles}
+              showAllReplies={showAllReplies}
+              showReplies={showReplies}
+              targetReplyCid={targetReplyCid}
+              isModQueue={isModQueue}
+              modQueueStatus={modQueueStatus}
+              modQueueError={modQueueError}
+              isPublishing={isPublishing}
+              onApprove={onApprove}
+              onReject={onReject}
+            />
+          ) : (
+            <PostDesktop
+              post={comment}
+              roles={roles}
+              showAllReplies={showAllReplies}
+              showReplies={showReplies}
+              targetReplyCid={targetReplyCid}
+              isModQueue={isModQueue}
+              modQueueStatus={modQueueStatus}
+              modQueueError={modQueueError}
+              isPublishing={isPublishing}
+              onApprove={onApprove}
+              onReject={onReject}
+            />
+          )}
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  },
+  (prevProps, nextProps) => {
+    const prev = prevProps.post;
+    const next = nextProps.post;
+    return (
+      prev?.cid === next?.cid &&
+      prev?.replyCount === next?.replyCount &&
+      prev?.updatedAt === next?.updatedAt &&
+      prev?.locked === next?.locked &&
+      prev?.pinned === next?.pinned &&
+      prev?.removed === next?.removed &&
+      prev?.deleted === next?.deleted &&
+      prevProps.showAllReplies === nextProps.showAllReplies &&
+      prevProps.showReplies === nextProps.showReplies &&
+      prevProps.targetReplyCid === nextProps.targetReplyCid &&
+      prevProps.isModQueue === nextProps.isModQueue &&
+      prevProps.modQueueStatus === nextProps.modQueueStatus
+    );
+  },
+);
 
 const PostPage = () => {
   const { t } = useTranslation();