feat: pulsate load icons

frontend/public/themes/dark.css

@@ -56,7 +56,7 @@ header {
   color: var(--textPrimary) !important;
 }
 .action:hover {
-  background-color: rgba(255, 255, 255, .1);
+  background-color: rgba(255, 255, 255, .2);
 }
 .action i {
   color: var(--icon) !important;
@@ -77,7 +77,7 @@ nav > div {
   color: var(--textPrimary) !important;
 }
 .breadcrumbs a:hover {
-  background-color: rgba(255, 255, 255, .1);
+  background-color: rgba(255, 255, 255, .2);
 }
 
 #listing .item {
@@ -212,3 +212,15 @@ table th {
 .share__box__element {
   border-top-color: var(--divider);
 }
+
+@keyframes pulse {
+  0% {
+    background-color: rgba(0, 0, 0, 0);
+  }
+  50% {
+    background-color: rgba(255, 255, 255, .2);
+  }
+  100% {
+    background-color: rgba(0, 0, 0, 0);
+  }
+}

frontend/src/components/prompts/Archive.vue

@@ -16,7 +16,6 @@
       />
 
       <button
-        :disabled="loading"
         v-for="(ext, format) in formats"
         :key="format"
         class="button button--block"
@@ -33,13 +32,13 @@
 import { mapState, mapGetters } from "vuex";
 import { files as api } from "@/api";
 import url from "@/utils/url";
+import buttons from "@/utils/buttons";
 
 export default {
   name: "archive",
   data: function () {
     return {
       name: "",
-      loading: false,
       formats: {
         zip: "zip",
         tar: "tar",
@@ -76,17 +75,15 @@ export default {
       uri = uri.replace("//", "/");
 
       try {
-        this.loading = true;
+        buttons.loading("archive");
+        this.$store.commit("closeHovers");
         await api.archive(uri, this.name, format, ...items);
-
         this.$store.commit("setReload", true);
       } catch (e) {
         this.$showError(e);
       } finally {
-        this.loading = false;
+        buttons.done("archive");
       }
-
-      this.$store.commit("closeHovers");
     },
   },
 };

frontend/src/components/prompts/Unarchive.vue

@@ -30,7 +30,6 @@
         type="submit"
         :aria-label="$t('buttons.unarchive')"
         :title="$t('buttons.unarchive')"
-        :disabled="loading"
       >
         {{ $t("buttons.unarchive") }}
       </button>
@@ -41,12 +40,12 @@
 <script>
 import { mapState, mapGetters } from "vuex";
 import { files as api } from "@/api";
+import buttons from "@/utils/buttons";
 
 export default {
   name: "rename",
   data: function () {
     return {
-      loading: false,
       name: "",
     };
   },
@@ -65,17 +64,15 @@ export default {
       dst = dst.replace("//", "/");
 
       try {
-        this.loading = true;
+        buttons.loading("unarchive");
+        this.$store.commit("closeHovers");
         await api.unarchive(item.url, dst, false);
-
         this.$store.commit("setReload", true);
       } catch (e) {
         this.$showError(e);
       } finally {
-        this.loading = true;
+        buttons.done("unarchive");
       }
-
-      this.$store.commit("closeHovers");
     },
   },
 };

frontend/src/css/base.css

@@ -40,7 +40,23 @@ video {
 }
 
 i.spin {
-  animation: 1s spin linear infinite;
+  animation: 1s spin linear infinite, 1s pulse linear infinite;
+}
+
+i.pulse-spin {
+  animation: 1s spin linear infinite, 1s pulse linear infinite;
+}
+
+@keyframes pulse {
+  0% {
+    background-color: rgba(0, 0, 0, 0);
+  }
+  50% {
+    background-color: rgba(0, 0, 0, .1);
+  }
+  100% {
+    background-color: rgba(0, 0, 0, 0);
+  }
 }
 
 #app {

frontend/src/utils/buttons.js

@@ -14,7 +14,7 @@ function loading(button) {
   el.style.opacity = 0;
 
   setTimeout(() => {
-    el.classList.add("spin");
+    el.classList.add("pulse-spin");
     el.innerHTML = "autorenew";
     el.style.opacity = 1;
   }, 100);
@@ -31,7 +31,7 @@ function done(button) {
   el.style.opacity = 0;
 
   setTimeout(() => {
-    el.classList.remove("spin");
+    el.classList.remove("pulse-spin");
     el.innerHTML = el.dataset.icon;
     el.style.opacity = 1;
   }, 100);