Merge pull request #27 from RockChinQ/feat/loading-animation

Feat: add animation for refresh btn
RockChinQ · Oct 9, 2023 · 92ca452 · 92ca452
2 parents 0d00b2b + 177533b
commit 92ca452
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/web/src/components/APIKey.vue b/web/src/components/APIKey.vue
@@ -12,7 +12,10 @@ const keyContainerWidth = ref("1000px");
 
 const keyList = ref([]);
 
+const loading = ref(false);
+
 function refreshKeyList() {
+    loading.value = true;
     axios
         .get("/api/key/list")
         .then((res) => {
@@ -28,13 +31,15 @@ function refreshKeyList() {
                 type: "success",
                 duration: 1000,
             });
+            loading.value = false;
         })
         .catch((err) => {
             console.log(err);
             ElNotification({
                 message: "Failed to refresh key list.",
                 type: "error",
             });
+            loading.value = false;
         });
 }
 
@@ -168,7 +173,7 @@ function deleteKeyConfirmed(key_id){
     <div id="overall_container">
         <div id="key_operation_bar" :style="{ width: keyContainerWidth}">
             <el-button type="success" :icon="DocumentAdd" @click="createKey">Add</el-button>
-            <el-button type="success" :icon="Refresh" @click="refreshKeyList">Refresh</el-button>
+            <el-button v-loading="loading" element-loading-svg-view-box="-25, -25, 100, 100" type="success" :icon="Refresh" @click="refreshKeyList">Refresh</el-button>
         </div>
         <div id="key_list_container" :style="{ width: keyContainerWidth }">
             <div class="key">

diff --git a/web/src/components/Channel.vue b/web/src/components/Channel.vue
@@ -15,9 +15,13 @@ import { ElNotification } from 'element-plus'
 
 const channelList = ref([]);
 
+const loading = ref(false);
+
 function refreshChannelList() {
+    loading.value = true;
     axios.get('/api/channel/list')
         .then(res => {
+            loading.value = false;
             console.log(res);
             if (res.data.code != 0) {
                 ElNotification({
@@ -35,6 +39,7 @@ function refreshChannelList() {
             }
         })
         .catch(err => {
+            loading.value = false;
             console.log(err);
             ElNotification({
                 message: 'Failed to refresh channel list.',
@@ -428,7 +433,7 @@ function applyChannelDetails() {
     <div id="overall_container">
         <div id="channel_operation_bar" :style="{ width: channelContainerWidth }">
             <el-button type="success" :icon="DocumentAdd" @click="showCreateChannelDialog">Add</el-button>
-            <el-button type="success" :icon="Refresh" @click="refreshChannelList">Refresh</el-button>
+            <el-button type="success" v-loading="loading" element-loading-svg-view-box="-25, -25, 100, 100" :icon="Refresh" @click="refreshChannelList">Refresh</el-button>
             <el-button type="success" :icon="Timer" @click="testAllChannelLatancy">Test All</el-button>
         </div>
         <div id="channel_list_container" :style="{ width: channelContainerWidth }">

diff --git a/web/src/components/Log.vue b/web/src/components/Log.vue
@@ -12,16 +12,18 @@ const page_count = ref(0);
 
 const keyContainerWidth = ref("1000px");
 
+const loading = ref(false);
+
 function refreshLogs(){
-    console.log("refreshing logs")
+    loading.value = true;
     axios.get("/api/log/list", {
         params: {
             capacity: 10,
             page: page.value
         }
     }).then((response) => {
         console.log(response.data);
-
+        loading.value = false;
         if (response.data.code === 0){
             page_count.value = response.data.data.page_count;
 
@@ -40,6 +42,7 @@ function refreshLogs(){
         }
     }).catch(
     (err) => {
+        loading.value = false;
         console.log(err);
         ElNotification({
             message: "Failed to fetch logs.",
@@ -74,7 +77,7 @@ onresize = () => {
     <div id="table_container" background :style="{ width: keyContainerWidth}">
         <el-pagination id="pages" layout="prev, pager, next" :page-count="page_count" @current-change="changePage" />
         <span id="operation_bar">
-            <el-button type="success" @click="refreshLogs()">Refresh</el-button>
+            <el-button v-loading="loading" element-loading-svg-view-box="-25, -25, 100, 100" type="success" @click="refreshLogs()">Refresh</el-button>
         </span>
         <el-table id="log_table" :data="logs" stripe >
             <el-table-column prop="id" label="ID" width="80" />