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,
@@ -18,6 +22,11 @@ export default {
       required: false,
       default: false,
     },
+    limitHeight: {
+      default: false,
+      required: false,
+      type: Boolean,
+    },
   },
   data() {
     return {
@@ -54,6 +63,7 @@ export default {
       <!-- Search field for timetables -->
       <v-text-field
         search
+        dense
         filled
         rounded
         clearable
@@ -62,7 +72,7 @@ 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 -->
@@ -87,6 +97,8 @@ export default {
       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">
@@ -118,6 +130,14 @@ export default {
           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>
     </v-data-iterator>
   </div>
 </template>