diff --git a/src/store/modules/alarm.ts b/src/store/modules/alarm.ts
index 20a6cabe..c6d2fad6 100644
--- a/src/store/modules/alarm.ts
+++ b/src/store/modules/alarm.ts
@@ -36,7 +36,9 @@ export const alarmStore = defineStore({
   }),
   actions: {
     async getAlarms(params: Recordable) {
+      this.loading = true;
       const res: AxiosResponse = await graphql.query("queryAlarms").params(params);
+      this.loading = false;
       if (res.data.errors) {
         return res.data;
       }
diff --git a/src/views/alarm/Content.vue b/src/views/alarm/Content.vue
index 352d4d55..0a8988ae 100644
--- a/src/views/alarm/Content.vue
+++ b/src/views/alarm/Content.vue
@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div class="timeline-table clear">
+  <div class="timeline-table clear" v-loading="alarmStore.loading">
     <div v-for="(i, index) in alarmStore.alarms" :key="index" class="clear timeline-item">
       <div class="g-sm-3 grey sm hide-xs time-line tr">
         {{ dateFormat(parseInt(i.startTime)) }}