fix(media): reserve stable post media space before thumbnails resolve

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

@@ -109,6 +109,29 @@ const Thumbnail = ({ commentMediaInfo, deleted, displayHeight, displayWidth, isF
   const thumbnailDimensions = { '--width': displayWidth, '--height': displayHeight } as React.CSSProperties;
 
   const linkWithoutThumbnail = url && new URL(url);
+  const fallbackLinkLabel = url ? getHostname(url) || (url.length > 30 ? `${url.slice(0, 30)}...` : url) : '';
+  const noThumbnailLink =
+    !hasThumbnail && linkWithoutThumbnail ? (
+      canEmbed(linkWithoutThumbnail) ? (
+        <span
+          role='button'
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              setShowThumbnail(false);
+            }
+          }}
+          onClick={() => setShowThumbnail(false)}
+        >
+          {fallbackLinkLabel}
+        </span>
+      ) : (
+        <a href={url} target='_blank' rel='noreferrer'>
+          {fallbackLinkLabel}
+        </a>
+      )
+    ) : null;
 
   return deleted || removed ? (
     <img className={styles.fileDeleted} src='assets/filedeleted-res.gif' alt='File deleted' />
@@ -132,32 +155,12 @@ const Thumbnail = ({ commentMediaInfo, deleted, displayHeight, displayWidth, isF
   ) : isMobile || isReply ? (
     <span className={`${styles.thumbnailSmall} ${thumbnailSmallPadding}`} style={thumbnailDimensions}>
       {thumbnailComponent}
-      {isMobile &&
+      {noThumbnailLink}
-        !hasThumbnail &&
-        linkWithoutThumbnail &&
-        (canEmbed(linkWithoutThumbnail) ? (
-          <span
-            role='button'
-            tabIndex={0}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                setShowThumbnail(false);
-              }
-            }}
-            onClick={() => setShowThumbnail(false)}
-          >
-            {getHostname(url)}
-          </span>
-        ) : (
-          <a href={url} target='_blank' rel='noreferrer'>
-            {getHostname(url) || (url.length > 30 ? url.slice(0, 30) + '...' : url)}
-          </a>
-        ))}
     </span>
   ) : (
     <span className={styles.thumbnailBig} style={thumbnailDimensions}>
       {thumbnailComponent}
+      {noThumbnailLink}
     </span>
   );
 };

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

@@ -619,7 +619,7 @@ const PostMedia = ({
           </span>
         )}
       </div>
-      {(hasThumbnail || (!hasThumbnail && !showThumbnail) || spoiler) && (
+      {(hasThumbnail || (!hasThumbnail && !showThumbnail) || spoiler || Boolean(commentMediaInfo?.url)) && (
         <div className={styles.fileThumbnail}>
           <CommentMedia
             commentMediaInfo={commentMediaInfo}

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

@@ -404,10 +404,9 @@ const PostMediaContent = ({ post, link }: { post: any; link: string }) => {
   const [showThumbnail, setShowThumbnail] = useState(true);
   const { thumbnailUrl, linkWidth, linkHeight, spoiler, deleted, removed, parentCid } = post || {};
   const commentMediaInfo = useCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight);
-  const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
 
   return (
-    hasThumbnail && (
+    commentMediaInfo && (
       <CommentMedia
         commentMediaInfo={commentMediaInfo}
         deleted={deleted}