From b62211a5b4898b639bda80306d56a6548e9e0809 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Wed, 6 Sep 2023 16:31:24 +0200
Subject: [PATCH 1/5] Fix content blocks, notes, and chapters.

---
 .../src/components/profile/ModuleActivity.vue | 39 ++++++++++---------
 client/src/pages/activity.vue                 |  4 +-
 server/users/schema/queries.py                |  2 +-
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/client/src/components/profile/ModuleActivity.vue b/client/src/components/profile/ModuleActivity.vue
index 07ab1655..58d38c44 100644
--- a/client/src/components/profile/ModuleActivity.vue
+++ b/client/src/components/profile/ModuleActivity.vue
@@ -3,10 +3,11 @@
     class="module-activity"
     v-if="!empty"
   >
-    <h3 class="module-activity__module-name">
+    <h3 class="module-activity__topic-name">
       {{ module.topic.title }}
     </h3>
-    <h2 class="module-activity__title">{{ module.metaTitle }} - {{ module.title }}</h2>
+    <h2 class="module-activity__title">{{ module.title }}</h2>
+    <h3 class="module-activity__meta-title">{{ module.metaTitle }}</h3>
     <div class="module-activity__tasks activity-tasks">
       <activity-entry
         title="Aufgabe & Ergebnis"
@@ -27,11 +28,12 @@
         {{ answer.survey.title }}
       </activity-entry>
       <activity-entry
-        title="Lesezeichen"
+        title="Lesezeichen ContentBlock"
         class="module-activity__entry"
+        :bookmark="bookmark"
         v-for="bookmark in contentBookmarks"
         :key="bookmark.id"
-        @link="goTo(bookmark.uuid)"
+        @link="goTo(bookmark.contentBlock.id)"
       >
         <content-bookmark :bookmark="bookmark" />
       </activity-entry>
@@ -47,11 +49,12 @@
       <activity-entry
         title="Notiz"
         class="module-activity__entry"
-        v-for="note in notes"
-        :key="note.id"
-        @link="goTo(note.id)"
+        :bookmark="noteBookmark"
+        v-for="noteBookmark in notes"
+        :key="noteBookmark.note.id"
+        @link="goTo(noteBookmark.contentBlock.id)"
       >
-        {{ note.text }}
+        {{ noteBookmark.note.text }}
       </activity-entry>
     </div>
   </div>
@@ -73,11 +76,11 @@ export default {
   computed: {
     empty() {
       return !(
-        this.module.mySubmissions.length ||
-        this.module.myAnswers.length ||
-        this.module.myContentBookmarks.length ||
-        this.module.myChapterBookmarks.length ||
-        this.module.bookmark
+        this.notes.length ||
+        this.answers.length ||
+        this.submissions.length ||
+        this.contentBookmarks.length ||
+        this.chapterBookmarks.length
       );
     },
     notes() {
@@ -86,7 +89,6 @@ export default {
             .concat(this.module.myContentBookmarks)
             .concat([this.module.bookmark ? this.module.bookmark : {}])
             .filter((b) => b.note)
-            .map((b) => b.note)
         : [];
     },
     submissions() {
@@ -140,9 +142,7 @@ export default {
     max-width: 320px;
   }
 
-  margin-bottom: 2 * $large-spacing;
-
-  &__module-name {
+  &__topic-name {
     @include regular-text;
     margin-bottom: $small-spacing;
   }
@@ -150,7 +150,10 @@ export default {
   &__title {
     @include heading-2;
   }
-
+    &__meta-title {
+    @include regular-text;
+    margin-bottom: $small-spacing;
+  }
   &__entry {
     &:first-of-type {
       border-top: 1px solid $color-silver;
diff --git a/client/src/pages/activity.vue b/client/src/pages/activity.vue
index e96bc9da..4700cf8b 100644
--- a/client/src/pages/activity.vue
+++ b/client/src/pages/activity.vue
@@ -42,14 +42,14 @@ export default {
       update(data) {
         return this.$getRidOfEdges(data).myActivity;
       },
-      pollInterval: 5000,
+      pollInterval: 15000,
     },
     instruments: {
       query: MY_ACTIVITY_QUERY,
       update(data) {
         return this.$getRidOfEdges(data).myInstrumentActivity;
       },
-      pollInterval: 5000,
+      pollInterval: 15000,
     },
   },
 
diff --git a/server/users/schema/queries.py b/server/users/schema/queries.py
index cf0e44a0..8b33e18b 100644
--- a/server/users/schema/queries.py
+++ b/server/users/schema/queries.py
@@ -29,7 +29,7 @@ class UsersQuery(object):
         return Module.objects.all()
 
     def resolve_my_instrument_activity(self, info, **kwargs):
-        return BasicKnowledge.objects.all()
+        return BasicKnowledge.objects.filter(instrumentbookmark__user=info.context.user)
 
 
 class AllUsersQuery(object):

From 896837ccf4b656f24dc82608e15beb8b993d3cb9 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Thu, 7 Sep 2023 11:38:30 +0200
Subject: [PATCH 2/5] Make font smaller - otherwise code is displayed as
 SH-BU82 instead of SHBU82

---
 client/src/components/profile/ShowCode.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/profile/ShowCode.vue b/client/src/components/profile/ShowCode.vue
index 8a6d4a67..8ce9fcf4 100644
--- a/client/src/components/profile/ShowCode.vue
+++ b/client/src/components/profile/ShowCode.vue
@@ -42,7 +42,7 @@ export default {
     font-size: toRem(60px);
     letter-spacing: toRem(10px);
     @include desktop {
-      font-size: toRem(120px);
+      font-size: toRem(100px);
       letter-spacing: toRem(20px);
     }
     font-weight: 600;

From 595332825a1f0ea3588497ae881071f4525c3cfd Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Fri, 8 Sep 2023 09:21:40 +0200
Subject: [PATCH 3/5] add loading spinner

---
 client/src/components/ui/loadingMessage.vue |  33 ++++++
 client/src/components/ui/loadingSpinner.vue | 112 ++++++++++++++++++++
 2 files changed, 145 insertions(+)
 create mode 100644 client/src/components/ui/loadingMessage.vue
 create mode 100644 client/src/components/ui/loadingSpinner.vue

diff --git a/client/src/components/ui/loadingMessage.vue b/client/src/components/ui/loadingMessage.vue
new file mode 100644
index 00000000..120d037a
--- /dev/null
+++ b/client/src/components/ui/loadingMessage.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="loading-message">
+    <loading-spinner class="loading-message__spinner" />
+    <span class="loading-message__text"><slot></slot> </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import LoadingSpinner from "@/components/ui/loadingSpinner.vue";
+</script>
+
+
+<style scoped lang="scss">
+@import 'styles/helpers';
+
+.loading-message {
+  display: flex;
+  align-items: center;
+
+  &__icon {
+    width: $large-icon-dimension;
+    height: $large-icon-dimension;
+    fill: $color-brand;
+    margin-right: $large-spacing;
+  }
+
+  &__text {
+    @include regular-text;
+    color: $color-brand;
+    margin-right: $medium-spacing;
+  }
+}
+</style>
diff --git a/client/src/components/ui/loadingSpinner.vue b/client/src/components/ui/loadingSpinner.vue
new file mode 100644
index 00000000..fc85b9d3
--- /dev/null
+++ b/client/src/components/ui/loadingSpinner.vue
@@ -0,0 +1,112 @@
+
+<template>
+<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">
+@import 'styles/helpers';
+
+.loading-spinner {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+
+   div {
+    animation: loading-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    transform-origin: 40px 40px;
+  }
+
+   div:after {
+    content: " ";
+    display: block;
+    position: absolute;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: $color-brand;
+    margin: -4px 0 0 -4px;
+  }
+
+   div:nth-child(1) {
+    animation-delay: -0.036s;
+  }
+
+   div:nth-child(1):after {
+    top: 63px;
+    left: 63px;
+  }
+
+   div:nth-child(2) {
+    animation-delay: -0.072s;
+  }
+
+   div:nth-child(2):after {
+    top: 68px;
+    left: 56px;
+  }
+
+   div:nth-child(3) {
+    animation-delay: -0.108s;
+  }
+
+   div:nth-child(3):after {
+    top: 71px;
+    left: 48px;
+  }
+
+   div:nth-child(4) {
+    animation-delay: -0.144s;
+  }
+
+   div:nth-child(4):after {
+    top: 72px;
+    left: 40px;
+  }
+
+   div:nth-child(5) {
+    animation-delay: -0.18s;
+  }
+
+   div:nth-child(5):after {
+    top: 71px;
+    left: 32px;
+  }
+
+   div:nth-child(6) {
+    animation-delay: -0.216s;
+  }
+
+   div:nth-child(6):after {
+    top: 68px;
+    left: 24px;
+  }
+
+   div:nth-child(7) {
+    animation-delay: -0.252s;
+  }
+
+   div:nth-child(7):after {
+    top: 63px;
+    left: 17px;
+  }
+
+   div:nth-child(8) {
+    animation-delay: -0.288s;
+  }
+
+   div:nth-child(8):after {
+    top: 56px;
+    left: 12px;
+  }
+}
+@keyframes loading-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+</style>

From bc715a937fa880ea5331ed9e8b3fba07f52abc2d Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Fri, 8 Sep 2023 10:00:17 +0200
Subject: [PATCH 4/5] Add loading message to activities and refactor the module
 and intrument activities

---
 .../components/profile/ContentBookmark.vue    |  4 +-
 .../components/profile/InstrumentActivity.vue | 15 ++--
 .../src/components/profile/ModuleActivity.vue | 17 ++--
 client/src/components/ui/InfoMessage.vue      | 33 ++++++++
 client/src/components/ui/loadingMessage.vue   |  7 +-
 client/src/components/ui/loadingSpinner.vue   | 84 ++++++++++++-------
 client/src/graphql/gql/queries/myActivity.gql |  2 +
 client/src/styles/_variables.scss             |  1 +
 8 files changed, 110 insertions(+), 53 deletions(-)
 create mode 100644 client/src/components/ui/InfoMessage.vue

diff --git a/client/src/components/profile/ContentBookmark.vue b/client/src/components/profile/ContentBookmark.vue
index 8a6017e3..e1ef8b2d 100644
--- a/client/src/components/profile/ContentBookmark.vue
+++ b/client/src/components/profile/ContentBookmark.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="content-bookmark module-activity-entry">
+  <div class="content-bookmark module-activity-entry" v-if="content">
     <!-- eslint-disable vue/no-v-html -->
     <div
       v-if="content.type === 'text_block'"
@@ -30,7 +30,7 @@ export default {
     content() {
       return this.bookmark.contentBlock
         ? this.bookmark.contentBlock.contents.find((e) => e.id === this.bookmark.uuid)
-        : this.bookmark.instrument.contents.find((e) => e.id === this.bookmark.uuid);
+        : this.bookmark.instrument?.find((e) => e.id === this.bookmark.uuid);
     },
     text() {
       return this.content.value.text ? this.content.value.text : 'TO BE DEFINED';
diff --git a/client/src/components/profile/InstrumentActivity.vue b/client/src/components/profile/InstrumentActivity.vue
index 22e14386..a9a98f92 100644
--- a/client/src/components/profile/InstrumentActivity.vue
+++ b/client/src/components/profile/InstrumentActivity.vue
@@ -7,7 +7,7 @@
       {{ type }}
     </h3>
     <h2 class="instrument-activity__title">
-      {{ instrument.title }}
+       {{ instrument.title }}
     </h2>
     <div class="instrument-activity__tasks activity-tasks">
       <activity-entry
@@ -22,11 +22,11 @@
       <activity-entry
         title="Notiz"
         class="instrument-activity__entry"
-        v-for="note in notes"
-        :key="note.id"
-        @link="goTo(note.id)"
+        v-for="noteBookmark in notes"
+        :key="noteBookmark.id"
+        @link="goTo(noteBookmark.note.id)"
       >
-        {{ note.text }}
+        {{ noteBookmark.note.text }}
       </activity-entry>
     </div>
   </div>
@@ -48,10 +48,10 @@ export default {
   },
   computed: {
     empty() {
-      return !this.instrument.bookmarks.length;
+      return !(this.bookmarks.length || this.notes.length);
     },
     notes() {
-      return this.applyFilter('notes') ? this.instrument.bookmarks.filter((b) => b.note).map((b) => b.note) : [];
+      return this.applyFilter('notes') ? this.instrument.bookmarks.filter((b) => b.note) : [];
     },
     bookmarks() {
       return this.applyFilter('bookmarks') ? this.instrument.bookmarks : [];
@@ -63,6 +63,7 @@ export default {
   methods: {
     ...mapActions(['scrollToAssignmentId']),
     goTo(scrollTo) {
+      // TODO: fix this part, with instruments it does not navigate to the bookmark itself. (added in support case 6.9.2023)
       const url = `/instrument/${this.instrument.slug}/`;
       this.$apollo.mutate({
         mutation: SCROLL_TO_MUTATION,
diff --git a/client/src/components/profile/ModuleActivity.vue b/client/src/components/profile/ModuleActivity.vue
index 58d38c44..4c0bf600 100644
--- a/client/src/components/profile/ModuleActivity.vue
+++ b/client/src/components/profile/ModuleActivity.vue
@@ -23,17 +23,17 @@
         class="module-activity__entry"
         v-for="answer in answers"
         :key="answer.id"
-        @link="goTo(answer.survey.id)"
+        @link="goTo('module', this.module.slug)"
       >
         {{ answer.survey.title }}
       </activity-entry>
       <activity-entry
-        title="Lesezeichen ContentBlock"
+        title="Lesezeichen"
         class="module-activity__entry"
         :bookmark="bookmark"
         v-for="bookmark in contentBookmarks"
         :key="bookmark.id"
-        @link="goTo(bookmark.contentBlock.id)"
+        @link="goTo('content', bookmark.contentBlock.id)"
       >
         <content-bookmark :bookmark="bookmark" />
       </activity-entry>
@@ -42,7 +42,7 @@
         class="module-activity__entry"
         v-for="bookmark in chapterBookmarks"
         :key="bookmark.id"
-        @link="goTo(bookmark.chapter.id)"
+        @link="goTo('content', bookmark.chapter.id)"
       >
         {{ bookmark.chapter.description }}
       </activity-entry>
@@ -52,7 +52,7 @@
         :bookmark="noteBookmark"
         v-for="noteBookmark in notes"
         :key="noteBookmark.note.id"
-        @link="goTo(noteBookmark.contentBlock.id)"
+        @link="goTo('content', noteBookmark.contentBlock ? noteBookmark.contentBlock.id : noteBookmark.chapter.id)"
       >
         {{ noteBookmark.note.text }}
       </activity-entry>
@@ -101,13 +101,13 @@ export default {
       return this.applyFilter('bookmarks') ? this.module.myContentBookmarks : [];
     },
     chapterBookmarks() {
-      return this.applyFilter('bookmarks') ? this.module.myChapterBookmarks : [];
+      return this.applyFilter('bookmarks') ? this.module.myChapterBookmarks : []
     },
   },
   methods: {
     ...mapActions(['scrollToAssignmentId']),
-    goTo(scrollTo) {
-      const url = `/module/${this.module.slug}/`;
+    goTo(contentType, scrollTo) {
+      const url = `/${contentType}/${scrollTo}/`;
       this.$apollo.mutate({
         mutation: SCROLL_TO_MUTATION,
         variables: {
@@ -116,6 +116,7 @@ export default {
       });
       this.$router.push(url);
     },
+
     applyFilter(filterCriteria) {
       return !this.filter || this.filter === filterCriteria;
     },
diff --git a/client/src/components/ui/InfoMessage.vue b/client/src/components/ui/InfoMessage.vue
new file mode 100644
index 00000000..5a352163
--- /dev/null
+++ b/client/src/components/ui/InfoMessage.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="info-message">
+    <info-icon class="info-message__icon" />
+    <span class="info-message__text"><slot></slot> </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import InfoIcon from '@/components/icons/InfoIcon.vue';
+</script>
+
+
+<style scoped lang="scss">
+@import 'styles/helpers';
+
+.info-message {
+  display: flex;
+  align-items: center;
+
+  &__icon {
+    width: $large-icon-dimension;
+    height: $large-icon-dimension;
+    fill: $color-brand;
+    margin-right: $small-spacing;
+  }
+
+  &__text {
+    @include regular-text;
+    color: $color-brand;
+    margin-right: $medium-spacing;
+  }
+}
+</style>
diff --git a/client/src/components/ui/loadingMessage.vue b/client/src/components/ui/loadingMessage.vue
index 120d037a..b00d984a 100644
--- a/client/src/components/ui/loadingMessage.vue
+++ b/client/src/components/ui/loadingMessage.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="loading-message">
-    <loading-spinner class="loading-message__spinner" />
+    <loading-spinner class="loading-message__spinner" style="
+        --spinner-size: 40px; "/>
     <span class="loading-message__text"><slot></slot> </span>
   </div>
 </template>
@@ -18,15 +19,13 @@ import LoadingSpinner from "@/components/ui/loadingSpinner.vue";
   align-items: center;
 
   &__icon {
-    width: $large-icon-dimension;
-    height: $large-icon-dimension;
-    fill: $color-brand;
     margin-right: $large-spacing;
   }
 
   &__text {
     @include regular-text;
     color: $color-brand;
+    margin-left: $medium-spacing;
     margin-right: $medium-spacing;
   }
 }
diff --git a/client/src/components/ui/loadingSpinner.vue b/client/src/components/ui/loadingSpinner.vue
index fc85b9d3..321bf583 100644
--- a/client/src/components/ui/loadingSpinner.vue
+++ b/client/src/components/ui/loadingSpinner.vue
@@ -6,26 +6,29 @@
 <style scoped lang="scss">
 @import 'styles/helpers';
 
+// copied from https://loading.io/css/ updated for scalability
+
 .loading-spinner {
   display: inline-block;
   position: relative;
-  width: 80px;
-  height: 80px;
+  width: var(--spinner-size, 80px);
+  height: var(--spinner-size, 80px);
+  --calculated-dot-size: calc(var(--spinner-size, 80px) * 0.0875); // 7px is 8.75% of 80px
 
-   div {
+  div {
     animation: loading-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-    transform-origin: 40px 40px;
+    transform-origin: calc(var(--spinner-size, 80px) / 2) calc(var(--spinner-size, 80px) / 2);
   }
 
-   div:after {
+  div:after {
     content: " ";
     display: block;
     position: absolute;
-    width: 7px;
-    height: 7px;
+    width: var(--calculated-dot-size);
+    height: var(--calculated-dot-size);
     border-radius: 50%;
-    background: $color-brand;
-    margin: -4px 0 0 -4px;
+    background: var(--spinner-color, $color-brand);
+    margin: calc(var(--calculated-dot-size) / -2) 0 0 calc(var(--calculated-dot-size) / -2);
   }
 
    div:nth-child(1) {
@@ -50,54 +53,71 @@
     animation-delay: -0.108s;
   }
 
-   div:nth-child(3):after {
-    top: 71px;
-    left: 48px;
-  }
 
    div:nth-child(4) {
     animation-delay: -0.144s;
   }
 
-   div:nth-child(4):after {
-    top: 72px;
-    left: 40px;
-  }
 
    div:nth-child(5) {
     animation-delay: -0.18s;
   }
 
-   div:nth-child(5):after {
-    top: 71px;
-    left: 32px;
-  }
 
    div:nth-child(6) {
     animation-delay: -0.216s;
   }
 
-   div:nth-child(6):after {
-    top: 68px;
-    left: 24px;
-  }
+
 
    div:nth-child(7) {
     animation-delay: -0.252s;
   }
 
-   div:nth-child(7):after {
-    top: 63px;
-    left: 17px;
-  }
 
    div:nth-child(8) {
     animation-delay: -0.288s;
   }
 
-   div:nth-child(8):after {
-    top: 56px;
-    left: 12px;
+
+  div:nth-child(1):after {
+    top: calc(var(--spinner-size, 80px) * 0.7875);
+    left: calc(var(--spinner-size, 80px) * 0.7875);
+  }
+
+  div:nth-child(2):after {
+    top: calc(var(--spinner-size, 80px) * 0.85);
+    left: calc(var(--spinner-size, 80px) * 0.7);
+  }
+
+  div:nth-child(3):after {
+    top: calc(var(--spinner-size, 80px) * 0.8875);
+    left: calc(var(--spinner-size, 80px) * 0.6);
+  }
+
+  div:nth-child(4):after {
+    top: calc(var(--spinner-size, 80px) * 0.9);
+    left: calc(var(--spinner-size, 80px) * 0.5);
+  }
+
+  div:nth-child(5):after {
+    top: calc(var(--spinner-size, 80px) * 0.8875);
+    left: calc(var(--spinner-size, 80px) * 0.4);
+  }
+
+  div:nth-child(6):after {
+    top: calc(var(--spinner-size, 80px) * 0.85);
+    left: calc(var(--spinner-size, 80px) * 0.3);
+  }
+
+  div:nth-child(7):after {
+    top: calc(var(--spinner-size, 80px) * 0.7875);
+    left: calc(var(--spinner-size, 80px) * 0.2125);
+  }
+
+  div:nth-child(8):after {
+    top: calc(var(--spinner-size, 80px) * 0.7);
+    left: calc(var(--spinner-size, 80px) * 0.15);
   }
 }
 @keyframes loading-spinner {
diff --git a/client/src/graphql/gql/queries/myActivity.gql b/client/src/graphql/gql/queries/myActivity.gql
index 17b8584d..b73d8214 100644
--- a/client/src/graphql/gql/queries/myActivity.gql
+++ b/client/src/graphql/gql/queries/myActivity.gql
@@ -35,7 +35,9 @@ query MyActivityQuery {
         slug
         metaTitle
         topic {
+          id
           title
+          slug
         }
         mySubmissions {
           edges {
diff --git a/client/src/styles/_variables.scss b/client/src/styles/_variables.scss
index fe1456de..669333c1 100644
--- a/client/src/styles/_variables.scss
+++ b/client/src/styles/_variables.scss
@@ -87,3 +87,4 @@ $screen-width: 1200px;
 
 $default-icon-dimension: 25px;
 $small-icon-dimension: 14px;
+$large-icon-dimension: 40px;

From bfc37c767cebd7dd7dbb24f04a6af05803c2e96f Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Fri, 8 Sep 2023 10:04:31 +0200
Subject: [PATCH 5/5] Fix linting

---
 client/src/components/profile/ModuleActivity.vue | 2 +-
 client/src/components/ui/InfoMessage.vue         | 1 -
 client/src/components/ui/loadingMessage.vue      | 9 +++++----
 client/src/pages/activity.vue                    | 6 ++++++
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/client/src/components/profile/ModuleActivity.vue b/client/src/components/profile/ModuleActivity.vue
index 4c0bf600..aecf4e31 100644
--- a/client/src/components/profile/ModuleActivity.vue
+++ b/client/src/components/profile/ModuleActivity.vue
@@ -23,7 +23,7 @@
         class="module-activity__entry"
         v-for="answer in answers"
         :key="answer.id"
-        @link="goTo('module', this.module.slug)"
+        @link="goTo('module', module.slug)"
       >
         {{ answer.survey.title }}
       </activity-entry>
diff --git a/client/src/components/ui/InfoMessage.vue b/client/src/components/ui/InfoMessage.vue
index 5a352163..5e0e0d01 100644
--- a/client/src/components/ui/InfoMessage.vue
+++ b/client/src/components/ui/InfoMessage.vue
@@ -9,7 +9,6 @@
 import InfoIcon from '@/components/icons/InfoIcon.vue';
 </script>
 
-
 <style scoped lang="scss">
 @import 'styles/helpers';
 
diff --git a/client/src/components/ui/loadingMessage.vue b/client/src/components/ui/loadingMessage.vue
index b00d984a..e02c9fa3 100644
--- a/client/src/components/ui/loadingMessage.vue
+++ b/client/src/components/ui/loadingMessage.vue
@@ -1,16 +1,17 @@
 <template>
   <div class="loading-message">
-    <loading-spinner class="loading-message__spinner" style="
-        --spinner-size: 40px; "/>
+    <loading-spinner
+      class="loading-message__spinner"
+      style="--spinner-size: 40px"
+    />
     <span class="loading-message__text"><slot></slot> </span>
   </div>
 </template>
 
 <script setup lang="ts">
-import LoadingSpinner from "@/components/ui/loadingSpinner.vue";
+import LoadingSpinner from '@/components/ui/loadingSpinner.vue';
 </script>
 
-
 <style scoped lang="scss">
 @import 'styles/helpers';
 
diff --git a/client/src/pages/activity.vue b/client/src/pages/activity.vue
index 4700cf8b..a2e2410d 100644
--- a/client/src/pages/activity.vue
+++ b/client/src/pages/activity.vue
@@ -5,6 +5,7 @@
       :filter="filter"
       @change-filter="filter = $event"
     />
+    <loading-message v-if="loading">Aktiviäten werden geladen</loading-message>
     <div class="modules">
       <module-activity
         :filter="filter"
@@ -28,9 +29,11 @@ import ModuleActivity from '@/components/profile/ModuleActivity.vue';
 import InstrumentActivity from '@/components/profile/InstrumentActivity.vue';
 import ActivityFilter from '@/components/profile/ActivityFilter.vue';
 import MY_ACTIVITY_QUERY from '@/graphql/gql/queries/myActivity.gql';
+import LoadingMessage from '@/components/ui/loadingMessage.vue';
 
 export default {
   components: {
+    LoadingMessage,
     ModuleActivity,
     InstrumentActivity,
     ActivityFilter,
@@ -40,6 +43,7 @@ export default {
     modules: {
       query: MY_ACTIVITY_QUERY,
       update(data) {
+        this.loading = false;
         return this.$getRidOfEdges(data).myActivity;
       },
       pollInterval: 15000,
@@ -47,6 +51,7 @@ export default {
     instruments: {
       query: MY_ACTIVITY_QUERY,
       update(data) {
+        this.loading = false;
         return this.$getRidOfEdges(data).myInstrumentActivity;
       },
       pollInterval: 15000,
@@ -58,6 +63,7 @@ export default {
       modules: [],
       instruments: [],
       filter: '',
+      loading: true,
     };
   },
 };