Move the loading placeholders inside the sub-cards

aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsAbsencesCard.vue

 <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>

aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsExtraMarksCard.vue

 <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>

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,

aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsPersonalNotesList.vue

 <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],

aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsTardinessCard.vue

 <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>