fix thumbnail performance

plebbit · Nov 21, 2024 · ab85514 · ab85514
1 parent fd8b3ea
commit ab85514
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 24 deletions.
diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx
@@ -214,25 +214,28 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:
 
 const PostMedia = ({ post }: PostProps) => {
   const { t } = useTranslation();
-  const { link, spoiler } = post || {};
+  const { link, spoiler, cid } = post || {};
+
+  // Reset state by remounting component when post changes
+  return <PostMediaContent key={cid} post={post} link={link} spoiler={spoiler} t={t} />;
+};
+
+const PostMediaContent = ({ post, link, spoiler, t }: { post: any; link: string; spoiler: boolean; t: any }) => {
+  const initialInfo = getCommentMediaInfo(post);
+  const [webpageThumbnail, setWebpageThumbnail] = useState<CommentMediaInfo | undefined>();
 
-  // some sites have CORS access, so the thumbnail can be fetched client-side, which is helpful if subplebbit.settings.fetchThumbnailUrls is false
-  const [commentMediaInfo, setCommentMediaInfo] = useState<CommentMediaInfo | undefined>();
   useEffect(() => {
+    // some sites have CORS access, so the thumbnail can be fetched client-side, which is helpful if subplebbit.settings.fetchThumbnailUrls is false
     const loadThumbnail = async () => {
-      const initialInfo = getCommentMediaInfo(post);
       if (initialInfo?.type === 'webpage' && !initialInfo.thumbnail) {
         const newMediaInfo = await fetchWebpageThumbnailIfNeeded(initialInfo);
-        setCommentMediaInfo(newMediaInfo);
-      } else {
-        setCommentMediaInfo(initialInfo);
+        setWebpageThumbnail(newMediaInfo);
       }
     };
     loadThumbnail();
-    return () => {
-      setCommentMediaInfo(undefined);
-    };
-  }, [post]);
+  }, [initialInfo]);
+
+  const commentMediaInfo = webpageThumbnail || initialInfo;
 
   const { url } = commentMediaInfo || {};
   let type = commentMediaInfo?.type;

diff --git a/src/components/post-mobile/post-mobile.tsx b/src/components/post-mobile/post-mobile.tsx
@@ -40,26 +40,24 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
   const isInPostPageView = isPostPageView(location.pathname, params);
   const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
 
-  // some sites have CORS access, so the thumbnail can be fetched client-side, which is helpful if subplebbit.settings.fetchThumbnailUrls is false
-  const [commentMediaInfo, setCommentMediaInfo] = useState<CommentMediaInfo | undefined>();
+  const initialInfo = getCommentMediaInfo(post);
+  const [webpageThumbnail, setWebpageThumbnail] = useState<CommentMediaInfo | undefined>();
   useEffect(() => {
+    // some sites have CORS access, so the thumbnail can be fetched client-side, which is helpful if subplebbit.settings.fetchThumbnailUrls is false
     const loadThumbnail = async () => {
-      const initialInfo = getCommentMediaInfo(post);
       if (initialInfo?.type === 'webpage' && !initialInfo.thumbnail) {
         const newMediaInfo = await fetchWebpageThumbnailIfNeeded(initialInfo);
-        setCommentMediaInfo(newMediaInfo);
-      } else {
-        setCommentMediaInfo(initialInfo);
+        setWebpageThumbnail(newMediaInfo);
       }
     };
     loadThumbnail();
     return () => {
-      setCommentMediaInfo(undefined);
+      setWebpageThumbnail(undefined);
     };
-  }, [post]);
+  }, [initialInfo]);
+  const commentMediaInfo = webpageThumbnail || initialInfo;
 
   const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
-  const [showThumbnail, setShowThumbnail] = useState(true);
 
   const isReply = parentCid;
 
@@ -184,13 +182,33 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
           </span>
         </span>
       </div>
-      {(hasThumbnail || link) && !(deleted || removed) && (
-        <CommentMedia commentMediaInfo={commentMediaInfo} post={post} showThumbnail={showThumbnail} setShowThumbnail={setShowThumbnail} />
-      )}
+      {(hasThumbnail || link) && !(deleted || removed) && <PostMediaContent key={cid} post={post} link={link} t={t} />}
     </>
   );
 };
 
+const PostMediaContent = ({ post, link, t }: { post: any; link: string; t: any }) => {
+  const initialInfo = getCommentMediaInfo(post);
+  const [webpageThumbnail, setWebpageThumbnail] = useState<CommentMediaInfo | undefined>();
+  const [showThumbnail, setShowThumbnail] = useState(true);
+
+  useEffect(() => {
+    // some sites have CORS access, so the thumbnail can be fetched client-side, which is helpful if subplebbit.settings.fetchThumbnailUrls is false
+    const loadThumbnail = async () => {
+      if (initialInfo?.type === 'webpage' && !initialInfo.thumbnail) {
+        const newMediaInfo = await fetchWebpageThumbnailIfNeeded(initialInfo);
+        setWebpageThumbnail(newMediaInfo);
+      }
+    };
+    loadThumbnail();
+  }, [initialInfo]);
+
+  const commentMediaInfo = webpageThumbnail || initialInfo;
+  const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
+
+  return hasThumbnail && <CommentMedia commentMediaInfo={commentMediaInfo} post={post} showThumbnail={showThumbnail} setShowThumbnail={setShowThumbnail} />;
+};
+
 const ReplyBacklinks = ({ post }: PostProps) => {
   const { cid, parentCid } = post || {};
   const replies = useReplies(post);

diff --git a/src/views/post/post.tsx b/src/views/post/post.tsx
@@ -105,7 +105,7 @@ const PostPage = () => {
       )}
       {/* TODO: remove this replyCount error once api supports scrolling replies pages */}
       {replyCount > 60 && <span className={styles.error}>Error: this thread has too many replies, some of them cannot be displayed right now.</span>}
-      {error && <span className={styles.error}>Error: {error?.message || error}</span>}
+      {error && <span className={styles.error}>Error: {error?.message || error?.toString?.()}</span>}
       {isInDescriptionView ? (
         <SubplebbitDescription
           avatarUrl={suggested?.avatarUrl}