refactored chat handling into chat view component

src/components/chat_message/chat_message.js

@@ -15,18 +15,13 @@ import { useInterfaceStore } from 'src/stores/interface'
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faEllipsisH, faTimes } from '@fortawesome/free-solid-svg-icons'
+import { faEllipsisH, faTimes, faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 
-library.add(faTimes, faEllipsisH)
+library.add(faTimes, faEllipsisH, faCircleNotch)
 
 const ChatMessage = {
   name: 'ChatMessage',
-  props: [
-    'edited',
-    'noHeading',
-    'chatItem',
-    'hoveredMessageChain',
-  ],
+  props: ['edited', 'noHeading', 'chatItem', 'hoveredMessageChain'],
   emits: ['hover'],
   components: {
     Popover,

src/components/chat_message/chat_message.scss

@@ -104,7 +104,7 @@
     width: 100%;
   }
 
-  .outgoing {
+  .-outgoing {
     display: flex;
     flex-flow: row wrap;
     place-content: end flex-end;
@@ -118,12 +118,16 @@
     }
   }
 
-  .incoming {
+  .-incoming {
     .chat-message-menu {
       left: 0.4rem;
     }
   }
 
+  .-pending {
+    color: red !important;
+  }
+
   .chat-message-inner.with-media {
     width: 100%;
 

src/components/chat_message/chat_message.vue

@@ -8,7 +8,7 @@
   >
     <div
       class="chat-message"
-      :class="[{ 'outgoing': isCurrentUser, 'incoming': !isCurrentUser }]"
+      :class="[{ '-outgoing': isCurrentUser, '-incoming': !isCurrentUser, '-pending': message.pending }]"
     >
       <div
         v-if="!isCurrentUser"
@@ -73,6 +73,7 @@
             </div>
             <StatusContent
               class="message-content"
+              :class="{ faint: message.pending }"
               :status="messageForStatusContent"
               :full-content="true"
             >
@@ -80,6 +81,16 @@
                 <span
                   class="created-at"
                 >
+                  <span
+                    v-if="message.pending"
+                    class="loading-spinner"
+                  >
+                    <FAIcon
+                      class="fa-old-padding"
+                      spin
+                      icon="circle-notch"
+                    />
+                  </span>
                   {{ createdAt }}
                 </span>
               </template>