Added sending loader + 'new_msg'/'msg_pending' have a value for each channel

public_html/css/container.css

@@ -119,8 +119,20 @@
 
 		border: none;
 
+		background: url('/image/loader/send-input.svg') -1em center no-repeat;
+		background-size: 1em 1em;
+
 		font-size: inherit;
 		font-family: inherit;
+
+		transition: all .2s ease-in-out;
+	}
+
+	#CONTAINER.message form.msg-input input.loading{ /* Loading input */
+		width: calc( 100% - 2em - 3em - 2.5em );
+		padding-left: 3em;
+
+		background-position: 1em center;
 	}
 
 	#CONTAINER.message form.msg-input button{ /* form send button */

public_html/image/loader/send-input.svg

@@ -0,0 +1,33 @@
+<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+<svg width="120" height="30" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="#333">
+    <circle cx="15" cy="15" r="15">
+        <animate attributeName="r" from="15" to="15"
+                 begin="0s" dur="0.8s"
+                 values="15;9;15" calcMode="linear"
+                 repeatCount="indefinite" />
+        <animate attributeName="fill-opacity" from="1" to="1"
+                 begin="0s" dur="0.8s"
+                 values="1;.5;1" calcMode="linear"
+                 repeatCount="indefinite" />
+    </circle>
+    <circle cx="60" cy="15" r="9" fill-opacity="0.3">
+        <animate attributeName="r" from="9" to="9"
+                 begin="0s" dur="0.8s"
+                 values="9;15;9" calcMode="linear"
+                 repeatCount="indefinite" />
+        <animate attributeName="fill-opacity" from="0.5" to="0.5"
+                 begin="0s" dur="0.8s"
+                 values=".5;1;.5" calcMode="linear"
+                 repeatCount="indefinite" />
+    </circle>
+    <circle cx="105" cy="15" r="15">
+        <animate attributeName="r" from="15" to="15"
+                 begin="0s" dur="0.8s"
+                 values="15;9;15" calcMode="linear"
+                 repeatCount="indefinite" />
+        <animate attributeName="fill-opacity" from="1" to="1"
+                 begin="0s" dur="0.8s"
+                 values="1;.5;1" calcMode="linear"
+                 repeatCount="indefinite" />
+    </circle>
+</svg>

view/main.js

@@ -75,4 +75,8 @@ window.wsc_chat = wsc.channel('chat').listen(function(msg, err){
 	if( router.app.$route.path != '/inbox' )
 		gstore.data.notif.inbox.count += msg.msg.length;
 
+	// {7} Remove loader //
+	gstore.data.msg_pending.inbox = false;
+
+
 }).send({name: _SERVER.session.name});

view/vue-config.js

@@ -83,14 +83,24 @@ gstore.add('func', {
 		/* (2) Send message to WebSocket */
 		wsc_chat.send(JSON.stringify({message: msg}));
 
-		/* (3) Add locally */
+		/* (3) Add loader */
-		gstore.data.notif.inbox.data.push([ gstore.data.server.session.name, msg ]);
+		gstore.data.msg_pending.inbox = true;
 	}
 });
 
 
 // new-message container
-gstore.add('new_msg', '');
+gstore.add('new_msg', {
+	inbox:     '',
+	emergency: '',
+	event:     ''
+});
+// if message loader
+gstore.add('msg_pending', {
+	inbox:     true,
+	emergency: true,
+	event:     true
+}); // true when message send pending
 
 // notification stack visibility
 gstore.add('nstack', false);

view/vue/container/inbox.vue

@@ -10,7 +10,7 @@
 		<div class='end-pad'></div> <!-- End Spacing -->
 
 		<form class='msg-input' @submit.prevent='new_message'>
-			<input type='text' placeholder='Nouveau message..' id='msg-new-content' v-model='gstore.new_msg'>
+			<input type='text' placeholder='Nouveau message..' id='msg-new-content' v-model='gstore.new_msg.inbox' :class='gstore.msg_pending.inbox ? "loading" : ""'>
 			<button></button>
 		</form>
 
@@ -28,10 +28,10 @@ export default {
 		new_message(msg){
 
 			// {1} Send message //
-			this.gstore.func.sendMessage(this.gstore.new_msg);
+			this.gstore.func.sendMessage(this.gstore.new_msg.inbox);
 
 			// {2} Empty input //
-			this.gstore.new_msg = '';
+			this.gstore.new_msg.inbox = '';
 		},
 		bbcode: function(msg){