From 9e52e0cb7a8a742a4cc1b909a254aaa70e300f95 Mon Sep 17 00:00:00 2001
From: Laurynas Gadliauskas <laurynas.gadliauskas@hostinger.com>
Date: Mon, 7 Jun 2021 14:43:46 +0300
Subject: [PATCH] feat: pulsate load icons

---
 frontend/public/themes/dark.css               | 16 ++++++++++++++--
 frontend/src/components/prompts/Archive.vue   | 11 ++++-------
 frontend/src/components/prompts/Unarchive.vue | 11 ++++-------
 frontend/src/css/base.css                     | 18 +++++++++++++++++-
 frontend/src/utils/buttons.js                 |  4 ++--
 5 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/frontend/public/themes/dark.css b/frontend/public/themes/dark.css
index 5e73e6b0..e3ffdca9 100644
--- a/frontend/public/themes/dark.css
+++ b/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 {
@@ -211,4 +211,16 @@ 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);
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/components/prompts/Archive.vue b/frontend/src/components/prompts/Archive.vue
index ec170f71..810cc3f3 100644
--- a/frontend/src/components/prompts/Archive.vue
+++ b/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");
     },
   },
 };
diff --git a/frontend/src/components/prompts/Unarchive.vue b/frontend/src/components/prompts/Unarchive.vue
index 004b1970..b00cf8fa 100644
--- a/frontend/src/components/prompts/Unarchive.vue
+++ b/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");
     },
   },
 };
diff --git a/frontend/src/css/base.css b/frontend/src/css/base.css
index bf34798b..970d81f7 100644
--- a/frontend/src/css/base.css
+++ b/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 {
diff --git a/frontend/src/utils/buttons.js b/frontend/src/utils/buttons.js
index bf123878..7b897662 100644
--- a/frontend/src/utils/buttons.js
+++ b/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);