Add loading skeleton to instruments

client/src/components/instruments/InstrumentEntryBlank.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="instrument-entry">
+    <h4
+      class="instrument-entry__category"
+      data-cy="instrument-subheader"
+    >
+      ...
+    </h4>
+    <h3 class="instrument-entry__title">...</h3>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped lang="scss">
+@import 'styles/helpers';
+
+.instrument-entry {
+  padding: $medium-spacing;
+  margin-bottom: $medium-spacing;
+  border-radius: 8px;
+  background-color: $color-silver-light;
+
+  $root: &;
+
+  &__title {
+    @include heading-3;
+    margin-bottom: 0;
+    overflow-wrap: break-word;
+    color: $color-silver-light;
+  }
+
+  &__category {
+    @include sub-heading;
+    margin-bottom: $small-spacing;
+    color: $color-silver-light;
+  }
+}
+</style>

client/src/pages/instrumentOverview.vue

@@ -17,10 +17,12 @@
 
       <info-message
         class="instrument-overview__no-instruments"
-        v-if="instruments.length > 1 && filteredInstruments.length === 0"
+        v-if="instruments.length > 1 && filteredInstruments.length === 0 && !loading"
       >
         Für die ausgewählten Filtereinstellungen sind keine Einträge vorhanden
       </info-message>
+      <div v-if="loading"><instrument-entry-blank v-for="index in 10"></instrument-entry-blank></div>
+
       <router-link
         :to="{ name: 'instrument', params: { slug: instrument.slug } }"
         data-cy="instrument"
@@ -41,9 +43,11 @@ import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
 import FilterBar from '@/components/instruments/FilterBar.vue';
 import { graphql } from '@/__generated__';
 import InfoMessage from '@/components/ui/InfoMessage.vue';
+import InstrumentEntryBlank from '@/components/instruments/InstrumentEntryBlank.vue';
 
 export default {
   components: {
+    InstrumentEntryBlank,
     InfoMessage,
     FilterBar,
     InstrumentFilter,
@@ -54,6 +58,7 @@ export default {
     instruments: {
       query: INSTRUMENTS_QUERY,
       update(data) {
+        this.loading = false;
         return this.$getRidOfEdges(data).instruments;
       },
     },
@@ -94,6 +99,7 @@ export default {
       },
       searchText: '',
       me: { language: 'de' },
+      loading: true,
     };
   },