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/components/catalog-row/catalog-row.tsx

@@ -2,7 +2,7 @@ import { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { Link, useLocation, useParams } from 'react-router-dom';
-import { useFloating, offset, size, autoUpdate, Placement } from '@floating-ui/react';
+import { useFloating, offset, size, Placement } from '@floating-ui/react';
 import { Comment, useReplies } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js';
 import { shouldShowSnow } from '../../lib/snow';
@@ -18,7 +18,6 @@ import { useCommentMediaInfo } from '../../hooks/use-comment-media-info';
 import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
 import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
 import useHide from '../../hooks/use-hide';
-import useWindowWidth from '../../hooks/use-window-width';
 import { ContentPreview } from '../../views/home/popular-threads-box';
 import PostMenuDesktop from '../post-desktop/post-menu-desktop';
 import styles from './catalog-row.module.css';
@@ -41,7 +40,7 @@ export const CatalogPostMedia = ({ cid, commentMediaInfo, linkWidth, linkHeight
   const [hasError, setHasError] = useState(false);
   const handleLoad = () => setIsLoaded(true);
   const handleError = () => setHasError(true);
-  const loadingStyle = { display: isLoaded ? 'block' : 'none' };
+  const loadingStyle = { opacity: isLoaded ? 1 : 0 };
 
   const { imageSize } = useCatalogStyleStore();
 
@@ -62,6 +61,9 @@ export const CatalogPostMedia = ({ cid, commentMediaInfo, linkWidth, linkHeight
     displayHeight = 'unset';
   }
 
+  const numericWidth = parseInt(displayWidth) || undefined;
+  const numericHeight = parseInt(displayHeight) || undefined;
+
   const maxWidth = imageSize === 'Large' ? '250px' : '150px';
   const maxHeight = imageSize === 'Large' ? '250px' : '150px';
 
@@ -75,20 +77,20 @@ export const CatalogPostMedia = ({ cid, commentMediaInfo, linkWidth, linkHeight
   let thumbnailComponent: React.ReactNode = null;
 
   if (type === 'gif' && gifFrameUrl && !hasError) {
-    thumbnailComponent = <img src={gifFrameUrl} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} />;
+    thumbnailComponent = <img src={gifFrameUrl} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} width={numericWidth} height={numericHeight} />;
   } else if (type === 'image' && !hasError) {
-    thumbnailComponent = <img src={url} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} />;
+    thumbnailComponent = <img src={url} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} width={numericWidth} height={numericHeight} />;
   } else if (type === 'video' && !hasError) {
     thumbnailComponent = thumbnail ? (
-      <img src={thumbnail} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} />
+      <img src={thumbnail} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} width={numericWidth} height={numericHeight} />
     ) : (
       // show first frame of the video, as a workaround for Safari not loading thumbnails
       <video src={`${url}#t=0.001`} onError={handleError} />
     );
   } else if (type === 'webpage' && !hasError) {
-    thumbnailComponent = <img src={thumbnail} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} />;
+    thumbnailComponent = <img src={thumbnail} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} width={numericWidth} height={numericHeight} />;
   } else if (type === 'iframe' && iframeThumbnail && !hasError) {
-    thumbnailComponent = <img src={iframeThumbnail} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} />;
+    thumbnailComponent = <img src={iframeThumbnail} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} width={numericWidth} height={numericHeight} />;
   } else if (type === 'audio') {
     thumbnailComponent = <audio src={url} controls />;
   }
@@ -143,8 +145,6 @@ const CatalogPost = memo(
     const placementRef = useRef<Placement>('right-start');
     const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
-    const windowWidth = useWindowWidth();
-
     const { refs, floatingStyles, update } = useFloating({
       open: showPortal,
       placement: placementRef.current,
@@ -154,9 +154,9 @@ const CatalogPost = memo(
           apply({ elements }) {
             const referenceElement = refs.reference.current;
             if (referenceElement) {
-              const availableWidthToTheRight = windowWidth - (referenceElement.getBoundingClientRect().left + referenceElement.getBoundingClientRect().width);
+              const availableWidthToTheRight = window.innerWidth - (referenceElement.getBoundingClientRect().left + referenceElement.getBoundingClientRect().width);
               const availableWidthToTheLeft = referenceElement.getBoundingClientRect().left;
-              const minWidth = windowWidth * 0.25;
+              const minWidth = window.innerWidth * 0.25;
 
               if (availableWidthToTheRight >= minWidth) {
                 placementRef.current = 'right-start';
@@ -175,14 +175,13 @@ const CatalogPost = memo(
           },
         }),
       ],
-      whileElementsMounted: autoUpdate,
     });
 
     useEffect(() => {
-      update();
-    }, [update, windowWidth]);
+      if (showPortal) update();
+    }, [showPortal, update]);
 
-    const { replies } = useReplies({ comment: post, flat: true });
+    const { replies } = useReplies({ comment: showPortal ? post : undefined, flat: true });
     const lastReply = replies?.length > 0 ? replies[replies.length - 1] : null;
 
     const { isCommentAuthorMod: isCatalogPostAuthorMod, commentAuthorRole: catalogPostAuthorRole } = useEditCommentPrivileges({
@@ -336,14 +335,14 @@ interface CatalogRowProps {
   row: Comment[];
 }
 
-const CatalogRow = ({ row }: CatalogRowProps) => {
+const CatalogRow = memo(({ row }: CatalogRowProps) => {
   return (
     <div className={styles.row}>
       {row.map((post, index) => (
-        <CatalogPost key={index} post={post} />
+        <CatalogPost key={post?.cid || index} post={post} />
       ))}
     </div>
   );
-};
+});
 
 export default CatalogRow;

src/components/comment-media/comment-media.tsx

@@ -29,6 +29,8 @@ interface MediaProps {
 const Thumbnail = ({ commentMediaInfo, deleted, displayHeight, displayWidth, isFloatingEmbed, isOutOfFeed, isReply, removed, spoiler, setShowThumbnail }: MediaProps) => {
   const isMobile = useIsMobile();
   const { patternThumbnailUrl, thumbnail, type, url } = commentMediaInfo || {};
+  const numericWidth = parseInt(displayWidth || '') || undefined;
+  const numericHeight = parseInt(displayHeight || '') || undefined;
 
   let thumbnailComponent: React.ReactNode = null;
   const iframeThumbnail = patternThumbnailUrl || thumbnail;
@@ -36,18 +38,20 @@ const Thumbnail = ({ commentMediaInfo, deleted, displayHeight, displayWidth, isF
   const hasThumbnail = getHasThumbnail(commentMediaInfo, url);
 
   if (type === 'gif') {
-    thumbnailComponent = <img src={gifFrameUrl || url} alt='' onClick={() => setShowThumbnail(false)} />;
+    thumbnailComponent = <img src={gifFrameUrl || url} alt='' onClick={() => setShowThumbnail(false)} width={numericWidth} height={numericHeight} />;
   } else if (type === 'video') {
     thumbnailComponent = thumbnail ? (
-      <img src={thumbnail} alt='' />
+      <img src={thumbnail} alt='' width={numericWidth} height={numericHeight} />
     ) : (
       // show first frame of the video, as a workaround for Safari not loading thumbnails
       <video src={`${url}#t=0.001`} onClick={() => setShowThumbnail(false)} />
     );
   } else if (type === 'webpage') {
-    thumbnailComponent = <img src={thumbnail} alt='' onClick={() => setShowThumbnail(false)} />;
+    thumbnailComponent = <img src={thumbnail} alt='' onClick={() => setShowThumbnail(false)} width={numericWidth} height={numericHeight} />;
   } else if (type === 'iframe') {
-    thumbnailComponent = iframeThumbnail ? <img src={iframeThumbnail} alt='' onClick={() => setShowThumbnail(false)} /> : null;
+    thumbnailComponent = iframeThumbnail ? (
+      <img src={iframeThumbnail} alt='' onClick={() => setShowThumbnail(false)} width={numericWidth} height={numericHeight} />
+    ) : null;
   } else if (type === 'audio') {
     thumbnailComponent = <audio src={url} controls />;
   }
@@ -140,6 +144,8 @@ const Image = ({ commentMediaInfo, disableToggle = false, displayHeight, display
   const { t } = useTranslation();
   const { type, url } = commentMediaInfo || {};
   const isReply = parentCid;
+  const numericWidth = parseInt(displayWidth || '') || undefined;
+  const numericHeight = parseInt(displayHeight || '') || undefined;
   const isMobile = useIsMobile();
   const [isImageExpanded, setIsImageExpanded] = useState(initialExpanded);
   const { fitExpandedImagesToScreen } = useExpandedMediaStore();
@@ -174,7 +180,14 @@ const Image = ({ commentMediaInfo, disableToggle = false, displayHeight, display
         {hasError ? (
           <img src='assets/filedeleted-res.gif' alt='File deleted' />
         ) : (
-          <img src={url} onError={handleError} alt='' onClick={disableToggle ? undefined : () => setIsImageExpanded(!isImageExpanded)} />
+          <img
+            src={url}
+            onError={handleError}
+            alt=''
+            onClick={disableToggle ? undefined : () => setIsImageExpanded(!isImageExpanded)}
+            width={numericWidth}
+            height={numericHeight}
+          />
         )}
       </span>
       {isImageExpanded && type && (
@@ -196,7 +209,14 @@ const Image = ({ commentMediaInfo, disableToggle = false, displayHeight, display
       {hasError ? (
         <img src='assets/filedeleted-res.gif' alt='File deleted' />
       ) : (
-        <img src={url} onError={handleError} alt='' onClick={disableToggle ? undefined : () => setIsImageExpanded(!isImageExpanded)} />
+        <img
+          src={url}
+          onError={handleError}
+          alt=''
+          onClick={disableToggle ? undefined : () => setIsImageExpanded(!isImageExpanded)}
+          width={numericWidth}
+          height={numericHeight}
+        />
       )}
     </span>
   );

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();

vite.config.js

@@ -182,6 +182,15 @@ export default defineConfig({
           if (/[\\/]node_modules[\\/](react|react-dom|react-router-dom|react-i18next|i18next|i18next-browser-languagedetector|i18next-http-backend)[\\/]/.test(id)) {
             return 'vendor';
           }
+          if (/[\\/]node_modules[\\/](react-markdown|remark-|rehype-|unified|micromark|mdast|hast|unist)[\\/]/.test(id)) {
+            return 'markdown';
+          }
+          if (/[\\/]node_modules[\\/](react-virtuoso)[\\/]/.test(id)) {
+            return 'virtuoso';
+          }
+          if (/[\\/]node_modules[\\/](@floating-ui)[\\/]/.test(id)) {
+            return 'floating-ui';
+          }
         },
       },
     },