diff --git a/src/components/Loading.vue b/src/components/Loading.vue
new file mode 100644
index 0000000..94dfb77
--- /dev/null
+++ b/src/components/Loading.vue
@@ -0,0 +1,22 @@
+<template>
+    <div
+    class="d-flex text-center"
+    style="
+      width: 100%;
+      height: 60%;
+      justify-content: center;
+      align-items: center;
+    "
+  >
+    <div>
+      <div>
+        <v-progress-circular
+          indeterminate
+        ></v-progress-circular>
+      </div>
+      <div class="mt-5">
+        <p>请稍后...</p>
+      </div>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/views/libraries/List.vue b/src/views/libraries/List.vue
index f74044b..70ce907 100644
--- a/src/views/libraries/List.vue
+++ b/src/views/libraries/List.vue
@@ -1,5 +1,8 @@
 <template>
-  <v-container v-if="libraries.Data">
+  <LoadingComponent v-if="loading">
+
+  </LoadingComponent>
+  <v-container v-else>
     <h1>资料库</h1>
 
     {{ selected_ids }}
@@ -53,17 +56,22 @@
 
 <script setup>
 import { library } from "@/plugins/api";
-import { watch } from "vue";
 import { ref } from "vue";
+import LoadingComponent from "@/components/Loading.vue";
+
+const loading = ref(false)
 
 const page = ref(1);
 const libraries = ref({});
 
 const load = () => {
+  loading.value = true
   library.librariesGet(page.value).then((r) => {
     libraries.value = r.data;
     console.log(r.data.Data);
-  });
+  }).finally(() => {
+    loading.value = false
+  })
 };
 
 load();