feat: Add a placeholder for image attachments in conversations view (#8969)

We analyze an image to get it's height and width. On the frontend, we would show a placeholder with the corresponding width and height until the images are loaded properly.

---------

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>

app/javascript/dashboard/components/widgets/conversation/Message.vue

@@ -577,7 +577,8 @@ export default {
 
         > img,
         > video {
-          @apply rounded-lg;
+          /** ensure that the bubble radius and image radius match*/
+          @apply rounded-[0.4rem];
         }
 
         > video {

app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue

@@ -2,20 +2,23 @@
   <div class="message-text__wrap" :class="attachmentTypeClasses">
     <img
       v-if="isImage && !isImageError"
-      :src="attachment.data_url"
+      class="bg-woot-200 dark:bg-woot-900"
+      :src="dataUrl"
+      :width="imageWidth"
+      :height="imageHeight"
       @click="onClick"
       @error="onImgError"
     />
     <video
       v-if="isVideo"
-      :src="attachment.data_url"
+      :src="dataUrl"
       muted
       playsInline
       @error="onImgError"
       @click="onClick"
     />
     <audio v-else-if="isAudio" controls class="skip-context-menu">
-      <source :src="`${attachment.data_url}?t=${Date.now()}`" />
+      <source :src="`${dataUrl}?t=${Date.now()}`" />
     </audio>
     <gallery-view
       v-if="show"
@@ -31,7 +34,6 @@
 <script>
 import { mapGetters } from 'vuex';
 import { hasPressedCommand } from 'shared/helpers/KeyboardHelpers';
-
 import GalleryView from '../components/GalleryView.vue';
 
 const ALLOWED_FILE_TYPES = {
@@ -81,6 +83,15 @@ export default {
       );
       return attachments;
     },
+    dataUrl() {
+      return this.attachment.data_url;
+    },
+    imageWidth() {
+      return this.attachment.width ? `${this.attachment.width}px` : 'auto';
+    },
+    imageHeight() {
+      return this.attachment.height ? `${this.attachment.height}px` : 'auto';
+    },
   },
   watch: {
     attachment() {