audio placeholders

diff --git a/src/components/messageItem.vue b/src/components/messageItem.vue
index 00d71678da02510776e096e6f59b8fe85ad7e495..22a9f14003acb473373a053ec4c0e3994479d1cb 100644 (file)
--- a/src/components/messageItem.vue
+++ b/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>
\ No newline at end of file

diff --git a/src/views/messenger.vue b/src/views/messenger.vue
index a1fa5e5d8cf8f65a26f32ea76dcc46ec57753254..0a80f4a679577a7a988d2acd2de9f460ae70fb1f 100644 (file)
--- a/src/views/messenger.vue
+++ b/src/views/messenger.vue
@@ -75,7 +75,6 @@ export default defineComponent({
       router.push({ name: "login" });
     } 
 
-
     const { emitter } = useMitt();
 
     // List of messages in the view.