feat: modify loading interface for MirrorList #9

nju-lug · Dec 5, 2021 · 4b4e2fc · 4b4e2fc
1 parent 114d2f8
commit 4b4e2fc
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/src/components/MirrorList.vue b/src/components/MirrorList.vue
@@ -73,6 +73,7 @@ function StatusTag({ data }: { data: SyncEntry }) {
 }
 
 const filter = ref('');
+const loading = ref(true);
 const extraColumns = computed(() => store.state.isMobile ? [] : [
   {
     title: 'Size',
@@ -114,16 +115,20 @@ const columns = reactive([
 ] as DataTableColumn<SyncEntry>[]);
 
 onMounted(() => fetchEntries().then(
-  res => entries.value = res.sort(
-    (a, b) => a.name.localeCompare(b.name)
-  ),
+  res => {
+    entries.value = res.sort(
+      (a, b) => a.name.localeCompare(b.name)
+    );
+    loading.value = false;
+  },
   err => message.error(err.message)
 ));
 </script>
 
 <template>
   <n-data-table
     size="small"
+    :loading="loading"
     :columns="columns.concat(extraColumns)"
     :data="entries"
     max-height="calc(100vh - 12.125rem)"