audio placeholders

src/components/messageItem.vue

@@ -16,7 +16,29 @@
         class="bubble"
         :id="`${message.modifier}Bubble`"
       >
-        {{ message.content.text }}
+        <!-- Show loader when audio is being transcribed. -->
+        <div 
+          v-if="message.content.text === ''" 
+          class="contentLoader"
+        >
+          <div class="contentLoaderDot"></div>
+          <div class="contentLoaderDot"></div>
+          <div class="contentLoaderDot"></div>
+        </div>
+
+        <!-- Show question mark if transcription comes back as unknown. -->
+        <div
+          v-else-if="message.content.text === false"
+          class="questionMark"
+        >
+        ?
+        </div>
+
+        <!-- Else, show text. -->          
+        <div v-else>
+          {{ message.content.text }}
+        </div>
+
       </div>
 
       <!-- message context -->
@@ -123,7 +145,7 @@
 
     padding: 10px;
 
-    border-radius: 10px;
+    border-radius: 18px;
 
     // Animate on render.
     animation-name: appear;
@@ -178,4 +200,22 @@
     }
   }
 
+  .contentLoader {
+    display: flex;
+  }
+
+  .contentLoaderDot {
+    width: 5px;
+    height: 5px;
+
+    margin: 2px;
+    border-radius: 2.5px;
+    background-color: #357CA2;
+  }
+
+  .questionMark {
+    font-weight: 900;
+    color: #357CA2;
+  }
+
 </style>

src/views/messenger.vue

@@ -75,7 +75,6 @@ export default defineComponent({
       router.push({ name: "login" });
     } 
 
-
     const { emitter } = useMitt();
 
     // List of messages in the view.