From 5a380b79d281f5de976336f30e072e3582e3c7ed Mon Sep 17 00:00:00 2001
From: Laurynas Gadliauskas <laurynas.gadliauskas@hostinger.com>
Date: Tue, 17 Jan 2023 14:46:27 +0200
Subject: [PATCH] fix: improve archive loading indicator

---
 frontend/src/components/prompts/Archive.vue | 21 ++++++++++++++++++++-
 frontend/src/css/base.css                   |  2 +-
 frontend/src/i18n/ar_AR.json                |  2 +-
 frontend/src/i18n/en_GB.json                |  4 ++--
 4 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/prompts/Archive.vue b/frontend/src/components/prompts/Archive.vue
index 69a800a8..9bea4735 100644
--- a/frontend/src/components/prompts/Archive.vue
+++ b/frontend/src/components/prompts/Archive.vue
@@ -12,17 +12,25 @@
         type="text"
         @keyup.enter="submit"
         v-model.trim="name"
+        :disabled="loading"
         required
       />
 
       <button
         v-for="(ext, format) in formats"
         :key="format"
+        :disabled="loading"
         class="button button--block"
         @click="archive(format)"
         v-focus
       >
-        {{ ext }}
+        <i
+          v-if="loading && format === loadingFormat"
+          class="material-icons spin"
+        >
+          autorenew
+        </i>
+        <span v-else>{{ ext }}</span>
       </button>
     </div>
   </div>
@@ -48,12 +56,19 @@ export default {
         tarlz4: "tar.lz4",
         tarsz: "tar.sz",
       },
+      loading: false,
+      loadingFormat: "",
     };
   },
   computed: {
     ...mapState(["req", "selected"]),
     ...mapGetters(["isFiles", "isListing"]),
   },
+  mounted() {
+    if (this.selected.length > 0) {
+      this.name = this.req.items[this.selected[0]].name;
+    }
+  },
   methods: {
     cancel: function () {
       this.$store.commit("closeHovers");
@@ -75,6 +90,8 @@ export default {
       uri = uri.replace("//", "/");
 
       try {
+        this.loading = true;
+        this.loadingFormat = format;
         buttons.loading("archive");
         await api.archive(uri, this.name, format, ...items);
         this.$store.commit("closeHovers");
@@ -83,6 +100,8 @@ export default {
       } catch (e) {
         this.$showError(e);
       } finally {
+        this.loading = false;
+        this.loadingFormat = "";
         buttons.done("archive");
       }
     },
diff --git a/frontend/src/css/base.css b/frontend/src/css/base.css
index 379367fb..da8570e6 100644
--- a/frontend/src/css/base.css
+++ b/frontend/src/css/base.css
@@ -44,7 +44,7 @@ video {
 }
 
 i.spin {
-  animation: 1s spin linear infinite, 1s pulse linear infinite;
+  animation: 1s spin linear infinite;
 }
 
 i.pulse-spin {
diff --git a/frontend/src/i18n/ar_AR.json b/frontend/src/i18n/ar_AR.json
index 4653a001..40f5c905 100644
--- a/frontend/src/i18n/ar_AR.json
+++ b/frontend/src/i18n/ar_AR.json
@@ -10,7 +10,7 @@
     "delete": "حذف",
     "directorySizes": "حساب أحجام الدليل",
     "download": "تحميل",
-    "edit": "Edit",
+    "edit": "تعديل",
     "file": "ملف",
     "folder": "مجلّد",
     "hideDotfiles": "إخفاء dotfiles",
diff --git a/frontend/src/i18n/en_GB.json b/frontend/src/i18n/en_GB.json
index 9a34ca68..f2c2addb 100644
--- a/frontend/src/i18n/en_GB.json
+++ b/frontend/src/i18n/en_GB.json
@@ -39,7 +39,7 @@
     "submit": "Submit",
     "switchView": "Switch view",
     "toggleSidebar": "Toggle sidebar",
-    "unarchive": "Unarchive",
+    "unarchive": "Extract",
     "update": "Update",
     "upload": "Upload"
   },
@@ -171,7 +171,7 @@
     "show": "Show",
     "size": "Size",
     "skipTrashMessage": "Skip trash bin and delete immediately",
-    "unarchive": "Unarchive",
+    "unarchive": "Extract",
     "unarchiveDestinationLocationMessage": "Select the destination:",
     "unarchiveFolderNameMessage": "Choose folder name:",
     "unarchiveMessage": "Choose the destination folder name:",