diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsAbsencesCard.vue b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsAbsencesCard.vue
index 780a3b7325f43f04517231e28cd92eec836a05e4..0c7fda2a44d68f6d7b7ce3a8ce095d171ced4a47 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 dba9b73e26ccb95547421a13ae4e29dab37b08c4..2473b600dbb3e40c0f71482ee587eb5dcf4b4dbb 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 7450f2bd3887762bc4494f3dbe047ff8b6ac1b41..800d3090752dd3c193ae70acfadc8e93d2bb1a85 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 b2860cbe0f5310ef5199f221f40627f96ab06656..37edd7b5da3578b97aeab9e585b272c956d17a84 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 39ad5e9374832d420e95fcefdaebc8615b329585..5374b602801b598543a4ef3258b8bfb4f4d471e0 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>