feat: add torrent download loading icon

kuoruan · Dec 25, 2023 · c8d7b67 · c8d7b67
1 parent 32fa53f
commit c8d7b67
Showing 1 changed file with 36 additions and 0 deletions.
diff --git a/src/components/TorrentDownloadItem.vue b/src/components/TorrentDownloadItem.vue
@@ -3,7 +3,12 @@
     nowrap="nowrap",
     align="center"
   )
+    span(
+      v-if="loading",
+      class="loading"
+    )
     a(
+      v-else,
       title="Torrent 下载",
       href="javascript:void(0);",
       class="download-arrow arrow-torrent",
@@ -29,13 +34,20 @@ export default {
       default: "",
     },
   },
+  data() {
+    return {
+      loading: false,
+    };
+  },
   methods: {
     getAndDownloadTorrent() {
       if (!this.detailLink) {
         this.$toast.display("无法获取下载链接。");
         return;
       }
 
+      this.loading = true;
+
       const _self = this;
 
       GM_xmlhttpRequest({
@@ -44,9 +56,11 @@ export default {
         timeout: 5000,
         context: { title: this.title },
         ontimeout: function () {
+          _self.loading = false;
           _self.$toast.display("下载超时，请重试！");
         },
         onerror: function () {
+          _self.loading = false;
           _self.$toast.display(`下载失败，请重试！`);
         },
         onload: function ({ context: { title = "" } = {}, responseText = "" }) {
@@ -65,6 +79,7 @@ export default {
 
             _self.downloadTorrent(url, `${matches[2] || title}.torrent`);
           } else {
+            _self.loading = false;
             _self.$toast.display("获取下载链接失败！");
           }
         },
@@ -79,9 +94,11 @@ export default {
         responseType: "blob",
         timeout: 5000,
         onerror: function () {
+          _self.loading = false;
           _self.$toast.display(`下载失败，请重试！`);
         },
         ontimeout: function () {
+          _self.loading = false;
           _self.$toast.display("下载超时，请重试！");
         },
         onload: function ({ response }) {
@@ -100,9 +117,28 @@ export default {
             _self.$el.removeChild(anchor);
             URL.revokeObjectURL(herf);
           }, 0);
+
+          _self.loading = false;
         },
       });
     },
   },
 };
 </script>
+
+<style lang="stylus" scoped>
+.loading
+  display: inline-block
+  border: 2px solid #DBDFE4
+  border-radius: 50%
+  border-top: 2px solid #075EA4
+  width: 12px
+  height: 12px
+  animation: spinner 2s linear infinite
+
+@keyframes spinner
+  0%
+    transform: rotate(0deg)
+  100%
+    transform: rotate(360deg)
+</style>