feat: add animated loader, remove when loaded to prevent redraws (#771)

* feat: add animated loader, remove when loaded to prevent redraws * fix: use template string
vcync · Nov 12, 2022 · 57f3658 · 57f3658
1 parent 16f33a6
commit 57f3658
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 3 deletions.
diff --git a/public/index.html b/public/index.html
@@ -11,7 +11,7 @@
 </head>
 
 <body>
-  <div class="loading">loading</div>
+  <div id="loading"></div>
   <noscript>
     <strong>We're sorry but modv-3.0 doesn't work properly without JavaScript enabled. Please enable it to
       continue.</strong>

diff --git a/src/App.vue b/src/App.vue
@@ -402,12 +402,29 @@ body {
   background: rgb(45, 45, 45);
 }
 
-/* From https://loading.io/css */
-.loading {
+@keyframes loading {
+  0% {
+    font-size: 4rem;
+  }
+
+  100% {
+    font-size: 7rem;
+  }
+}
+
+#loading {
+  font-size: 4rem;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
+  display: flex;
+  align-content: center;
+}
+
+#loading span {
+  animation: loading 1.4s cubic-bezier(0.87, 0, 0.13, 1) infinite forwards
+    alternate;
 }
 </style>
 

diff --git a/src/main.js b/src/main.js
@@ -35,8 +35,20 @@ window.Vue = new Vue({
 });
 
 async function start() {
+  const loadingElement = document.getElementById("loading");
+
+  // eslint-disable-next-line no-for-each/no-for-each
+  "loading".split("").forEach((char, index) => {
+    const span = document.createElement("span");
+    span.textContent = char;
+    span.style = `animation-delay: ${index * 60}ms`;
+    loadingElement.appendChild(span);
+  });
+
   modV.setup();
   await modV.ready;
+
+  loadingElement.remove();
   window.Vue.$mount("#app");
 }