Resolve "Loading animation for timetable object select on left side of timetables"

Closes #263 (closed)

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

 <script>
 import timetableTypes from "./timetableTypes";
+import Mascot from "aleksis.core/components/generic/mascot/Mascot.vue";
 
 export default {
   name: "SelectTimetable",
+  components: {
+    Mascot,
+  },
   props: {
     value: {
       type: Object,
@@ -13,6 +17,16 @@ export default {
       type: Array,
       required: true,
     },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    limitHeight: {
+      default: false,
+      required: false,
+      type: Boolean,
+    },
   },
   data() {
     return {
@@ -49,6 +63,7 @@ export default {
       <!-- Search field for timetables -->
       <v-text-field
         search
+        dense
         filled
         rounded
         clearable
@@ -57,11 +72,11 @@ export default {
         :placeholder="$t('chronos.timetable.search')"
         prepend-inner-icon="mdi-magnify"
         hide-details="auto"
-        class="mb-2"
+        class="mb-3"
       />
 
       <!-- Filter by timetable types -->
-      <v-btn-toggle v-model="selectedType" dense block class="d-flex">
+      <v-btn-toggle v-model="selectedType" dense block class="d-flex" mandatory>
         <v-btn
           v-for="type in types"
           :key="type.id"
@@ -80,6 +95,10 @@ export default {
       :search="search"
       single-expand
       disable-pagination
+      hide-default-footer
+      :loading="loading"
+      :style="{ height: limitHeight ? '600px' : null }"
+      :class="{ 'overflow-auto': limitHeight }"
     >
       <template #default="{ items, isExpanded, expand }">
         <v-list class="scrollable-list">
@@ -107,9 +126,23 @@ export default {
         </v-list>
       </template>
       <template #loading>
-        <v-skeleton-loader
-          type="list-item-avatar,list-item-avatar,list-item-avatar"
-        />
+        <v-skeleton-loader type="list-item-avatar@10" />
+      </template>
+      <template #no-results>
+        <div class="d-flex flex-column align-center justify-center">
+          <mascot type="searching" width="33%" min-width="250px" />
+          <div class="mb-2">
+            {{ $t("$vuetify.dataIterator.noResultsText") }}
+          </div>
+        </div>
+      </template>
+      <template #no-data>
+        <div class="d-flex flex-column align-center justify-center">
+          <mascot type="ready_for_items" width="33%" min-width="250px" />
+          <div class="mb-2">
+            {{ $t("chronos.timetable.no_timetables_in_term") }}
+          </div>
+        </div>
       </template>
     </v-data-iterator>
   </div>