loading indicator (#336)

swuecho · Jun 4, 2023 · 735d19e · 735d19e
1 parent 1c3294c
commit 735d19e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/web/src/views/admin/model/per_mode_ratelimit/index.vue b/web/src/views/admin/model/per_mode_ratelimit/index.vue
@@ -18,13 +18,15 @@ interface RowData {
 const dialogVisible = ref(false)
 
 const data = ref<RowData[]>([])
+const loading = ref(true)
 
 onMounted(async () => {
   refreshData()
 })
 
 async function refreshData() {
   data.value = await ListUserChatModelPrivilege()
+  loading.value = false
 }
 
 function UpdateRow(row: RowData) {
@@ -123,6 +125,6 @@ async function newRowAdded() {
         </span>
       </HoverButton>
     </div>
-    <NDataTable :columns="columns" :data="data" />
+    <NDataTable :columns="columns" :data="data" :loading="loading" />
   </div>
 </template>
diff --git a/web/src/views/admin/model/system_model/index.vue b/web/src/views/admin/model/system_model/index.vue
@@ -11,13 +11,15 @@ const ms_ui = useMessage()
 
 const data = ref<Chat.ChatModel[]>([])
 const dialogVisible = ref(false)
+const loading = ref(true)
 
 onMounted(async () => {
   refreshData()
 })
 
 async function refreshData() {
   data.value = await fetchChatModel()
+  loading.value = false
 }
 
 function UpdateRow(row: Chat.ChatModel) {
@@ -227,6 +229,6 @@ function checkNoRowIsDefaultTrue(v: boolean) {
         </span>
       </HoverButton>
     </div>
-    <NDataTable :columns="columns" :data="data" />
+    <NDataTable :columns="columns" :data="data" :loading="loading" />
   </div>
 </template>
diff --git a/web/src/views/admin/user/index.vue b/web/src/views/admin/user/index.vue
@@ -24,6 +24,7 @@ interface UserData {
   rateLimit: string
 }
 const tableData = ref<UserData[]>([])
+const loading = ref<boolean>(true)
 
 const columns = [
   {
@@ -133,6 +134,7 @@ const pagination = reactive({
 })
 
 async function fetchData() {
+  loading.value = true
   try {
     const { data, total } = await GetUserData(pagination.page, pagination.pageSize)
     tableData.value = data
@@ -143,6 +145,8 @@ async function fetchData() {
       ms_ui.error(t(err.response.data.message))
     else
       ms_ui.error(t(err.response.data.message))
+  } finally {
+    loading.value = false
   }
 }
 
@@ -167,6 +171,6 @@ async function handleRefresh() {
         </span>
       </HoverButton>
     </div>
-    <NDataTable remote :data="tableData" :columns="columns" :pagination="pagination" />
+    <NDataTable :loading="loading" remote :data="tableData" :columns="columns" :pagination="pagination" />
   </div>
 </template>