From 13c28933a31f35bf936e5a877f930667cc960836 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Thu, 29 Feb 2024 14:55:50 +0100
Subject: [PATCH] Extract coursebook skeleton loader into separate component
---
.../frontend/components/Coursebook.vue | 39 ++-----------------
.../frontend/components/CoursebookLoader.vue | 22 +++++++++++
.../documentation/DocumentationLoader.vue | 32 +++++++++++++++
3 files changed, 57 insertions(+), 36 deletions(-)
create mode 100644 aleksis/apps/alsijil/frontend/components/CoursebookLoader.vue
create mode 100644 aleksis/apps/alsijil/frontend/components/documentation/DocumentationLoader.vue
diff --git a/aleksis/apps/alsijil/frontend/components/Coursebook.vue b/aleksis/apps/alsijil/frontend/components/Coursebook.vue
index 658a97e6a..e80d0fdf2 100644
--- a/aleksis/apps/alsijil/frontend/components/Coursebook.vue
+++ b/aleksis/apps/alsijil/frontend/components/Coursebook.vue
@@ -46,42 +46,7 @@
</v-list-item>
</template>
<template #loading>
- <v-list-item v-for="_ in 10">
- <v-list-item-content>
- <v-list-item-title>
- <v-skeleton-loader type="heading"/>
- </v-list-item-title>
- <v-list max-width="100%">
- <v-list-item v-for="_ in 5">
- <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@2"
- class="d-flex full-width align-center gap"
- height="100%"
- />
- </v-card-text>
- <v-card-text>
- <v-skeleton-loader
- type="chip@3"
- class="d-flex full-width align-center justify-end gap"
- height="100%"
- />
- </v-card-text>
- </div>
- </v-card>
- </v-list-item>
- </v-list>
- </v-list-item-content>
- </v-list-item>
+ <CoursebookLoader />
</template>
<template #no-data>
@@ -117,10 +82,12 @@ import {
coursesOfTeacher,
documentationsForCoursebook,
} from "./coursebook.graphql";
+import CoursebookLoader from "./CoursebookLoader.vue";
export default {
name: "Coursebook",
components: {
+ CoursebookLoader,
CRUDIterator,
DocumentationModal,
},
diff --git a/aleksis/apps/alsijil/frontend/components/CoursebookLoader.vue b/aleksis/apps/alsijil/frontend/components/CoursebookLoader.vue
new file mode 100644
index 000000000..de970f780
--- /dev/null
+++ b/aleksis/apps/alsijil/frontend/components/CoursebookLoader.vue
@@ -0,0 +1,22 @@
+<template>
+ <v-list-item v-for="_ in 10">
+ <v-list-item-content>
+ <v-list-item-title>
+ <v-skeleton-loader type="heading" />
+ </v-list-item-title>
+ <v-list max-width="100%">
+ <v-list-item v-for="_ in 5">
+ <DocumentationLoader />
+ </v-list-item>
+ </v-list>
+ </v-list-item-content>
+ </v-list-item>
+</template>
+<script>
+import DocumentationLoader from "./documentation/DocumentationLoader.vue";
+
+export default {
+ name: "CoursebookLoader",
+ components: { DocumentationLoader },
+};
+</script>
diff --git a/aleksis/apps/alsijil/frontend/components/documentation/DocumentationLoader.vue b/aleksis/apps/alsijil/frontend/components/documentation/DocumentationLoader.vue
new file mode 100644
index 000000000..ad326bc61
--- /dev/null
+++ b/aleksis/apps/alsijil/frontend/components/documentation/DocumentationLoader.vue
@@ -0,0 +1,32 @@
+<template>
+ <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@2"
+ class="d-flex full-width align-center gap"
+ height="100%"
+ />
+ </v-card-text>
+ <v-card-text>
+ <v-skeleton-loader
+ type="chip@3"
+ class="d-flex full-width align-center justify-end gap"
+ height="100%"
+ />
+ </v-card-text>
+ </div>
+ </v-card>
+</template>
+<script>
+export default {
+ name: "DocumentationLoader",
+};
+</script>
--
GitLab