feat: load quote images correctly on first render

ts/components/conversation/message/message-content/quote/QuoteIconContainer.tsx

@@ -64,7 +64,7 @@ type QuoteIconProps = {
   icon: QuoteIconTypes;
 };
 
-const QuoteIcon = (props: QuoteIconProps) => {
+export const QuoteIcon = (props: QuoteIconProps) => {
   const { icon } = props;
   const iconProps = icons[icon];
 
@@ -104,30 +104,29 @@ export const QuoteIconContainer = (
   }
 
   const objectUrl = getObjectUrl(thumbnail);
-
-  if (GoogleChrome.isVideoTypeSupported(contentType)) {
-    return objectUrl && !imageBroken ? (
-      <QuoteImage
-        url={objectUrl}
-        contentType={MIME.IMAGE_JPEG}
-        handleImageErrorBound={noop}
-        showPlayButton={true}
-      />
-    ) : (
-      <QuoteIcon icon="movie" />
-    );
-  }
-
-  if (GoogleChrome.isImageTypeSupported(contentType)) {
-    return objectUrl && !imageBroken ? (
-      <QuoteImage
-        url={objectUrl}
-        contentType={contentType}
-        handleImageErrorBound={handleImageErrorBound}
-      />
-    ) : (
-      <QuoteIcon icon="image" />
-    );
+  if (objectUrl) {
+    if (GoogleChrome.isVideoTypeSupported(contentType)) {
+      return (
+        <QuoteImage
+          url={objectUrl}
+          contentType={MIME.IMAGE_JPEG}
+          showPlayButton={true}
+          imageBroken={imageBroken}
+          handleImageErrorBound={noop}
+        />
+      );
+    }
+
+    if (GoogleChrome.isImageTypeSupported(contentType)) {
+      return (
+        <QuoteImage
+          url={objectUrl}
+          contentType={contentType}
+          imageBroken={imageBroken}
+          handleImageErrorBound={handleImageErrorBound}
+        />
+      );
+    }
   }
 
   if (MIME.isAudio(contentType)) {

ts/components/conversation/message/message-content/quote/QuoteImage.tsx

@@ -3,6 +3,8 @@ import { useDisableDrag } from '../../../../../hooks/useDisableDrag';
 import { useEncryptedFileFetch } from '../../../../../hooks/useEncryptedFileFetch';
 import styled from 'styled-components';
 import { icons } from '../../../../icon';
+import { isEmpty } from 'lodash';
+import { QuoteIcon } from './QuoteIconContainer';
 
 const StyledQuoteImage = styled.div`
   flex: initial;
@@ -56,18 +58,20 @@ const StyledPlayButton = styled.div`
 `;
 
 export const QuoteImage = (props: {
-  handleImageErrorBound: () => void;
   url: string;
   contentType: string;
   showPlayButton?: boolean;
+  imageBroken: boolean;
+  handleImageErrorBound: () => void;
 }) => {
-  const { url, showPlayButton, contentType, handleImageErrorBound } = props;
+  const { url, contentType, showPlayButton, imageBroken, handleImageErrorBound } = props;
+
   const disableDrag = useDisableDrag();
 
   const { loading, urlToLoad } = useEncryptedFileFetch(url, contentType, false);
   const srcData = !loading ? urlToLoad : '';
 
-  return (
+  return !isEmpty(srcData) && !imageBroken ? (
     <StyledQuoteImage>
       <img
         src={srcData}
@@ -85,5 +89,7 @@ export const QuoteImage = (props: {
         </StyledPlayButton>
       )}
     </StyledQuoteImage>
+  ) : (
+    <QuoteIcon icon={showPlayButton ? 'movie' : 'image'} />
   );
 };

ts/state/ducks/conversations.ts

@@ -404,7 +404,7 @@ async function getMessages({
     }
   }
 
-  window.log.debug(`WIP: duck quoteProps`, quotesProps);
+  // window.log.debug(`WIP: duck quoteProps`, quotesProps);
 
   return { messagesProps, quotesProps };
 }