loader

pages/freemium/index.vue

@@ -14,11 +14,17 @@
               $t('add_event')
             }}</v-btn>
 
-            <v-tabs-window v-model="tab">
+            <v-tabs-window v-model="tab" >
               <v-tabs-window-item value="future">
-                <UiLoadingPanel
-                  v-if="statusUpcomingEvents == FETCHING_STATUS.PENDING"
-                />
+                <div v-if="statusUpcomingEvents == FETCHING_STATUS.PENDING">
+                  <v-col cols="12" class="loader">
+                    <v-skeleton-loader
+                      v-for="i in 5"
+                      class="mx-auto"
+                      type="avatar, subtitle"
+                    ></v-skeleton-loader>
+                  </v-col>
+                </div>
 
                 <span v-if="upcomingEvents?.items.length == 0" class="no_event">
                   {{ $t('no_future_event') }}
@@ -35,9 +41,15 @@
                 />
               </v-tabs-window-item>
               <v-tabs-window-item value="past">
-                <UiLoadingPanel
-                  v-if="statusPastEvents == FETCHING_STATUS.PENDING"
-                />
+                <div v-if="statusPastEvents == FETCHING_STATUS.PENDING">
+                  <v-col cols="12" class="loader">
+                    <v-skeleton-loader
+                      v-for="i in 5"
+                      class="mx-auto"
+                      type="avatar, subtitle"
+                    ></v-skeleton-loader>
+                  </v-col>
+                </div>
                 <span v-if="pastEvents?.items.length == 0" class="no_event">
                   {{ $t('no_past_event') }}
                 </span>
@@ -283,4 +295,10 @@ onUnmounted(() => {
   font-size: 16px;
   display: block;
 }
+.loader{
+  height: 500px;
+  .v-skeleton-loader{
+    margin-bottom: 20px;
+  }
+}
 </style>