loading styling

src/components/audio.ts

@@ -187,8 +187,13 @@ async function wrapVoiceMessage(audioEl: AudioElement) {
   const isPremium: boolean = rootScope.premium;
   if (isPremium) {
     const speechRecognitionDiv = document.createElement('div');
-    speechRecognitionDiv.innerHTML = '→A';
     speechRecognitionDiv.classList.add('audio-to-text-button');
+    const speechRecognitionIcon = document.createElement('span');
+    speechRecognitionIcon.innerHTML = '→A';
+    const speechRecognitionLoader = document.createElement('div');
+    speechRecognitionLoader.classList.add('loader');
+    speechRecognitionLoader.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 24"><style></style><rect fill="transparent" stroke-width="3" stroke-linejoin="round" rx="6" ry="6" stroke="var(--message-out-primary-color)" stroke-dashoffset="1" stroke-dasharray="32,68" width="32" height="24"></rect></svg>'
+    speechRecognitionDiv.append(speechRecognitionIcon, speechRecognitionLoader);
 
     const speechTextDiv = document.createElement('div');
     speechTextDiv.innerHTML = '';
@@ -200,12 +205,12 @@ async function wrapVoiceMessage(audioEl: AudioElement) {
       if (!transcribed) {
         if (isTranscribing) return;
         isTranscribing = true;
-        //Process started
+        speechRecognitionLoader.classList.add('active');
         const transcription = await audioEl.managers.appMessagesManager.transcribeAudio(message);
         speechTextDiv.innerHTML = transcription.text;
         isTranscribing = false;
         transcribed = true;
-        //Process finished
+        speechRecognitionLoader.classList.remove('active');
       } else {
         //Hide transcription
         speechTextDiv.innerHTML = '';

src/scss/partials/_audio.scss

@@ -445,13 +445,50 @@
       gap: .25em;
       
       .audio-to-text-button {
-        background: var(--ripple-color);
+        background: var(--message-transcribe-button);
         width: max-content;
-        margin-top: 0.3rem;
-        padding: 0.2rem;
-        padding-right: 0.3rem;
+        margin-top: 0.2rem;
         font-size: .8em;
         border-radius: 0.3rem;
+        width: 2rem;
+        height: 1.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        overflow: hidden;
+
+        span {
+          line-height: 0;
+          letter-spacing: .15em;
+        }
+
+        .loader {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          opacity: 0;
+          transition: opacity .2s;
+
+          &.active {
+            opacity: 1;
+          }
+
+          svg {
+            width: 100%;
+            height: 100%;
+            @keyframes loading {
+              from { stroke-dashoffset: 100 }
+              to { stroke-dashoffset: 0 }
+            }
+            rect {
+              animation: 1s ease-in-out loading infinite;
+            }
+          }
+
+        }
       }
 
     }
@@ -606,4 +643,4 @@
       }
     }
   }
-}
+}

src/scss/partials/_chatBubble.scss

@@ -1411,7 +1411,7 @@ $bubble-border-radius-big: 12px;
     }
     
     @include respond-to(handhelds) {
-      height: 2.375rem;
+      min-height: 2.375rem;
       --icon-margin: .6875rem;
 
       .audio-details {
@@ -1440,7 +1440,7 @@ $bubble-border-radius-big: 12px;
   .message.audio-message,
   .message.voice-message {
     // width: 335px;
-    max-width: unquote("min(100%, 335px)") !important;
+    max-width: unquote("min(100%, 364px)") !important;
 
     @include respond-to(handhelds) {
       // width: 280px;
@@ -2718,6 +2718,10 @@ $bubble-border-radius-big: 12px;
       color: var(--message-out-primary-color);
     }
 
+    .audio-to-text-button {
+      background: var(--message-transcribe-button-out);
+    }
+
     /* html:not(.is-firefox) */ &-wrapper {
       @include respond-to(medium-screens) {
         transform: scale(1) translateX(calc((var(--chat-input-size) + #{$btn-send-margin}) * -1));

src/scss/style.scss

@@ -256,6 +256,8 @@ $chat-input-inner-padding-handhelds: .25rem;
   --light-filled-message-primary-color: var(--light-filled-primary-color);
   --message-secondary-color: var(--secondary-color);
   --message-error-color: var(--danger-color);
+  --message-transcribe-button: #e8f3ff;
+  --message-transcribe-button-out: #cceebf;
 
   --message-out-link-color: var(--link-color);
   --message-out-status-color: var(--message-out-primary-color);
@@ -322,6 +324,8 @@ $chat-input-inner-padding-handhelds: .25rem;
   --message-checkbox-border-color: #fff;
   --message-secondary-color: var(--secondary-color);
   --message-error-color: #fff;
+  --message-transcribe-button: #2a2a3c;
+  --message-transcribe-button-out: #8373d3;
 
   --message-out-link-color: #fff;
   --message-out-status-color: #fff;