Ensure that we resolve attachments before displaying them

ts/components/StoryImage.tsx

@@ -40,7 +40,9 @@ export const StoryImage = ({
   storyId,
 }: PropsType): JSX.Element | null => {
   const shouldDownloadAttachment =
-    !isDownloaded(attachment) && !isDownloading(attachment);
+    !isDownloaded(attachment) &&
+    !isDownloading(attachment) &&
+    !hasNotResolved(attachment);
 
   useEffect(() => {
     if (shouldDownloadAttachment) {
@@ -61,7 +63,11 @@ export const StoryImage = ({
   let storyElement: JSX.Element;
   if (attachment.textAttachment) {
     storyElement = (
-      <TextAttachment i18n={i18n} textAttachment={attachment.textAttachment} />
+      <TextAttachment
+        i18n={i18n}
+        isThumbnail={isThumbnail}
+        textAttachment={attachment.textAttachment}
+      />
     );
   } else if (isNotReadyToShow) {
     storyElement = (
@@ -98,10 +104,10 @@ export const StoryImage = ({
     );
   }
 
-  let spinner: JSX.Element | undefined;
+  let overlay: JSX.Element | undefined;
   if (isPending) {
-    spinner = (
-      <div className="StoryImage__spinner-container">
+    overlay = (
+      <div className="StoryImage__overlay-container">
         <div className="StoryImage__spinner-bubble" title={i18n('loading')}>
           <Spinner moduleClassName="StoryImage__spinner" svgSize="small" />
         </div>
@@ -117,7 +123,7 @@ export const StoryImage = ({
       )}
     >
       {storyElement}
-      {spinner}
+      {overlay}
     </div>
   );
 };

ts/components/StoryViewer.tsx

@@ -198,6 +198,11 @@ export const StoryViewer = ({
   // We need to be careful about this effect refreshing, it should only run
   // every time a story changes or its duration changes.
   useEffect(() => {
+    if (!storyDuration) {
+      spring.stop();
+      return;
+    }
+
     spring.start({
       config: {
         duration: storyDuration,

ts/components/TextAttachment.stories.tsx

@@ -164,7 +164,20 @@ story.add('Link preview', () => (
       preview: {
         url: 'https://www.signal.org/workworkwork',
         title: 'Signal >> Careers',
-        // TODO add image
+      },
+    }}
+  />
+));
+
+story.add('Link preview (thumbnail)', () => (
+  <TextAttachment
+    {...getDefaultProps()}
+    isThumbnail
+    textAttachment={{
+      color: 4294951251,
+      preview: {
+        url: 'https://www.signal.org/workworkwork',
+        title: 'Signal >> Careers',
       },
     }}
   />

ts/components/TextAttachment.tsx

@@ -40,6 +40,7 @@ enum TextSize {
 
 export type PropsType = {
   i18n: LocalizerType;
+  isThumbnail?: boolean;
   textAttachment: TextAttachmentType;
 };
 
@@ -85,6 +86,7 @@ function getFont(
 
 export const TextAttachment = ({
   i18n,
+  isThumbnail,
   textAttachment,
 }: PropsType): JSX.Element | null => {
   const linkPreview = useRef<HTMLDivElement | null>(null);
@@ -149,25 +151,27 @@ export const TextAttachment = ({
             )}
             {textAttachment.preview && (
               <>
-                {linkPreviewOffsetTop && textAttachment.preview.url && (
-                  <a
-                    className="TextAttachment__preview__tooltip"
-                    href={textAttachment.preview.url}
-                    rel="noreferrer"
-                    style={{
-                      top: linkPreviewOffsetTop - 150,
-                    }}
-                    target="_blank"
-                  >
-                    <div>
-                      <div>{i18n('TextAttachment__preview__link')}</div>
-                      <div className="TextAttachment__preview__tooltip__url">
-                        {textAttachment.preview.url}
+                {linkPreviewOffsetTop &&
+                  !isThumbnail &&
+                  textAttachment.preview.url && (
+                    <a
+                      className="TextAttachment__preview__tooltip"
+                      href={textAttachment.preview.url}
+                      rel="noreferrer"
+                      style={{
+                        top: linkPreviewOffsetTop - 150,
+                      }}
+                      target="_blank"
+                    >
+                      <div>
+                        <div>{i18n('TextAttachment__preview__link')}</div>
+                        <div className="TextAttachment__preview__tooltip__url">
+                          {textAttachment.preview.url}
+                        </div>
                       </div>
-                    </div>
-                    <div className="TextAttachment__preview__tooltip__arrow" />
-                  </a>
-                )}
+                      <div className="TextAttachment__preview__tooltip__arrow" />
+                    </a>
+                  )}
                 <div
                   className={classNames('TextAttachment__preview', {
                     'TextAttachment__preview--large': Boolean(