fix(feed): posts could change position causing displacement

src/components/catalog-row/catalog-row.tsx

@@ -1,10 +1,10 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { Link, useLocation, useParams } from 'react-router-dom';
 import { Comment, useComment } from '@plebbit/plebbit-react-hooks';
 import { useFloating, offset, size, autoUpdate, Placement } from '@floating-ui/react';
-import { fetchWebpageThumbnailIfNeeded, getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
+import { getHasThumbnail } from '../../lib/utils/media-utils';
 import { getFormattedTimeAgo } from '../../lib/utils/time-utils';
 import { isAllView, isSubscriptionsView } from '../../lib/utils/view-utils';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
@@ -18,6 +18,7 @@ import PostMenuDesktop from '../post-desktop/post-menu-desktop';
 import styles from './catalog-row.module.css';
 import _ from 'lodash';
 import { ContentPreview } from '../../views/home/popular-threads-box';
+import { useCommentMediaInfo } from '../../hooks/use-comment-media-info';
 
 interface CatalogPostMediaProps {
   commentMediaInfo: any;
@@ -116,22 +117,9 @@ const CatalogPost = ({ post }: { post: Comment }) => {
   } = post || {};
   const linkCount = useCountLinksInReplies(post);
 
-  // some sites have CORS access, so the thumbnail can be fetched client-side, which is helpful if subplebbit.settings.fetchThumbnailUrls is false
-  const initialCommentMediaInfo = useMemo(() => getCommentMediaInfo(post), [post]);
-  const [commentMediaInfo, setCommentMediaInfo] = useState(initialCommentMediaInfo);
+  const commentMediaInfo = useCommentMediaInfo(post);
   const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
 
-  const fetchThumbnail = useCallback(async () => {
-    if (initialCommentMediaInfo?.type === 'webpage' && !initialCommentMediaInfo.thumbnail) {
-      const newMediaInfo = await fetchWebpageThumbnailIfNeeded(initialCommentMediaInfo);
-      setCommentMediaInfo(newMediaInfo);
-    }
-  }, [initialCommentMediaInfo]);
-
-  useEffect(() => {
-    fetchThumbnail();
-  }, [fetchThumbnail]);
-
   const { hidden } = useHide({ cid });
 
   const location = useLocation();

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

@@ -136,7 +136,7 @@ const CommentMedia = ({ commentMediaInfo, isFloatingEmbed, post, showThumbnail,
   const isReply = parentCid;
   const { t } = useTranslation();
   const isMobile = useIsMobile();
-  const { url } = commentMediaInfo || {};
+  const { url, thumbnailWidth, thumbnailHeight } = commentMediaInfo || {};
   let type = commentMediaInfo?.type;
   const gifFrameUrl = useFetchGifFirstFrame(url);
 
@@ -150,10 +150,17 @@ const CommentMedia = ({ commentMediaInfo, isFloatingEmbed, post, showThumbnail,
   const maxThumbnailSize = isMobile || isReply ? 125 : 250;
 
   if (linkWidth && linkHeight) {
+    // use the dimensions from the plebbit-js api
     let scale = Math.min(1, maxThumbnailSize / Math.max(linkWidth, linkHeight));
     displayWidth = `${linkWidth * scale}px`;
     displayHeight = `${linkHeight * scale}px`;
+  } else if (thumbnailHeight && thumbnailWidth) {
+    // use the dimensions from the thumbnail fetched by useCommentMediaInfo
+    let scale = Math.min(1, maxThumbnailSize / Math.max(thumbnailWidth, thumbnailHeight));
+    displayWidth = `${thumbnailWidth * scale}px`;
+    displayHeight = `${thumbnailHeight * scale}px`;
   } else {
+    // use the default size
     displayWidth = `${maxThumbnailSize}px`;
     displayHeight = `${maxThumbnailSize}px`;
   }

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

@@ -1,23 +1,17 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Link, useLocation, useParams } from 'react-router-dom';
 import { Comment, useAuthorAvatar, useComment, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import styles from '../../views/post/post.module.css';
-import {
-  CommentMediaInfo,
-  fetchWebpageThumbnailIfNeeded,
-  getCommentMediaInfo,
-  getDisplayMediaInfoType,
-  getHasThumbnail,
-  getMediaDimensions,
-} from '../../lib/utils/media-utils';
+import { getDisplayMediaInfoType, getHasThumbnail, getMediaDimensions } from '../../lib/utils/media-utils';
 import { hashStringToColor, getTextColorForBackground } from '../../lib/utils/post-utils';
 import { getFormattedDate, getFormattedTimeAgo } from '../../lib/utils/time-utils';
 import { isValidURL } from '../../lib/utils/url-utils';
 import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
 import useAvatarVisibilityStore from '../../stores/use-avatar-visibility-store';
 import useAuthorAddressClick from '../../hooks/use-author-address-click';
+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';
@@ -228,23 +222,8 @@ const PostMedia = ({ post }: PostProps) => {
 };
 
 const PostMediaContent = ({ post, link, spoiler, t }: { post: any; link: string; spoiler: boolean; t: any }) => {
-  const initialInfo = getCommentMediaInfo(post);
-  const [webpageThumbnail, setWebpageThumbnail] = useState<CommentMediaInfo | undefined>();
   const { isDescription, isRules } = post || {}; // custom properties, not from api
-
-  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 commentMediaInfo = useCommentMediaInfo(post);
   const { url } = commentMediaInfo || {};
   let type = commentMediaInfo?.type;
   const gifFrameUrl = useFetchGifFirstFrame(url);

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

@@ -1,15 +1,16 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Link, useLocation, useParams } from 'react-router-dom';
 import { Comment, useAuthorAvatar, useComment, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import styles from '../../views/post/post.module.css';
-import { CommentMediaInfo, fetchWebpageThumbnailIfNeeded, getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
+import { getHasThumbnail } from '../../lib/utils/media-utils';
 import { getTextColorForBackground, hashStringToColor } from '../../lib/utils/post-utils';
 import { getFormattedDate, getFormattedTimeAgo } from '../../lib/utils/time-utils';
 import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
 import useAvatarVisibilityStore from '../../stores/use-avatar-visibility-store';
 import useAuthorAddressClick from '../../hooks/use-author-address-click';
+import { useCommentMediaInfo } from '../../hooks/use-comment-media-info';
 import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
 import useHide from '../../hooks/use-hide';
 import useReplies from '../../hooks/use-replies';
@@ -26,6 +27,7 @@ import _ from 'lodash';
 const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: PostProps) => {
   const { t } = useTranslation();
   const { author, cid, deleted, link, locked, parentCid, pinned, postCid, reason, removed, shortCid, state, subplebbitAddress, timestamp } = post || {};
+  const isReply = parentCid;
   const title = post?.title?.trim();
   const { isDescription, isRules } = post || {}; // custom properties, not from api
   const { address, shortAddress } = author || {};
@@ -40,27 +42,9 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
   const isInPostPageView = isPostPageView(location.pathname, params);
   const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
 
-  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 () => {
-      if (initialInfo?.type === 'webpage' && !initialInfo.thumbnail) {
-        const newMediaInfo = await fetchWebpageThumbnailIfNeeded(initialInfo);
-        setWebpageThumbnail(newMediaInfo);
-      }
-    };
-    loadThumbnail();
-    return () => {
-      setWebpageThumbnail(undefined);
-    };
-  }, [initialInfo]);
-  const commentMediaInfo = webpageThumbnail || initialInfo;
-
+  const commentMediaInfo = useCommentMediaInfo(post);
   const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
 
-  const isReply = parentCid;
-
   const stateString = useStateString(post);
 
   const handleUserAddressClick = useAuthorAddressClick();
@@ -192,22 +176,9 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
 };
 
 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);
   const { isDescription, isRules } = post || {}; // custom properties, not from api
-  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 commentMediaInfo = useCommentMediaInfo(post);
   const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
 
   return (

src/hooks/use-comment-media-info.ts

@@ -0,0 +1,44 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useLocation, useParams } from 'react-router-dom';
+import { Comment } from '@plebbit/plebbit-react-hooks';
+import { getCommentMediaInfo, fetchWebpageThumbnailIfNeeded } from '../lib/utils/media-utils';
+import { isPendingPostView, isPostPageView } from '../lib/utils/view-utils';
+
+export const useCommentMediaInfo = (comment: Comment) => {
+  const location = useLocation();
+  const params = useParams();
+  const isInPostPageView = isPostPageView(location.pathname, params);
+  const isInPendingPostView = isPendingPostView(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 initialCommentMediaInfo = useMemo(() => getCommentMediaInfo(comment), [comment]);
+  const [commentMediaInfo, setCommentMediaInfo] = useState(initialCommentMediaInfo);
+
+  const fetchThumbnail = useCallback(async () => {
+    if (!isInPostPageView && !isInPendingPostView) {
+      return; // don't fetch in feed view, it displaces the posts
+    }
+    if (initialCommentMediaInfo?.type === 'webpage' && !initialCommentMediaInfo.thumbnail) {
+      const newMediaInfo = await fetchWebpageThumbnailIfNeeded(initialCommentMediaInfo);
+
+      // Fetch the dimensions of the thumbnail
+      if (newMediaInfo.thumbnail) {
+        const img = new Image();
+        img.onload = () => {
+          setCommentMediaInfo({
+            ...newMediaInfo,
+            thumbnailWidth: img.width,
+            thumbnailHeight: img.height,
+          });
+        };
+        img.src = newMediaInfo.thumbnail;
+      } else {
+        setCommentMediaInfo(newMediaInfo);
+      }
+    }
+  }, [initialCommentMediaInfo, isInPostPageView, isInPendingPostView]);
+  useEffect(() => {
+    fetchThumbnail();
+  }, [fetchThumbnail]);
+
+  return commentMediaInfo;
+};

src/lib/utils/media-utils.ts

@@ -10,6 +10,8 @@ export interface CommentMediaInfo {
   url: string;
   type: string;
   thumbnail?: string;
+  thumbnailWidth?: number;
+  thumbnailHeight?: number;
   patternThumbnailUrl?: string;
   post?: Comment;
 }