From 918b65f0689b1f39ae5b9f8565216b8bbc5b18bd Mon Sep 17 00:00:00 2001
From: Andrew Gundersen <gundersena@xavier.edu>
Date: Wed, 10 Mar 2021 12:56:01 -0600
Subject: [PATCH] audio placeholders

---
 src/components/messageItem.vue | 44 ++++++++++++++++++++++++++++++++--
 src/views/messenger.vue        |  1 -
 2 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/components/messageItem.vue b/src/components/messageItem.vue
index 00d7167..22a9f14 100644
--- 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 a1fa5e5..0a80f4a 100644
--- 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.
-- 
2.43.0