From 7e3b5d0a904237887149ce90efb5e8d1380fbf7f Mon Sep 17 00:00:00 2001
From: Hangzhi Yu <hangzhi@protonmail.com>
Date: Sat, 27 Apr 2024 19:10:01 +0200
Subject: [PATCH] Add skeleton loaders
---
.../components/SubstitutionOverview.vue | 28 +++++++++++++++++++
1 file changed, 28 insertions(+)
diff --git a/aleksis/apps/chronos/frontend/components/SubstitutionOverview.vue b/aleksis/apps/chronos/frontend/components/SubstitutionOverview.vue
index 3e7aae59..59b5a12b 100644
--- a/aleksis/apps/chronos/frontend/components/SubstitutionOverview.vue
+++ b/aleksis/apps/chronos/frontend/components/SubstitutionOverview.vue
@@ -73,6 +73,34 @@ import dateSortedIteratorMixin from "../mixins/dateSortedIteratorMixin.js";
:gql-patch-mutation="gqlPatchMutation"
/>
</template>
+
+ <template #itemLoader>
+ <v-card class="my-2 full-width">
+ <div class="full-width d-flex flex-column align-stretch flex-md-row">
+ <v-card-text>
+ <v-skeleton-loader
+ type="avatar, heading, chip"
+ class="d-flex full-width align-center gap"
+ height="100%"
+ />
+ </v-card-text>
+ <v-card-text>
+ <v-skeleton-loader
+ type="heading"
+ class="d-flex full-width align-center gap"
+ height="100%"
+ />
+ </v-card-text>
+ <v-card-text>
+ <v-skeleton-loader
+ type="button"
+ class="d-flex full-width align-center justify-end gap"
+ height="100%"
+ />
+ </v-card-text>
+ </div>
+ </v-card>
+ </template>
</infinite-scrolling-date-sorted-c-r-u-d-iterator>
</template>
--
GitLab