From 287b597aaca018d2cfafe8ae31239c3a7ecb406c Mon Sep 17 00:00:00 2001
From: tobinio <Tobias.frischmann1@gmail.com>
Date: Sun, 20 Apr 2025 11:45:25 +0200
Subject: [PATCH] display loading animation

---
 app/composables/useStatData.ts |  6 ++++--
 app/pages/charts.vue           | 14 +++++++++-----
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/app/composables/useStatData.ts b/app/composables/useStatData.ts
index 0f5a08e..5734d06 100644
--- a/app/composables/useStatData.ts
+++ b/app/composables/useStatData.ts
@@ -19,9 +19,11 @@ export function useStatData(
 			: "/api/stats/time/projects";
 	});
 
-	const { data } = useFetch<StatExport>(url, {
+	const { data, status } = useFetch<StatExport>(url, {
 		query: params,
 	});
 
-	return data;
+	const isFetching = computed(() => status.value === "pending");
+
+	return { data, isFetching };
 }
diff --git a/app/pages/charts.vue b/app/pages/charts.vue
index 65c61b2..e0333dd 100644
--- a/app/pages/charts.vue
+++ b/app/pages/charts.vue
@@ -37,7 +37,7 @@ const isGroupData = computed(() => {
 	);
 });
 
-const data = useStatData(isGlobalStats, isRevenueStats, time, {
+const { data, isFetching } = useStatData(isGlobalStats, isRevenueStats, time, {
 	mode: versionGroup,
 	exclusive: exclusiveBool,
 	type: projectType,
@@ -90,10 +90,14 @@ const sideBarOpen = ref(false);
       </div>
     </SideBar>
 
-    <div class="flex pl-0 w-full transition-all md:pl-48" :class="{'!pl-0': !sideBarOpen}">
-      <ChartBarChart v-if="isGroupData" :data="data" :type="projectType as string"/>
-      <ChartLineChart v-else :data="data" :type="projectType as string"/>
-      <Explanation v-if="isProjectStats" :explanation="explanation"/>
+    <div class="relative flex ml-0 w-full transition-all md:ml-48" :class="{'!ml-0': !sideBarOpen}">
+        <div :data-fetching="isFetching" class="w-full flex  data-[fetching=true]:grayscale data-[fetching=true]:blur-[2px]">
+            <ChartBarChart v-if="isGroupData" :data="data" :type="projectType as string"/>
+            <ChartLineChart v-else :data="data" :type="projectType as string"/>
+        </div>
+        <Explanation v-if="isProjectStats" :explanation="explanation"/>
+
+        <Icon v-if="isFetching" class="absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%]" name="eos-icons:bubble-loading" size="48" />
     </div>
   </div>
 </template>
-- 
2.54.0