update github card loading

src/assets/script/card/github.ts

@@ -15,21 +15,23 @@ type GithubRepo = {
 
 export const data = ref<GithubRepo[]>([]);
 
-let loading = false;
+export const loading = ref<boolean>(false);
 export function update() {
-  if (loading) return;
-  loading = true;
+  if (loading.value) return;
+  loading.value = true;
   axios.get("/github")
     .then((res) => {
       data.value = res.data.data;
       data.value.forEach((repo: GithubRepo) => {
         repo.stars = DecimalConvert(Number(repo.stars));
       });
 
-      loading = false;
+      loading.value = false;
     })
     .catch((e) => {
       console.debug(e);
-      loading = false;
+      loading.value = false;
     })
 }
+
+update();

src/assets/script/utils/service.ts

@@ -2,7 +2,7 @@
 import { useRegisterSW } from "virtual:pwa-register/vue";
 import { ref, watch } from "vue";
 
-export const version = "1.11.1";
+export const version = "1.11.2";
 
 export const updater = ref<boolean>(false);
 

src/components/ToolBox.vue

@@ -11,7 +11,6 @@ import Window from "@/components/compositions/Window.vue";
 import CardContainer from "@/components/CardContainer.vue";
 import Tool from "@/components/compositions/Tool.vue";
 import Cover from "@/components/compositions/Cover.vue";
-import {set} from "@/assets/script/engine";
 import {registerScrollableComponent} from "@/assets/script/utils/scroll";
 
 const { t } = useI18n();

src/components/cards/GithubCard.vue

@@ -1,21 +1,23 @@
 <script setup lang="ts">
-import {data, update} from "@/assets/script/card/github";
+import { data, update, loading } from "@/assets/script/card/github";
 import Star from "@/components/icons/star.vue";
 import {registerScrollableComponent} from "@/assets/script/utils/scroll";
 import {ref} from "vue";
+import Loader from "@/components/icons/loader.vue";
 
 const element = ref<HTMLElement | null>(null);
 registerScrollableComponent(element, true);
-
-update();
 </script>
 
 <template>
   <div class="card">
     <div class="github-top">
       <span class="github-name">GitHub</span>
       <span style="flex-grow: 1" />
-      <span class="github-explore" @click="update">Explore</span>
+      <span class="github-explore" @click="update">
+        <loader v-if="loading" />
+        <template v-else>Explore</template>
+      </span>
     </div>
     <div class="github-content" ref="element">
       <template v-for="(repo, idx) in data" :key="idx">
@@ -155,6 +157,23 @@ update();
   transition: .3s;
 }
 
+@keyframes ScrollAnimation {
+  from {
+    rotate: 0deg;
+  }
+  to {
+    rotate: 360deg;
+  }
+}
+
+.github-explore svg {
+  width: 18px;
+  height: 18px;
+  margin: 1px 4px -5px;
+  fill: #fff;
+  animation: ScrollAnimation 1s linear infinite;
+}
+
 .github-explore:hover {
   background: rgba(56, 140, 255, 1);
 }

src/components/icons/loader.vue

@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 11H7.101l.001-.009a4.956 4.956 0 0 1 .752-1.787 5.054 5.054 0 0 1 2.2-1.811c.302-.128.617-.226.938-.291a5.078 5.078 0 0 1 2.018 0 4.978 4.978 0 0 1 2.525 1.361l1.416-1.412a7.036 7.036 0 0 0-2.224-1.501 6.921 6.921 0 0 0-1.315-.408 7.079 7.079 0 0 0-2.819 0 6.94 6.94 0 0 0-1.316.409 7.04 7.04 0 0 0-3.08 2.534 6.978 6.978 0 0 0-1.054 2.505c-.028.135-.043.273-.063.41H2l4 4 4-4zm4 2h2.899l-.001.008a4.976 4.976 0 0 1-2.103 3.138 4.943 4.943 0 0 1-1.787.752 5.073 5.073 0 0 1-2.017 0 4.956 4.956 0 0 1-1.787-.752 5.072 5.072 0 0 1-.74-.61L7.05 16.95a7.032 7.032 0 0 0 2.225 1.5c.424.18.867.317 1.315.408a7.07 7.07 0 0 0 2.818 0 7.031 7.031 0 0 0 4.395-2.945 6.974 6.974 0 0 0 1.053-2.503c.027-.135.043-.273.063-.41H22l-4-4-4 4z"></path></svg>
+</template>