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);
@@ -31,55 +39,48 @@
     margin: calc(var(--calculated-dot-size) / -2) 0 0 calc(var(--calculated-dot-size) / -2);
   }
 
-   div:nth-child(1) {
+  div:nth-child(1) {
     animation-delay: -0.036s;
   }
 
-   div:nth-child(1):after {
+  div:nth-child(1):after {
     top: 63px;
     left: 63px;
   }
 
-   div:nth-child(2) {
+  div:nth-child(2) {
     animation-delay: -0.072s;
   }
 
-   div:nth-child(2):after {
+  div:nth-child(2):after {
     top: 68px;
     left: 56px;
   }
 
-   div:nth-child(3) {
+  div:nth-child(3) {
     animation-delay: -0.108s;
   }
 
-
+  div:nth-child(4) {
-   div:nth-child(4) {
     animation-delay: -0.144s;
   }
 
-
+  div:nth-child(5) {
-   div:nth-child(5) {
     animation-delay: -0.18s;
   }
 
-
+  div:nth-child(6) {
-   div:nth-child(6) {
     animation-delay: -0.216s;
   }
 
-
+  div:nth-child(7) {
-
-   div:nth-child(7) {
     animation-delay: -0.252s;
   }
 
-
+  div:nth-child(8) {
-   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,98 +1,101 @@
 <template>
   <div class="activity">
     <h1 class="activity__heading">Meine Aktivitäten</h1>
-    <div class="activity__categories">
+    <loading-message v-if="loading">Aktivitäten werden geladen</loading-message>
-      <a
+    <template v-else>
-        class="activity__category default-link"
+      <div class="activity__categories">
-        data-cy="activity-category"
+        <a
-        :class="{ 'activity__category--active': selectedCategory === HIGHLIGHTS }"
+          class="activity__category default-link"
-        @click="selectedCategory = HIGHLIGHTS"
+          data-cy="activity-category"
-        >Markierungen</a
+          :class="{ 'activity__category--active': selectedCategory === HIGHLIGHTS }"
-      >
+          @click="selectedCategory = HIGHLIGHTS"
-      <a
+          >Markierungen</a
-        class="activity__category default-link"
-        data-cy="activity-category"
-        :class="{ 'activity__category--active': selectedCategory === BOOKMARKS }"
-        @click="selectedCategory = BOOKMARKS"
-        >Lesezeichen</a
-      >
-      <a
-        class="activity__category default-link"
-        data-cy="activity-category"
-        :class="{ 'activity__category--active': selectedCategory === ASSIGNMENTS }"
-        @click="selectedCategory = ASSIGNMENTS"
-        >Ergebnisse</a
-      >
-      <a
-        class="activity__category default-link"
-        data-cy="activity-category"
-        :class="{ 'activity__category--active': selectedCategory === SURVEYS }"
-        @click="selectedCategory = SURVEYS"
-        >Übungen</a
-      >
-    </div>
-    <div class="activity__activities">
-      <instrument-activity-list
-        property="highlights"
-        :instruments="instruments"
-        v-if="selectedCategory === HIGHLIGHTS"
-        v-slot="{ item }"
-      >
-        <mark
-          class="highlight"
-          :class="[`highlight--${item?.color}`]"
-          >{{ item?.text }}</mark
         >
-        <div v-if="item.note">Notiz: {{ item.note.text }}</div>
+        <a
-      </instrument-activity-list>
+          class="activity__category default-link"
-      <activity-list
+          data-cy="activity-category"
-        :topics="highlightTopics"
+          :class="{ 'activity__category--active': selectedCategory === BOOKMARKS }"
-        property="myHighlights"
+          @click="selectedCategory = BOOKMARKS"
-        v-if="selectedCategory === HIGHLIGHTS"
+          >Lesezeichen</a
-        v-slot="{ item }"
-      >
-        <mark
-          class="highlight"
-          :class="[`highlight--${item?.color}`]"
-          >{{ item?.text }}</mark
         >
-        <div v-if="item.note">Notiz: {{ item.note.text }}</div>
+        <a
-      </activity-list>
+          class="activity__category default-link"
-      <instrument-activity-list
+          data-cy="activity-category"
-        property="bookmarks"
+          :class="{ 'activity__category--active': selectedCategory === ASSIGNMENTS }"
-        :instruments="instruments"
+          @click="selectedCategory = ASSIGNMENTS"
-        v-if="selectedCategory === BOOKMARKS"
+          >Ergebnisse</a
-        v-slot="{ item }"
+        >
-      >
+        <a
-        <div>Lesezeichen: {{ item.id }}</div>
+          class="activity__category default-link"
-        <div v-if="item.note">Notiz: {{ item.note.text }}</div>
+          data-cy="activity-category"
-      </instrument-activity-list>
+          :class="{ 'activity__category--active': selectedCategory === SURVEYS }"
-      <activity-list
+          @click="selectedCategory = SURVEYS"
-        :topics="bookmarkTopics"
+          >Übungen</a
-        property="myBookmarks"
+        >
-        v-if="selectedCategory === BOOKMARKS"
+      </div>
-        v-slot="{ item }"
+      <div class="activity__activities">
-      >
+        <instrument-activity-list
-        <div>Lesezeichen: {{ item.id }}</div>
+          property="highlights"
-        <div v-if="item.note">Notiz: {{ item.note.text }}</div>
+          :instruments="instruments"
-      </activity-list>
+          v-if="selectedCategory === HIGHLIGHTS"
-      <activity-list
+          v-slot="{ item }"
-        :topics="submissionsTopics"
+        >
-        property="mySubmissions"
+          <mark
-        v-if="selectedCategory === ASSIGNMENTS"
+            class="highlight"
-        v-slot="{ item }"
+            :class="[`highlight--${item?.color}`]"
-      >
+            >{{ item?.text }}</mark
-        Submission: {{ item.text }}
+          >
-      </activity-list>
+          <div v-if="item.note">Notiz: {{ item.note.text }}</div>
-      <activity-list
+        </instrument-activity-list>
-        :topics="answersTopics"
+        <activity-list
-        property="myAnswers"
+          :topics="highlightTopics"
-        v-if="selectedCategory === SURVEYS"
+          property="myHighlights"
-        v-slot="{ item }"
+          v-if="selectedCategory === HIGHLIGHTS"
-      >
+          v-slot="{ item }"
-        Übung: {{ item.survey.title }}
+        >
-      </activity-list>
+          <mark
-    </div>
+            class="highlight"
+            :class="[`highlight--${item?.color}`]"
+            >{{ item?.text }}</mark
+          >
+          <div v-if="item.note">Notiz: {{ item.note.text }}</div>
+        </activity-list>
+        <instrument-activity-list
+          property="bookmarks"
+          :instruments="instruments"
+          v-if="selectedCategory === BOOKMARKS"
+          v-slot="{ item }"
+        >
+          <div>Lesezeichen: {{ item.id }}</div>
+          <div v-if="item.note">Notiz: {{ item.note.text }}</div>
+        </instrument-activity-list>
+        <activity-list
+          :topics="bookmarkTopics"
+          property="myBookmarks"
+          v-if="selectedCategory === BOOKMARKS"
+          v-slot="{ item }"
+        >
+          <div>Lesezeichen: {{ item.id }}</div>
+          <div v-if="item.note">Notiz: {{ item.note.text }}</div>
+        </activity-list>
+        <activity-list
+          :topics="submissionsTopics"
+          property="mySubmissions"
+          v-if="selectedCategory === ASSIGNMENTS"
+          v-slot="{ item }"
+        >
+          Submission: {{ item.text }}
+        </activity-list>
+        <activity-list
+          :topics="answersTopics"
+          property="myAnswers"
+          v-if="selectedCategory === SURVEYS"
+          v-slot="{ item }"
+        >
+          Ü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 {