[NEW] Add loader to audio-message, fix UI

packages/rocketchat-theme/client/imports/components/message-box.css

@@ -143,6 +143,21 @@
 			color: red;
 		}
 
+		&.loading {
+			cursor: pointer;
+			display: none;
+			&.active {
+				display: flex;
+			}
+		}
+
+		&.mic {
+			display: none;
+			&.active {
+				display: flex;
+			}
+		}
+
 	}
 
 	&__action-menu {
@@ -158,10 +173,11 @@
 	}
 
 	&__audio-recording {
-		display: flex;
+		display: none;
 		position: relative;
 		z-index: -1;
 		&.active{
+			display: flex;
 			z-index: 2;
 		}
 	}

packages/rocketchat-ui-message/client/messageBox.html

@@ -105,9 +105,12 @@
 		</div>
 	</div>
 	<div class="rc-message-box__audio-message">
-		<div class="rc-message-box__icon">
+		<div class="rc-message-box__icon mic active js-audio-message-record">
 			{{> icon block="rc-input__icon-svg" icon="mic"}}
 		</div>
+		<div class="rc-message-box__icon loading js-audio-message-loading">
+			<img class="rc-input__icon-svg" src="/images/loading.svg">
+		</div>
 	</div>
 </template>
 

packages/rocketchat-ui-message/client/messageBox.js

@@ -472,7 +472,7 @@ Template.messageBox.events({
 
 		popover.open(config);
 	},
-	'click .rc-message-box__audio-message'(event) {
+	'click .js-audio-message-record'(event) {
 		event.preventDefault();
 		const icon = document.querySelector('.rc-message-box__audio-message');
 		const timer = document.querySelector('.rc-message-box__timer');
@@ -517,9 +517,13 @@ Template.messageBox.events({
 		const icon = document.querySelector('.rc-message-box__audio-message');
 		const timer = document.querySelector('.rc-message-box__timer');
 		const timer_box = document.querySelector('.rc-message-box__audio-recording');
+		const loader = document.querySelector('.js-audio-message-loading');
+		const mic = document.querySelector('.js-audio-message-record');
 
 		icon.classList.remove('hidden');
 		timer_box.classList.remove('active');
+		mic.classList.remove('active');
+		loader.classList.add('active');
 
 		timer.innerHTML = '00:00';
 		if (audioMessageIntervalId) {
@@ -528,6 +532,9 @@ Template.messageBox.events({
 
 		chatMessages[RocketChat.openedRoom].recording = false;
 		AudioRecorder.stop(function(blob) {
+
+			loader.classList.remove('active');
+			mic.classList.add('active');
 			const roomId = Session.get('openedRoom');
 			const record = {
 				name: `${ TAPi18n.__('Audio record') }.mp3`,

public/images/loading.svg

@@ -0,0 +1 @@
+<svg width="32px"  height="32px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling" style="background: none;"><circle cx="50" cy="50" fill="none" stroke="currentColor" stroke-width="5" r="26" stroke-dasharray="122.52211349000194 42.840704496667314" transform="rotate(150 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg>