Merge pull request #182 from migue802/master

Adding some loading dots

Author: SebOuellette

css/miscs.css

@@ -13,3 +13,71 @@ See the License for the specific language governing permissions and
 limitations under the License. */
 
 
+@charset "UTF-8";
+/**
+ *
+ * three-dots.css v0.1.0
+ *
+ * https://nzbin.github.io/three-dots/
+ *
+ * Copyright (c) 2018 nzbin
+ *
+ * Released under the MIT license
+ *
+ */
+
+
+.dot-bricks {
+    position: relative;
+    top: 8px;
+    left: -9999px;
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+    background-color: #9880ff;
+    color: #9880ff;
+    box-shadow: 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff;
+    animation: dotBricks 2s infinite ease;
+}
+  
+@keyframes dotBricks {
+    0% {
+      box-shadow: 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff;
+    }
+    8.333% {
+      box-shadow: 10007px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff;
+    }
+    16.667% {
+      box-shadow: 10007px -16px 0 0 #9880ff, 9991px -16px 0 0 #9880ff, 10007px 0 0 0 #9880ff;
+    }
+    25% {
+      box-shadow: 10007px -16px 0 0 #9880ff, 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff;
+    }
+    33.333% {
+      box-shadow: 10007px 0 0 0 #9880ff, 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff;
+    }
+    41.667% {
+      box-shadow: 10007px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff;
+    }
+    50% {
+      box-shadow: 10007px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff, 9991px -16px 0 0 #9880ff;
+    }
+    58.333% {
+      box-shadow: 9991px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff, 9991px -16px 0 0 #9880ff;
+    }
+    66.666% {
+      box-shadow: 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff, 9991px -16px 0 0 #9880ff;
+    }
+    75% {
+      box-shadow: 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff;
+    }
+    83.333% {
+      box-shadow: 9991px -16px 0 0 #9880ff, 10007px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff;
+    }
+    91.667% {
+      box-shadow: 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff;
+    }
+    100% {
+      box-shadow: 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff;
+    }
+}

js/channelSelect.js

@@ -46,6 +46,18 @@ let channelSelect = (c, name) => {
         messages.removeChild(messages.firstChild);
     }
 
+    // Creates the loading dots
+    var container = document.createElement('div'); // Centred container
+    var loadingDots = document.createElement('div') // Loading dots
+    loadingDots.classList.add('dot-bricks')
+    container.style.position = "absolute";
+    container.style.top = "50%";
+    container.style.left = "50%";
+    container.style.transform = "translate(-50%, -50%)";
+    container.id = "loading-container";
+    container.appendChild(loadingDots);
+    messages.appendChild(container);
+
     // Set colour of the channel
     try {
         selectedChanDiv.style.color = '#606266';
@@ -96,6 +108,9 @@ let channelSelect = (c, name) => {
 
         messages.scrollTop = messages.scrollHeight;
         generatingMessages = false;
+        
+        // Remove the loading dots
+        messages.removeChild(document.getElementById('loading-container')); 
     }
 };