Add loading spinner to new activity page

client/src/components/ui/LoadingMessage.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import LoadingSpinner from '@/components/ui/loadingSpinner.vue';
+import LoadingSpinner from '@/components/ui/LoadingSpinner.vue';
 </script>
 
 <style scoped lang="scss">

client/src/components/ui/LoadingSpinner.vue

@@ -1,6 +1,14 @@
-
 <template>
-<div class="loading-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+  <div class="loading-spinner">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
 </template>
 
 <style scoped lang="scss">
@@ -21,7 +29,7 @@
   }
 
   div:after {
-    content: " ";
+    content: ' ';
     display: block;
     position: absolute;
     width: var(--calculated-dot-size);
@@ -53,33 +61,26 @@
     animation-delay: -0.108s;
   }
 
-
   div:nth-child(4) {
     animation-delay: -0.144s;
   }
 
-
   div:nth-child(5) {
     animation-delay: -0.18s;
   }
 
-
   div:nth-child(6) {
     animation-delay: -0.216s;
   }
 
-
-
   div:nth-child(7) {
     animation-delay: -0.252s;
   }
 
-
   div:nth-child(8) {
     animation-delay: -0.288s;
   }
 
-
   div:nth-child(1):after {
     top: calc(var(--spinner-size, 80px) * 0.7875);
     left: calc(var(--spinner-size, 80px) * 0.7875);
@@ -128,5 +129,4 @@
     transform: rotate(360deg);
   }
 }
-
 </style>

client/src/pages/activity.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="activity">
     <h1 class="activity__heading">Meine Aktivitäten</h1>
+    <loading-message v-if="loading">Aktivitäten werden geladen</loading-message>
+    <template v-else>
       <div class="activity__categories">
         <a
           class="activity__category default-link"
@@ -93,6 +95,7 @@
           Übung: {{ item.survey.title }}
         </activity-list>
       </div>
+    </template>
   </div>
 </template>
 
@@ -102,6 +105,7 @@ import { useQuery } from '@vue/apollo-composable';
 import { ref, computed } from 'vue';
 import ActivityList from '@/components/profile/ActivityList.vue';
 import InstrumentActivityList from '@/components/profile/InstrumentActivityList.vue';
+import LoadingMessage from '@/components/ui/LoadingMessage.vue';
 import { TopicNode } from '@/__generated__/graphql';
 
 const HIGHLIGHTS = 'highlights';
@@ -112,7 +116,7 @@ const SURVEYS = 'surveys';
 const selectedCategory = ref(HIGHLIGHTS);
 
 // todo: use fragments to simplify cache updates
-const { result } = useQuery(
+const { result, loading } = useQuery(
   graphql(`
     query MyActivitiesQuery {
       myActivities {