Add loading spinner to widget

client/src/components/dashboard/UkStatistics.vue

@@ -6,6 +6,7 @@ import type { CourseStatisticsType } from "@/gql/graphql";
 import AssignmentSummaryBox from "@/components/dashboard/AssignmentSummaryBox.vue";
 import FeedbackSummaryBox from "@/components/dashboard/FeedbackSummaryBox.vue";
 import CompetenceSummaryBox from "@/components/dashboard/CompetenceSummaryBox.vue";
+import LoadingSpinner from "@/components/ui/LoadingSpinner.vue";
 
 const props = defineProps<{
   courseId: string;
@@ -95,4 +96,7 @@ onMounted(async () => {
       />
     </div>
   </div>
+  <div v-else class="flex w-full flex-row justify-center">
+    <LoadingSpinner />
+  </div>
 </template>

client/src/components/learningPath/LearningPathDiagram.vue

@@ -3,6 +3,7 @@ import LearningPathCircle from "@/pages/learningPath/learningPathPage/LearningPa
 import { calculateCircleSectorData } from "@/pages/learningPath/learningPathPage/utils";
 import { computed } from "vue";
 import { useCourseCircleProgress, useCourseDataWithCompletion } from "@/composables";
+import LoadingSpinner from "@/components/ui/LoadingSpinner.vue";
 
 export type DiagramType = "horizontal" | "horizontalSmall" | "singleSmall";
 
@@ -54,23 +55,25 @@ const { inProgressCirclesCount, circlesCount } = useCourseCircleProgress(
 
 <template>
   <div>
-    <h4
-      v-if="diagramType === 'horizontal' && circles.length > 0"
-      class="mb-4 font-bold"
-    >
-      {{
-        $t("learningPathPage.progressText", {
-          inProgressCount: inProgressCirclesCount,
-          allCount: circlesCount,
-        })
-      }}
-    </h4>
-    <div :class="wrapperClasses">
-      <LearningPathCircle
-        v-for="circle in circles"
-        :key="circle.id"
-        :sectors="calculateCircleSectorData(circle)"
-      ></LearningPathCircle>
+    <div v-if="circlesCount > 0">
+      <h4 v-if="diagramType === 'horizontal'" class="mb-4 font-bold">
+        {{
+          $t("learningPathPage.progressText", {
+            inProgressCount: inProgressCirclesCount,
+            allCount: circlesCount,
+          })
+        }}
+      </h4>
+      <div :class="wrapperClasses">
+        <LearningPathCircle
+          v-for="circle in circles"
+          :key="circle.id"
+          :sectors="calculateCircleSectorData(circle)"
+        ></LearningPathCircle>
+      </div>
+    </div>
+    <div v-else class="flex justify-center">
+      <LoadingSpinner />
     </div>
   </div>
 </template>