Show laoding animation in main coursebook view

aleksis/apps/alsijil/frontend/components/Coursebook.vue

 <template>
   <c-r-u-d-iterator
-    i18n-key="coursebook"
-    :gql-query="gqlQuery"
-    :gql-additional-query-args="gqlQueryArgs"
-    :enable-create="false"
-    :enable-edit="false"
-    @lastQuery="lastQuery = $event"
+      i18n-key="coursebook"
+      :gql-query="gqlQuery"
+      :gql-additional-query-args="gqlQueryArgs"
+      :enable-create="false"
+      :enable-edit="false"
+      @lastQuery="lastQuery = $event"
+      ref="iterator"
   >
     <template #additionalActions="{ attrs, on }">
       <v-autocomplete
-        :items="selectable"
-        item-text="name"
-        clearable
-        return-object
-        filled
-        dense
-        hide-details
-        @input="changeSelection"
+          :items="selectable"
+          item-text="name"
+          clearable
+          return-object
+          filled
+          dense
+          hide-details
+          :loading="selectLoading"
+          @input="changeSelection"
       />
     </template>
     <template #default="{ items }">
-      <v-list-item v-for="day in groupDocsByDay(items)" two-line>
-        <v-list-item-content>
-          <v-list-item-title>{{ $d(day[0], "short") }}</v-list-item-title>
-          <v-list max-width="100%">
-            <v-list-item v-for="doc in day.slice(1)">
-              <documentation-modal
-                :documentation="doc"
-                :affected-query="lastQuery"
-              />
-            </v-list-item>
-          </v-list>
-        </v-list-item-content>
-      </v-list-item>
+      <template v-if="!$refs.iterator.loading">
+        <v-list-item v-for="day in groupDocsByDay(items)" two-line>
+          <v-list-item-content>
+            <v-list-item-title>{{ $d(day[0], "short") }}</v-list-item-title>
+            <v-list max-width="100%">
+              <v-list-item v-for="doc in day.slice(1)">
+                <documentation-modal
+                  :documentation="doc"
+                  :affected-query="lastQuery"
+                />
+              </v-list-item>
+            </v-list>
+          </v-list-item-content>
+        </v-list-item>
+      </template>
+      <template v-else>
+        <v-list-item v-for="_ in 10">
+          <v-list-item-content>
+            <v-list-item-title>
+              <v-skeleton-loader type="heading"/>
+            </v-list-item-title>
+            <v-list max-width="100%">
+              <v-list-item v-for="_ in 5">
+                <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@2"
+                        class="d-flex full-width align-center gap"
+                        height="100%"
+                      />
+                    </v-card-text>
+                    <v-card-text>
+                      <v-skeleton-loader
+                        type="chip@3"
+                        class="d-flex full-width align-center justify-end gap"
+                        height="100%"
+                      />
+                    </v-card-text>
+                  </div>
+                </v-card>
+              </v-list-item>
+            </v-list>
+          </v-list-item-content>
+        </v-list-item>
+      </template>
     </template>
   </c-r-u-d-iterator>
 </template>
@@ -114,6 +156,9 @@ export default {
         ...this.courses.map((course) => ({ type: "course", ...course })),
       ];
     },
+    selectLoading() {
+      return this.$apollo.queries.groups.loading || this.$apollo.queries.courses.loading;
+    }
   },
   methods: {
     changeSelection(selection) {