Pass loading state to selectable timetable list

aleksis/apps/chronos/frontend/components/SelectTimetable.vue

@@ -13,6 +13,11 @@ export default {
       type: Array,
       required: true,
     },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -80,6 +85,7 @@ export default {
       :search="search"
       single-expand
       disable-pagination
+      :loading="loading"
     >
       <template #default="{ items, isExpanded, expand }">
         <v-list class="scrollable-list">
@@ -108,7 +114,7 @@ export default {
       </template>
       <template #loading>
         <v-skeleton-loader
-          type="list-item-avatar,list-item-avatar,list-item-avatar"
+          type="list-item-avatar@10"
         />
       </template>
     </v-data-iterator>

aleksis/apps/chronos/frontend/components/TimetableWrapper.vue

@@ -134,6 +134,7 @@ export default {
           <select-timetable
             v-model="selected"
             @input="selectDialog = false"
+            :loading="$apollo.queries.availableTimetables.loading"
             :available-timetables="availableTimetables"
           />
         </v-card>
@@ -148,6 +149,7 @@ export default {
         <v-card>
           <select-timetable
             v-model="selected"
+            :loading="$apollo.queries.availableTimetables.loading"
             :available-timetables="availableTimetables"
           />
         </v-card>