From 9f2484b95c28da36df6695f6ea956000e5280081 Mon Sep 17 00:00:00 2001
From: Michael Bauer <michael-bauer@posteo.de>
Date: Fri, 31 May 2024 16:27:58 +0200
Subject: [PATCH] Move the loading placeholders inside the sub-cards

---
 .../statistics/StatisticsAbsencesCard.vue     | 10 +++++-
 .../statistics/StatisticsExtraMarksCard.vue   | 10 +++++-
 .../statistics/StatisticsForPersonCard.vue    | 34 ++++++++++---------
 .../StatisticsPersonalNotesList.vue           | 12 ++++++-
 .../statistics/StatisticsTardinessCard.vue    | 10 +++++-
 5 files changed, 56 insertions(+), 20 deletions(-)

diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsAbsencesCard.vue b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsAbsencesCard.vue
index 780a3b732..0c7fda2a4 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsAbsencesCard.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsAbsencesCard.vue
@@ -1,5 +1,8 @@
 <template>
-  <v-card>
+  <v-skeleton-loader v-if="loading"
+    type="card"
+  />
+  <v-card v-else>
     <v-card-text class="d-flex flex-column" style="gap: .5em">
       <absence-reason-chip
         v-for="absenceReason in absenceReasons"
@@ -23,6 +26,11 @@ export default {
       type: Array,
       required: true,
     },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
 };
 </script>
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsExtraMarksCard.vue b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsExtraMarksCard.vue
index dba9b73e2..2473b600d 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsExtraMarksCard.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsExtraMarksCard.vue
@@ -1,5 +1,8 @@
 <template>
-  <v-card>
+  <v-skeleton-loader v-if="loading"
+    type="card"
+  />
+  <v-card v-else>
     <v-card-text class="d-flex flex-column" style="gap: .5em">
       <counter-chip
         v-for="extraMark in extraMarks"
@@ -27,6 +30,11 @@ export default {
       type: Array,
       required: true,
     },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
 };
 </script>
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonCard.vue b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonCard.vue
index 7450f2bd3..800d30907 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonCard.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonCard.vue
@@ -19,34 +19,26 @@
 
     <v-card-text>
       <div class="d-flex mb-4" style="gap: 1em">
-        <v-skeleton-loader v-if="$apollo.loading"
-          type="card"
-        />
-        <statistics-absences-card v-else
+        <statistics-absences-card
           class="flex-grow-1"
           :absence-reasons="statistics.absenceReasons"
+          :loading="$apollo.loading"
         />
-        <v-skeleton-loader v-if="$apollo.loading"
-          type="card"
-        />
-        <statistics-tardiness-card v-else
+        <statistics-tardiness-card
           class="flex-grow-1"
           :tardiness-sum="statistics.tardinessSum"
           :tardiness-count="statistics.tardinessCount"
+          :loading="$apollo.loading"
         />
-        <v-skeleton-loader v-if="$apollo.loading"
-          type="card"
-        />
-        <statistics-extra-marks-card v-else
+        <statistics-extra-marks-card
           class="flex-grow-1"
           :extra-marks="statistics.extraMarks"
+          :loading="$apollo.loading"
         />
       </div>
-      <v-skeleton-loader v-if="compact && $apollo.loading"
-        type="card"
-      />
-      <statistics-personal-notes-list v-else-if="compact"
+      <statistics-personal-notes-list v-if="compact"
         class="flex-grow-1"
+        :loading="$apollo.loading"
       />
     </v-card-text>
   </v-card>
@@ -79,6 +71,16 @@ export default {
       default: true,
     },
   },
+  data() {
+    return {
+      statistics: {
+        absenceReasons: [],
+        tardinessSum: 0,
+        tardinessCount: 0,
+        extraMarks: [],
+      },
+    };
+  },
   apollo: {
     statistics: {
       query: statisticsByPerson,
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsPersonalNotesList.vue b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsPersonalNotesList.vue
index b2860cbe0..37edd7b5d 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsPersonalNotesList.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsPersonalNotesList.vue
@@ -1,5 +1,8 @@
 <template>
-  <v-card>
+  <v-skeleton-loader v-if="loading"
+    type="card"
+  />
+  <v-card v-else>
     <v-virtual-scroll
         :items="personalNotes"
         height="100"
@@ -33,6 +36,13 @@
 <script>
 export default {
   name: "StatisticsPersonalNotesList",
+  props: {
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
   data() {
     return {
       personalNotes: [1, 2, 3, 4],
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsTardinessCard.vue b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsTardinessCard.vue
index 39ad5e937..5374b6028 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsTardinessCard.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsTardinessCard.vue
@@ -1,5 +1,8 @@
 <template>
-  <v-card class="text-center">
+  <v-skeleton-loader v-if="loading"
+    type="card"
+  />
+  <v-card v-else class="text-center">
     <v-card-text>
       <div class="text-h2">
         {{ tardinessCount }}
@@ -27,6 +30,11 @@ export default {
       type: Number,
       required: true,
     },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
 };
 </script>
-- 
GitLab