From 9c4249de0132a97bccffb2129ca8d0c1e8641709 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 29 Feb 2024 13:09:06 +0100
Subject: [PATCH] Add loading spinner to new activity page

---
 ...{loadingMessage.vue => LoadingMessage.vue} |   2 +-
 ...{loadingSpinner.vue => LoadingSpinner.vue} |  42 ++--
 client/src/pages/activity.vue                 | 186 +++++++++---------
 3 files changed, 117 insertions(+), 113 deletions(-)
 rename client/src/components/ui/{loadingMessage.vue => LoadingMessage.vue} (90%)
 rename client/src/components/ui/{loadingSpinner.vue => LoadingSpinner.vue} (85%)

diff --git a/client/src/components/ui/loadingMessage.vue b/client/src/components/ui/LoadingMessage.vue
similarity index 90%
rename from client/src/components/ui/loadingMessage.vue
rename to client/src/components/ui/LoadingMessage.vue
index e02c9fa3..4bebc0b5 100644
--- a/client/src/components/ui/loadingMessage.vue
+++ b/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">
diff --git a/client/src/components/ui/loadingSpinner.vue b/client/src/components/ui/LoadingSpinner.vue
similarity index 85%
rename from client/src/components/ui/loadingSpinner.vue
rename to client/src/components/ui/LoadingSpinner.vue
index 321bf583..5e554ac7 100644
--- a/client/src/components/ui/loadingSpinner.vue
+++ b/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>
diff --git a/client/src/pages/activity.vue b/client/src/pages/activity.vue
index d3c0ee2f..946f7381 100644
--- a/client/src/pages/activity.vue
+++ b/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">
-      <a
-        class="activity__category default-link"
-        data-cy="activity-category"
-        :class="{ 'activity__category--active': selectedCategory === HIGHLIGHTS }"
-        @click="selectedCategory = HIGHLIGHTS"
-        >Markierungen</a
-      >
-      <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
+    <loading-message v-if="loading">Aktivitäten werden geladen</loading-message>
+    <template v-else>
+      <div class="activity__categories">
+        <a
+          class="activity__category default-link"
+          data-cy="activity-category"
+          :class="{ 'activity__category--active': selectedCategory === HIGHLIGHTS }"
+          @click="selectedCategory = HIGHLIGHTS"
+          >Markierungen</a
         >
-        <div v-if="item.note">Notiz: {{ item.note.text }}</div>
-      </instrument-activity-list>
-      <activity-list
-        :topics="highlightTopics"
-        property="myHighlights"
-        v-if="selectedCategory === HIGHLIGHTS"
-        v-slot="{ item }"
-      >
-        <mark
-          class="highlight"
-          :class="[`highlight--${item?.color}`]"
-          >{{ item?.text }}</mark
+        <a
+          class="activity__category default-link"
+          data-cy="activity-category"
+          :class="{ 'activity__category--active': selectedCategory === BOOKMARKS }"
+          @click="selectedCategory = BOOKMARKS"
+          >Lesezeichen</a
         >
-        <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>
+        <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>
+        </instrument-activity-list>
+        <activity-list
+          :topics="highlightTopics"
+          property="myHighlights"
+          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>
+        </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 {