Use empty content page from core

aleksis/apps/chronos/frontend/components/substitutions/SubstitutionLoader.vue

+<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"
+          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>
+<script>
+export default {
+  name: "SubstitutionLoader",
+};
+</script>

aleksis/apps/chronos/frontend/components/substitutions/SubstitutionOverview.vue

 <script setup>
 import SubstitutionCard from "./SubstitutionCard.vue";
+import SubstitutionLoader from "./SubstitutionLoader.vue";
 import InfiniteScrollingDateSortedCRUDIterator from "aleksis.core/components/generic/InfiniteScrollingDateSortedCRUDIterator.vue";
 import SubjectChip from "aleksis.apps.cursus/components/SubjectChip.vue";
 
@@ -25,6 +26,7 @@ import {
     :enable-edit="true"
     :elevated="false"
     :force-model-item-update="true"
+    empty-icon="mdi-account-multiple-check-outline"
     ref="iterator"
   >
     <template #additionalActions="{ attrs, on }">
@@ -82,31 +84,7 @@ import {
     </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>
+      <substitution-loader />
     </template>
   </infinite-scrolling-date-sorted-c-r-u-d-iterator>
 </template>