🤓 Add loading spinner & improve local users

benc-uk · May 17, 2021 · 3575afb · 3575afb
1 parent dfb6ce6
commit 3575afb
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 9 deletions.
diff --git a/client/css/main.css b/client/css/main.css
@@ -36,3 +36,55 @@ footer {
 .userAway {
   color: #c0bdba !important;
 }
+
+.loaderOverlay {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.7);
+  z-index: 10;
+}
+
+.loader,
+.loader:after {
+  border-radius: 50%;
+  width: 10em;
+  height: 10em;
+}
+.loader {
+  margin: 60px auto;
+  font-size: 15px;
+  position: relative;
+  text-indent: -9999em;
+
+  border-top: 1.1em solid rgba(39, 147, 218, 0.2);
+  border-right: 1.1em solid rgba(39, 147, 218, 0.2);
+  border-bottom: 1.1em solid rgba(39, 147, 218, 0.2);
+  border-left: 1.1em solid #2793da;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load8 1.1s infinite linear;
+  animation: load8 1.1s infinite linear;
+}
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
diff --git a/client/index.html b/client/index.html
@@ -25,8 +25,14 @@
   </head>
 
   <body>
+
     <!-- Main app -->
     <section class="section" id="app">
+      <!-- display spinner if we're not online yet -->
+      <div v-if="!online || !user || !ws" class="loaderOverlay">
+        <div class="loader">Loading...</div>
+      </div>
+
       <div class="notification is-danger" v-if="error">{{ error }}</div>
       <div class="columns" v-if="ws">
         <!-- box for group chats -->
@@ -132,6 +138,6 @@
 
     </section>
 
-    <footer>Chatr v0.0.7, Ben Coleman 2021 <a href="https://github.com/benc-uk/chatr" target="_blank">[GitHub Project]</a></footer>
+    <footer>Chatr v0.0.8, Ben Coleman 2021 <a href="https://github.com/benc-uk/chatr" target="_blank">[GitHub Project]</a></footer>
   </body>
 </html>
diff --git a/client/js/app.js b/client/js/app.js
@@ -16,6 +16,8 @@ async function startApp() {
         joinedChats: {},
         // Main WebSocket instance
         ws: null,
+        // Toggle to see if user is online
+        online: false,
         // User object which is an instance of SWA clientPrincipal
         // See https://docs.microsoft.com/en-us/azure/static-web-apps/user-information?tabs=javascript#client-principal-data
         user: {},
@@ -59,11 +61,11 @@ async function startApp() {
         }
       } catch (err) {
         // When auth endpoint not available, fallback to a prompt and fake clientPrincipal data
-        // In reality this is not really need anymore as the SWA emulator does a good job
-        const userName = prompt('What is your name')
+        // In reality this is not really need anymore as we use the SWA emulator
+        const userName = prompt('Please set your user name')
         if (!userName) window.location.href = window.location.href
         this.user = {
-          userId: utils.uuidv4(),
+          userId: utils.hashString(userName),
           userDetails: userName,
           identityProvider: 'fake',
         }
@@ -112,7 +114,7 @@ async function startApp() {
 
         // System events
         if (msg.type === 'system' && msg.event === 'connected') {
-          utils.toastMessage(`🔌 Connected to ${evt.origin}`, 'success')
+          utils.toastMessage(`🔌 Connected to ${evt.origin.replace('wss://', '')}`, 'success')
         }
 
         // Server events
@@ -131,9 +133,14 @@ async function startApp() {
         }
 
         if (msg.from === 'server' && msg.data.chatEvent === 'userOnline') {
-          let user = JSON.parse(msg.data.data)
-          this.$set(this.allUsers, user.userId, user)
-          utils.toastMessage(`🤩 ${user.userName} has just joined`, 'success')
+          let newUser = JSON.parse(msg.data.data)
+          // If the new user is ourselves, that means we're connected and online
+          if (newUser.userId == this.user.userId) {
+            this.online = true
+          } else {
+            utils.toastMessage(`🤩 ${newUser.userName} has just joined`, 'success')
+          }
+          this.$set(this.allUsers, newUser.userId, newUser)
         }
 
         if (msg.from === 'server' && msg.data.chatEvent === 'userOffline') {

diff --git a/client/js/utils.js b/client/js/utils.js
@@ -18,4 +18,17 @@ export default {
       animate: { in: 'fadeIn', out: 'fadeOut' },
     })
   },
+
+  hashString(str, seed = 0) {
+    let h1 = 0xdeadbeef ^ seed,
+      h2 = 0x41c6ce57 ^ seed
+    for (let i = 0, ch; i < str.length; i++) {
+      ch = str.charCodeAt(i)
+      h1 = Math.imul(h1 ^ ch, 2654435761)
+      h2 = Math.imul(h2 ^ ch, 1597334677)
+    }
+    h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909)
+    h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909)
+    return 4294967296 * (2097151 & h2) + (h1 >>> 0)
+  },
 }
diff --git a/client/login.html b/client/login.html
@@ -46,7 +46,7 @@ <h1 class="title is-1">💬 Chatr</h1>
       </div>
     </section>
 
-    <footer>Chatr v0.0.7, Ben Coleman 2021 <a href="https://github.com/benc-uk/chatr" target="_blank">[GitHub Project]</a></footer>
+    <footer>Chatr v0.0.8, Ben Coleman 2021 <a href="https://github.com/benc-uk/chatr" target="_blank">[GitHub Project]</a></footer>
 
   </body>
 </html>