Loading animation overhaul

OpenShock · Sep 27, 2023 · f586e54 · f586e54
1 parent 0ebc931
commit f586e54
Show file tree

Hide file tree

Showing 2 changed files with 188 additions and 46 deletions.
diff --git a/src/views/dashboard/DashboardRoot.vue b/src/views/dashboard/DashboardRoot.vue
@@ -1,8 +1,8 @@
 <template>
   <router-view v-slot="{ Component }">
+
     <transition name="component-fade" mode="out-in">
-      <div v-if="self.transitionFinished && userHubOk && self.success" :key="'0'" id="app-root"
-           class="manager-root">
+      <div v-if="transition.finished" :key="'0'" id="app-root" class="manager-root">
         <nav-root></nav-root>
 
         <transition name="component-fade" mode="out-in">
@@ -11,10 +11,22 @@
 
       </div>
       <div v-else :key="'1'" class="manager-root-loading row align-items-center justify-content-center">
-        <loading-view class="col-1" style="width: fit-content" :loading="isLoading" :error="!self.success || this.$store.state.userHubState == 'Disconnected'"
-                      :loading-text="loadingText"
-                      :success-text="successText"
-                      :errorText="errorText"/>
+        <svg class="loading-container" width="399.99554" viewBox="0 0 399.99554 400" version="1.1" id="svg1"
+          xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+          <defs id="defs1" />
+          <g id="layer1" style="display:inline" transform="translate(-50.125,-49.875)">
+            <g id="g134" :class="transition.started ? 'zoomout' : 'loading'">
+              <g id="g155" class="loading-circle" transform-origin="250 250">
+                <path id="path47" class="circle" transform-origin="250 250" style="display:inline;opacity:1;fill:#e14a6d;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.194537;stroke-dasharray:none;
+                  stroke-opacity:1"
+                  d="m 250.125,49.875 c -110.45695,0 -200,89.54305 -200,200 0.136733,40.33129 12.463529,79.668 35.346275,112.85402 0.424759,0.61601 1.146318,0.63479 1.606995,0.0452 l 15.78877,-20.20849 c 0.46068,-0.58964 0.50896,-1.57971 0.11339,-2.21485 -3.738483,-6.00277 -7.10552,-12.22969 -10.081992,-18.64575 -3.41956,-7.48995 -6.299937,-15.21469 -8.619141,-23.11524 -2.318965,-7.90069 -4.070819,-15.957 -5.242188,-24.10742 -1.171518,-8.1501 -1.759602,-16.37349 -1.759765,-24.60742 1.63e-4,-8.23393 0.588247,-16.45732 1.759765,-24.60742 1.171369,-8.15042 2.923223,-16.20673 5.242188,-24.10742 2.319204,-7.90055 5.199581,-15.62529 8.619141,-23.11524 3.419095,-7.48973 7.368602,-14.72559 11.818362,-21.65234 4.45007,-6.92696 9.38907,-13.52709 14.77929,-19.75 5.38987,-6.22302 11.2172,-12.05296 17.4375,-17.44531 6.22043,-5.39234 12.81795,-10.3333 19.74219,-14.78516 6.9249,-4.451341 14.1588,-8.40215 21.64649,-11.822266 7.48681,-3.420351 15.20828,-6.301379 23.10546,-8.621094 7.89749,-2.31979 15.95054,-4.072296 24.09766,-5.244141 8.14748,-1.172449 16.36827,-1.761187 24.59961,-1.761718 2.82811,2.47e-4 5.65578,0.06993 8.48047,0.208984 2.825,0.13905 5.64616,0.347446 8.46094,0.625 2.81472,0.277388 5.6222,0.623847 8.41992,1.039063 2.79789,0.41458 5.58519,0.897798 8.35937,1.449218 2.77392,0.552601 5.53387,1.17323 8.27735,1.861328 2.744,0.686855 5.47073,1.440988 8.17773,2.261719 2.70628,0.821964 5.39199,1.710253 8.05469,2.664063 2.66324,0.952634 5.3027,1.970519 7.91601,3.052734 2.61303,1.082832 5.19909,2.229662 7.75586,3.439453 2.55688,1.209916 5.08368,2.482434 7.57813,3.816406 2.49413,1.333914 4.95516,2.728861 7.38086,4.183591 2.42609,1.45413 4.81613,2.96761 7.16797,4.53907 2.35148,1.57254 4.66403,3.20259 6.93554,4.88867 0.79898,0.60786 1.59264,1.22266 2.3809,1.84434 0.58753,0.46337 1.43396,0.36516 1.89463,-0.22448 l 15.01926,-19.224101 c 0.46067,-0.58964 0.35656,-1.441654 -0.23601,-1.898554 C 337.19307,64.536718 294.29034,49.896929 250.125,49.875 Z m 172.84233,201.35483 c -0.0611,7.78101 -0.64718,15.54954 -1.75444,23.25259 -1.17137,8.15042 -2.92322,16.20673 -5.24219,24.10742 -2.3192,7.90055 -5.19958,15.62529 -8.61914,23.11524 -3.41909,7.48973 -7.3686,14.72559 -11.81836,21.65234 -4.45007,6.92696 -9.38907,13.52709 -14.77929,19.75 -5.38987,6.22302 -11.2172,12.05296 -17.4375,17.44531 -6.22043,5.39234 -12.81795,10.3333 -19.74219,14.78516 -6.9249,4.45134 -14.1588,8.40215 -21.64649,11.82227 -7.48681,3.42035 -15.20828,6.30138 -23.10546,8.62109 -7.89749,2.31979 -15.95054,4.0723 -24.09766,5.24414 -8.14748,1.17245 -16.36827,1.76119 -24.59961,1.76172 -8.23134,-5.3e-4 -16.45213,-0.58927 -24.59961,-1.76172 -8.14712,-1.17184 -16.20017,-2.92435 -24.09766,-5.24414 -2.02649,-0.70432 -4.03966,-1.44632 -6.03846,-2.22559 -0.69715,-0.27179 -1.63381,-0.0191 -2.09447,0.57057 l -15.76538,20.17918 c -0.46066,0.58964 -0.2717,1.29489 0.42417,1.56996 22.98176,9.0845 47.45202,13.83263 72.17141,13.99963 110.00499,0 199.26687,-88.81177 199.99551,-198.64517 0.005,-0.74824 -0.60209,-1.35483 -1.35035,-1.35483 l -24.44266,0 c -0.74826,0 -1.3543,0.60659 -1.36017,1.35483 z m -306.63357,109.83383 -15.45853,19.78283 c -0.46072,0.5896 -0.41525,1.50624 0.10563,2.04343 1.50031,1.54728 3.02553,3.07021 4.57507,4.56819 0.53797,0.52007 1.35074,0.46039 1.81143,-0.12923 l 15.10903,-19.33745 c 0.46069,-0.58962 0.39831,-1.48949 -0.13475,-2.0146 -0.95965,-0.94534 -1.90823,-1.90187 -2.84555,-2.86941 -0.51305,-0.66982 -1.02119,-1.34339 -1.52438,-2.02065 -0.44625,-0.60062 -1.17723,-0.61271 -1.63795,-0.0231 z m 22.06646,22.27933 -14.6559,18.75738 c -0.46069,0.58962 -0.37298,1.46164 0.19957,1.94338 1.6323,1.37341 3.28647,2.72063 4.96187,4.04112 0.58767,0.46318 1.44033,0.35704 1.90099,-0.23261 l 14.8826,-19.05022 c 0.46066,-0.58965 0.33883,-1.41791 -0.26828,-1.8553 -1.73042,-1.24665 -3.43762,-2.52523 -5.12075,-3.83508 -0.59051,-0.45955 -1.43941,-0.35829 -1.9001,0.23133 z m 25.73043,17.58982 -14.91169,19.08359 c -0.46071,0.58961 -0.3227,1.39366 0.31128,1.79111 1.82562,1.14451 3.66962,2.25944 5.53127,3.34436 0.64649,0.37676 1.54628,0.20018 2.0069,-0.38949 l 15.16006,-19.40757 c 0.46062,-0.58967 0.29382,-1.34361 -0.36955,-1.68978 -1.92614,-1.00513 -3.83318,-2.0465 -5.72008,-3.12356 -0.64984,-0.37093 -1.54748,-0.19827 -2.00819,0.39134 z" />
+              </g>
+              <path class="bolt" transform-origin="250 250" style="display:inline;opacity:1;fill:#afe3fe;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.2;stroke-dasharray:none;
+                stroke-opacity:1" d="M 279,112 254.5,232.5 H 328 L 221,388 245.5,267.5 H 172 Z" id="path134" />
+            </g>
+          </g>
+
+        </svg>
       </div>
     </transition>
   </router-view>
@@ -26,17 +38,19 @@ import NavRoot from "./Navigation/NavRoot";
 import LoadingView from "../utils/LoadingView";
 
 export default {
-  components: {NavRoot, LoadingView},
+  components: { NavRoot, LoadingView },
   mounted() {
+    this.stateLoop();
     this.getSelf();
   },
   data() {
     return {
-      self: {
-        loading: true,
-        transitionFinished: false,
-        success: false
-      }
+      transition: {
+        started: false,
+        finished: false
+      },
+      loading: true,
+      success: false
     }
   },
   computed: {
@@ -47,38 +61,47 @@ export default {
       const us = this.$store.state.userHubState;
       return us == "Reconnecting" || us == "Connected";
     },
-    isLoading() {
-      if(this.$store.state.userHubState == "Disconnected") return false;
-      return this.self.loading || !this.userHubOk;
-    },
     loadingText() {
-      if(this.isLoading) return "<p>Authenticating user.<br>Please wait...</p>"
-      if(this.userHubInitiallyConnected) return "<p>Trying to reconnect.<br>Please wait...</p>"
+      if (this.loading) return "<p>Authenticating user.<br>Please wait...</p>"
+      if (this.userHubInitiallyConnected) return "<p>Trying to reconnect.<br>Please wait...</p>"
       return "<p>Trying to connect to user hub.<br>Please wait...</p>";
     },
     successText() {
       return "<p>Successfully connected.<br>Now loading <b><u>Dashboard</u></b></p>";
     },
     errorText() {
-      if(!this.self.success) return "<p>Failed to connect to backend<br>Please try to reload the page</p>";
-      if(!this.userHubInitiallyConnected) return "<p>Could not connect to hub.<br>Please try to reload the page</p>";
-      if(!this.userHubOk) return "<p>Could not reconnect to hub.<br>Please try to reload the page</p>";
+      if (!this.self.success) return "<p>Failed to connect to backend<br>Please try to reload the page</p>";
+      if (!this.userHubInitiallyConnected) return "<p>Could not connect to hub.<br>Please try to reload the page</p>";
+      if (!this.userHubOk) return "<p>Could not reconnect to hub.<br>Please try to reload the page</p>";
 
       return "<p>Failed to connect to backend.<br>Please try to reload the page</p>";
     }
   },
   methods: {
     async getSelf() {
-      this.self.loading = true;
-     try {
-       await this.$store.dispatch('getSelf');
-       this.self.success = true;
-     } catch (_) {}
-     this.self.loading = false;
-
-      setTimeout(() => {
-        this.self.transitionFinished = true;
-      }, 1500);
+      this.loading = true;
+      try {
+        await this.$store.dispatch('getSelf');
+        this.success = true;
+      } catch (_) { }
+      this.loading = false;
+
+
+    },
+    stateLoop() {
+      setInterval(() => {
+
+        if (this.loading || !this.success || !this.userHubOk) {
+          this.transition.started = false;
+          this.transition.finished = false;
+          return;
+        };
+
+        this.transition.started = true;
+        setTimeout(() => {
+          this.transition.finished = true;
+        }, 500);
+      }, 250);
     }
   }
 }
@@ -87,3 +110,121 @@ export default {
 <style lang="scss">
 @import "DashboardRoot";
 </style>
+
+<style lang="scss" scoped>
+.loading-container {
+  height: 100%;
+
+  .circle {
+    transform: scale(0.3, 0.3);
+  }
+
+  .bolt {
+    transform: scale(0.3, 0.3);
+  }
+
+  .loading {
+    .bolt {
+      animation-name: brightnessBlink;
+      animation-duration: 1.5s;
+      animation-iteration-count: infinite;
+
+      @keyframes brightnessBlink {
+        0% {
+          fill: #afe3fe;
+        }
+
+        20% {
+          fill: #afe3fe;
+        }
+
+        30% {
+          fill: #2fb6ff;
+        }
+
+        40% {
+          fill: #afe3fe;
+        }
+
+        50% {
+          fill: #2fb6ff;
+        }
+
+        60% {
+          fill: #afe3fe;
+        }
+
+        100% {
+          fill: #afe3fe;
+        }
+      }
+    }
+  }
+
+  .loading-circle {
+    animation-name: spin;
+    animation-duration: 1.5s;
+    animation-iteration-count: infinite;
+
+    @keyframes spin {
+      0% {
+        transform: rotateZ(0deg);
+      }
+
+      100% {
+        transform: rotateZ(360deg);
+      }
+    }
+  }
+
+  .zoomout {
+
+
+    .bolt {
+      animation-name: zoomOut;
+      animation-timing-function: ease-in-out;
+      animation-duration: 1s;
+      animation-iteration-count: 1;
+      animation-fill-mode: forwards;
+
+      @keyframes zoomOut {
+        0% {
+          transform: scale(0.3, 0.3);
+          filter: opacity(100%);
+        }
+
+        80% {
+          filter: opacity(0%);
+        }
+
+        100% {
+          transform: scale(10, 10);
+          filter: opacity(0%);
+        }
+      }
+    }
+
+    .circle {
+      animation-name: opacityDFade;
+      animation-timing-function: ease-in-out;
+      animation-duration: 0.5s;
+      animation-iteration-count: 1;
+      animation-fill-mode: forwards;
+
+      @keyframes opacityDFade {
+        0% {
+          filter: opacity(100%);
+        }
+
+        80% {
+          filter: opacity(0%);
+        }
+
+        100% {
+          filter: opacity(0%);
+        }
+      }
+    }
+  }
+}
+</style>