From 4dc02f783a6fe82d7482d9e507e7c2885c957c9a Mon Sep 17 00:00:00 2001
From: Alireza Ahmadi <alireza7@gmail.com>
Date: Sat, 18 Jan 2025 16:04:00 +0100
Subject: [PATCH] skeleton for stats

---
 frontend/src/layouts/modals/Stats.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/layouts/modals/Stats.vue b/frontend/src/layouts/modals/Stats.vue
index 6a4a7e4..0edcc69 100644
--- a/frontend/src/layouts/modals/Stats.vue
+++ b/frontend/src/layouts/modals/Stats.vue
@@ -18,9 +18,17 @@
         <v-radio-group v-model="limit" @change="loadData" density="compact" :loading="loading" inline hide-details>
           <v-radio v-for="p in periods" :label="p.title" :value="p.value"></v-radio>
         </v-radio-group>
-        <v-container id="container" style="height:40vh;">
-          <v-alert :text="$t('noData')" type="warning" variant="outlined" v-if="alert"></v-alert>
-          <Line v-if="loaded" :data="usage" :options="<any>options" />
+          <v-container id="container" style="height:40vh;">
+            <v-skeleton-loader
+            class="mx-auto border"
+            width="95%"
+            type="image"
+            v-if="loading"
+          ></v-skeleton-loader>
+          <template v-else>
+            <v-alert :text="$t('noData')" type="warning" variant="outlined" v-if="alert"></v-alert>
+            <Line v-if="loaded" :data="usage" :options="<any>options" />
+          </template>
         </v-container>
       </v-card-text>
     </v-card>