From af33950bbe8523cd3859d40c88398987d07a3dde Mon Sep 17 00:00:00 2001
From: "Calum H." <contact@cal.engineer>
Date: Thu, 30 Oct 2025 19:19:44 +0000
Subject: [PATCH] fix: race condition for chart query param (#4677)

---
 .../src/components/ui/charts/ChartDisplay.vue      |  9 +++++++++
 apps/frontend/src/utils/analytics.js               | 14 +++++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/src/components/ui/charts/ChartDisplay.vue b/apps/frontend/src/components/ui/charts/ChartDisplay.vue
index d68daf3c..e3795566 100644
--- a/apps/frontend/src/components/ui/charts/ChartDisplay.vue
+++ b/apps/frontend/src/components/ui/charts/ChartDisplay.vue
@@ -8,6 +8,11 @@
 				{{ analytics.error.value }}
 			</div>
 		</div>
+		<div v-else-if="!isInitialized || analytics.loading.value" class="universal-card">
+			<h2>
+				<span class="label__title">Loading analytics...</span>
+			</h2>
+		</div>
 		<div v-else class="graphs">
 			<div class="graphs__vertical-bar">
 				<client-only>
@@ -419,6 +424,7 @@ const isUsingProjectColors = computed({
 const startDate = ref(dayjs().startOf('day'))
 const endDate = ref(dayjs().endOf('day'))
 const timeResolution = ref(30)
+const isInitialized = ref(false)
 
 onBeforeMount(() => {
 	// Load cached data and range from localStorage - cache.
@@ -449,6 +455,8 @@ onMounted(() => {
 	startDate.value = ranges.startDate
 	endDate.value = ranges.endDate
 	timeResolution.value = selectedRange.value.timeResolution
+
+	isInitialized.value = true
 })
 
 const internalRange: Ref<RangeObject> = ref(null as unknown as RangeObject)
@@ -482,6 +490,7 @@ const analytics = useFetchAllAnalytics(
 	startDate,
 	endDate,
 	timeResolution,
+	isInitialized,
 )
 
 const formattedCategorySubtitle = computed(() => {
diff --git a/apps/frontend/src/utils/analytics.js b/apps/frontend/src/utils/analytics.js
index 9aa63572..a8833424 100644
--- a/apps/frontend/src/utils/analytics.js
+++ b/apps/frontend/src/utils/analytics.js
@@ -307,6 +307,7 @@ export const useFetchAllAnalytics = (
 	startDate = ref(dayjs().subtract(30, 'days')),
 	endDate = ref(dayjs()),
 	timeResolution = ref(1440),
+	isInitialized = ref(false),
 ) => {
 	const downloadData = ref(null)
 	const viewData = ref(null)
@@ -388,8 +389,18 @@ export const useFetchAllAnalytics = (
 	}
 
 	watch(
-		[() => startDate.value, () => endDate.value, () => timeResolution.value, () => projects.value],
+		[
+			() => startDate.value,
+			() => endDate.value,
+			() => timeResolution.value,
+			() => projects.value,
+			() => isInitialized.value,
+		],
 		async () => {
+			if (!isInitialized.value) {
+				return
+			}
+
 			const q = {
 				start_date: startDate.value.toISOString(),
 				end_date: endDate.value.toISOString(),
@@ -456,5 +467,6 @@ export const useFetchAllAnalytics = (
 		totalData,
 		loading,
 		error,
+		isInitialized,
 	}
 }