From a67fa25b986cf394b8cd8aab0582f4da3848471d Mon Sep 17 00:00:00 2001
From: Yongtae Park <samuel.park@megazone.com>
Date: Mon, 20 Jan 2025 11:17:10 +0900
Subject: [PATCH 1/3] fix(variable-overlay): apply widget mode to variable more
 button

Signed-off-by: samuel.park <samuel.park@megazone.com>
---
 .../dashboard-detail/DashboardVariablesMoreButton.vue         | 3 ++-
 .../components/dashboard-detail/DashboardVariablesV2.vue      | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesMoreButton.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesMoreButton.vue
index 8712c97c00..f8fb2a21b3 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesMoreButton.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesMoreButton.vue
@@ -36,6 +36,7 @@ interface VariableMenuItem extends MenuItem {
 interface Props {
     isManageable?: boolean;
     disabled?: boolean;
+    widgetMode?: boolean;
 }
 
 const props = defineProps<Props>();
@@ -180,7 +181,7 @@ const {
                         @select="handleSelectVariable"
                         @update:search-text="handleUpdateSearchText"
         >
-            <template v-if="!dashboardDetailGetters.isDeprecatedDashboard"
+            <template v-if="!dashboardDetailGetters.isDeprecatedDashboard && !props.widgetMode"
                       #bottom
             >
                 <p-button class="manage-variable-button"
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesV2.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesV2.vue
index 057a0384e5..2f08754bbb 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesV2.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesV2.vue
@@ -128,7 +128,9 @@ const handleResetVariables = () => {
         >
             {{ $t('DASHBOARDS.CUSTOMIZE.SAVE') }}
         </p-text-button>
-        <dashboard-variables-more-button v-if="!state.isSharedDashboard" />
+        <dashboard-variables-more-button v-if="!state.isSharedDashboard"
+                                         :widget-mode="props.widgetMode"
+        />
         <portal to="dashboard-detail-page">
             <dashboard-manage-variable-overlay :visible="state.showOverlay" />
         </portal>

From fcf763a9c7914bebf6f9067b255671b4b42d6e06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piggy=20Park=20=28=EB=B0=95=EC=9A=A9=ED=83=9C=29?=
 <samuel.park@megazone.com>
Date: Mon, 20 Jan 2025 12:08:41 +0900
Subject: [PATCH 2/3] fix(dashboard): solve dashboard QAs (#5558)

* fix(group-by-field): solve selected-group-by sorting issue

Signed-off-by: samuel.park <samuel.park@megazone.com>

* chore: small fix

Signed-off-by: samuel.park <samuel.park@megazone.com>

* fix(value-mapping): temporarily remove expand button

Signed-off-by: samuel.park <samuel.park@megazone.com>

---------

Signed-off-by: samuel.park <samuel.park@megazone.com>
---
 ...FormDataTableCardTransformValueMapping.vue | 19 +++++++++----------
 .../group-by/WidgetFieldGroupBy.vue           |  5 ++++-
 .../_widgets/sankey-chart/widget-config.ts    |  2 +-
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue
index 366319b63a..211ab1601f 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue
@@ -128,10 +128,10 @@ const handleClickAddCase = () => {
 const handleClickDeleteCase = (idx: number) => {
     casesInfo.value.splice(idx, 1);
 };
-const handleClickExpand = (idx: number) => {
-    state.expandCaseMap[idx] = !state.expandCaseMap[idx];
-    state.expandCaseMap = { ...state.expandCaseMap };
-};
+// const handleClickExpand = (idx: number) => {
+//     state.expandCaseMap[idx] = !state.expandCaseMap[idx];
+//     state.expandCaseMap = { ...state.expandCaseMap };
+// };
 const handleUpdateBasedOn = (key: string) => {
     keyInfo.value = key;
 };
@@ -247,11 +247,11 @@ watch(() => state.invalid, (_invalid) => {
                                    :disabled="casesInfo.length === 1"
                                    @click="handleClickDeleteCase(cIdx)"
                     />
-                    <p-icon-button name="ic_arrows-expand-all"
-                                   size="sm"
-                                   class="expand-button"
-                                   @click="handleClickExpand(cIdx)"
-                    />
+                    <!--                    <p-icon-button name="ic_arrows-expand-all"-->
+                    <!--                                   size="sm"-->
+                    <!--                                   class="expand-button"-->
+                    <!--                                   @click="handleClickExpand(cIdx)"-->
+                    <!--                    />-->
                 </div>
 
                 <div class="grid grid-cols-12 gap-2">
@@ -319,7 +319,6 @@ watch(() => state.invalid, (_invalid) => {
             @apply bg-white rounded border border-gray-150;
             position: relative;
             padding: 0.5rem;
-            z-index: 1;
             margin-bottom: 0.5rem;
             &.expanded {
                 width: 35rem;
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/group-by/WidgetFieldGroupBy.vue b/apps/web/src/common/modules/widgets/_widget-fields/group-by/WidgetFieldGroupBy.vue
index 9e7db49cac..b9e488a7f3 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/group-by/WidgetFieldGroupBy.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/group-by/WidgetFieldGroupBy.vue
@@ -54,7 +54,10 @@ const state = reactive({
         }
         if (state.fixedValue) return state.fixedValue;
         if (state.multiselectable) {
-            return state.menuItems.filter((d) => state.fieldValue.data?.includes(d.name));
+            return state.fieldValue.data?.map((d) => {
+                const validMenuItem = state.menuItems.find((item) => item.name === d);
+                return validMenuItem || { name: d, label: d };
+            }) || [];
         }
         return state.fieldValue.data;
     }),
diff --git a/apps/web/src/common/modules/widgets/_widgets/sankey-chart/widget-config.ts b/apps/web/src/common/modules/widgets/_widgets/sankey-chart/widget-config.ts
index b8ef9c4256..ff39ac69a8 100644
--- a/apps/web/src/common/modules/widgets/_widgets/sankey-chart/widget-config.ts
+++ b/apps/web/src/common/modules/widgets/_widgets/sankey-chart/widget-config.ts
@@ -5,7 +5,7 @@ const sankeyChart: WidgetConfig = {
     widgetName: 'sankeyChart',
     meta: {
         title: 'Sankey Chart',
-        sizes: ['md'],
+        sizes: ['md', 'full'],
         defaultValidationConfig: {
             defaultMaxCount: 1,
         },

From 53d1a79994c1b5c0d9a5b389d5aacd48be033ae6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piggy=20Park=20=28=EB=B0=95=EC=9A=A9=ED=83=9C=29?=
 <samuel.park@megazone.com>
Date: Mon, 20 Jan 2025 12:54:07 +0900
Subject: [PATCH 3/3] fix(widget): solve widget QAs (#5559)

* fix(widget): edit widget loading state

Signed-off-by: samuel.park <samuel.park@megazone.com>

* fix(preview-table): solve wrong load issue

Signed-off-by: samuel.park <samuel.park@megazone.com>

---------

Signed-off-by: samuel.park <samuel.park@megazone.com>
---
 .../widgets/_components/WidgetFormOverlayPreviewTable.vue       | 2 +-
 .../_widgets/clustered-column-chart/ClusteredColumnChart.vue    | 2 +-
 .../widgets/_widgets/color-coded-heatmap/ColorCodedHeatmap.vue  | 2 +-
 .../color-coded-table-heatmap/ColorCodedTableHeatmap.vue        | 2 +-
 apps/web/src/common/modules/widgets/_widgets/gauge/Gauge.vue    | 2 +-
 apps/web/src/common/modules/widgets/_widgets/geo-map/GeoMap.vue | 2 +-
 .../web/src/common/modules/widgets/_widgets/heatmap/Heatmap.vue | 2 +-
 .../common/modules/widgets/_widgets/line-chart/LineChart.vue    | 2 +-
 .../common/modules/widgets/_widgets/number-card/NumberCard.vue  | 2 +-
 .../src/common/modules/widgets/_widgets/pie-chart/PieChart.vue  | 2 +-
 .../modules/widgets/_widgets/sankey-chart/SankeyChart.vue       | 2 +-
 .../_widgets/stacked-column-chart/StackedColumnChart.vue        | 2 +-
 .../stacked-horizontal-bar-chart/StackedHorizontalBarChart.vue  | 2 +-
 apps/web/src/common/modules/widgets/_widgets/table/Table.vue    | 2 +-
 .../web/src/common/modules/widgets/_widgets/treemap/Treemap.vue | 2 +-
 15 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue
index 8660ae4b90..a672480280 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue
@@ -281,7 +281,7 @@ const queryResult = useQuery({
         page: state.page,
         vars: dashboardDetailGetters.dashboardInfo?.vars,
     }),
-    enabled: computed(() => storeState.selectedDataTableId !== undefined),
+    enabled: computed(() => storeState.selectedDataTableId !== undefined && storeState.selectedDataTable !== undefined),
     staleTime: WIDGET_LOAD_STALE_TIME,
     retry: 2,
 });
diff --git a/apps/web/src/common/modules/widgets/_widgets/clustered-column-chart/ClusteredColumnChart.vue b/apps/web/src/common/modules/widgets/_widgets/clustered-column-chart/ClusteredColumnChart.vue
index d109841ca5..554e604974 100644
--- a/apps/web/src/common/modules/widgets/_widgets/clustered-column-chart/ClusteredColumnChart.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/clustered-column-chart/ClusteredColumnChart.vue
@@ -220,7 +220,7 @@ const queryResult = useQuery({
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isLoading.value || queryResult.isRefetching.value);
+const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || queryResult.isPending.value);
 const errorMessage = computed<string|undefined>(() => {
     if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
     return queryResult.error?.value?.message;
diff --git a/apps/web/src/common/modules/widgets/_widgets/color-coded-heatmap/ColorCodedHeatmap.vue b/apps/web/src/common/modules/widgets/_widgets/color-coded-heatmap/ColorCodedHeatmap.vue
index e6fe195a6b..8d52454a60 100644
--- a/apps/web/src/common/modules/widgets/_widgets/color-coded-heatmap/ColorCodedHeatmap.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/color-coded-heatmap/ColorCodedHeatmap.vue
@@ -120,7 +120,7 @@ const queryResult = useQuery({
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isLoading.value || queryResult.isRefetching.value);
+const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || queryResult.isPending.value);
 const errorMessage = computed<string|undefined>(() => {
     if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
     return queryResult.error?.value?.message;
diff --git a/apps/web/src/common/modules/widgets/_widgets/color-coded-table-heatmap/ColorCodedTableHeatmap.vue b/apps/web/src/common/modules/widgets/_widgets/color-coded-table-heatmap/ColorCodedTableHeatmap.vue
index 0bf72a8249..59c89af386 100644
--- a/apps/web/src/common/modules/widgets/_widgets/color-coded-table-heatmap/ColorCodedTableHeatmap.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/color-coded-table-heatmap/ColorCodedTableHeatmap.vue
@@ -153,7 +153,7 @@ const queryResult = useQuery({
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isLoading.value || queryResult.isRefetching.value);
+const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || queryResult.isPending.value);
 const errorMessage = computed<string|undefined>(() => {
     if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
     return queryResult.error?.value?.message;
diff --git a/apps/web/src/common/modules/widgets/_widgets/gauge/Gauge.vue b/apps/web/src/common/modules/widgets/_widgets/gauge/Gauge.vue
index b1779bdb96..d37eb74f3b 100644
--- a/apps/web/src/common/modules/widgets/_widgets/gauge/Gauge.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/gauge/Gauge.vue
@@ -177,7 +177,7 @@ const queryResult = useQuery({
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isLoading.value || queryResult.isRefetching.value);
+const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || queryResult.isPending.value);
 const errorMessage = computed<string|undefined>(() => {
     if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
     return queryResult.error?.value?.message;
diff --git a/apps/web/src/common/modules/widgets/_widgets/geo-map/GeoMap.vue b/apps/web/src/common/modules/widgets/_widgets/geo-map/GeoMap.vue
index 1a0dc2447f..ca055b2ac4 100644
--- a/apps/web/src/common/modules/widgets/_widgets/geo-map/GeoMap.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/geo-map/GeoMap.vue
@@ -156,7 +156,7 @@ const queryResult = useQuery({
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isLoading.value || queryResult.isRefetching.value);
+const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || queryResult.isPending.value);
 const errorMessage = computed<string>(() => {
     if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
     return queryResult.error?.value?.message;
diff --git a/apps/web/src/common/modules/widgets/_widgets/heatmap/Heatmap.vue b/apps/web/src/common/modules/widgets/_widgets/heatmap/Heatmap.vue
index 62d541db95..f01c01623f 100644
--- a/apps/web/src/common/modules/widgets/_widgets/heatmap/Heatmap.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/heatmap/Heatmap.vue
@@ -219,7 +219,7 @@ const queryResult = useQuery({
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isLoading.value || queryResult.isRefetching.value);
+const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || queryResult.isPending.value);
 const errorMessage = computed<string>(() => {
     if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
     return queryResult.error?.value?.message;
diff --git a/apps/web/src/common/modules/widgets/_widgets/line-chart/LineChart.vue b/apps/web/src/common/modules/widgets/_widgets/line-chart/LineChart.vue
index be3222bea5..55579d73ec 100644
--- a/apps/web/src/common/modules/widgets/_widgets/line-chart/LineChart.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/line-chart/LineChart.vue
@@ -225,7 +225,7 @@ const queryResult = useQuery({
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isLoading.value || queryResult.isRefetching.value);
+const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || queryResult.isPending.value);
 const errorMessage = computed<string|undefined>(() => {
     if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
     return queryResult.error?.value?.message;
diff --git a/apps/web/src/common/modules/widgets/_widgets/number-card/NumberCard.vue b/apps/web/src/common/modules/widgets/_widgets/number-card/NumberCard.vue
index b665c3c69e..a834b9ec2a 100644
--- a/apps/web/src/common/modules/widgets/_widgets/number-card/NumberCard.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/number-card/NumberCard.vue
@@ -221,7 +221,7 @@ const queryResults = useQueries({
     ],
 });
 
-const widgetLoading = computed<boolean>(() => queryResults.value?.[0].isLoading || queryResults.value?.[0].isRefetching);
+const widgetLoading = computed<boolean>(() => queryResults.value?.[0].isPending || queryResults.value?.[0].isFetching);
 const previousLoading = computed<string>(() => queryResults.value?.[1].isLoading);
 const errorMessage = computed<string>(() => {
     if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
diff --git a/apps/web/src/common/modules/widgets/_widgets/pie-chart/PieChart.vue b/apps/web/src/common/modules/widgets/_widgets/pie-chart/PieChart.vue
index 28d3d5786e..ce0d2bd368 100644
--- a/apps/web/src/common/modules/widgets/_widgets/pie-chart/PieChart.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/pie-chart/PieChart.vue
@@ -236,7 +236,7 @@ const queryResult = useQuery({
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isLoading.value || queryResult.isRefetching.value);
+const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || queryResult.isPending.value);
 const errorMessage = computed<string>(() => {
     if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
     return queryResult.error?.value?.message;
diff --git a/apps/web/src/common/modules/widgets/_widgets/sankey-chart/SankeyChart.vue b/apps/web/src/common/modules/widgets/_widgets/sankey-chart/SankeyChart.vue
index 342a9b3619..f01c1563a7 100644
--- a/apps/web/src/common/modules/widgets/_widgets/sankey-chart/SankeyChart.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/sankey-chart/SankeyChart.vue
@@ -178,7 +178,7 @@ const queryResult = useQuery({
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isLoading.value || queryResult.isRefetching.value);
+const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || queryResult.isPending.value);
 const errorMessage = computed<string>(() => {
     if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
     return queryResult.error?.value?.message;
diff --git a/apps/web/src/common/modules/widgets/_widgets/stacked-column-chart/StackedColumnChart.vue b/apps/web/src/common/modules/widgets/_widgets/stacked-column-chart/StackedColumnChart.vue
index 66ea3da707..7fda9247c1 100644
--- a/apps/web/src/common/modules/widgets/_widgets/stacked-column-chart/StackedColumnChart.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/stacked-column-chart/StackedColumnChart.vue
@@ -218,7 +218,7 @@ const queryResult = useQuery({
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isLoading.value || queryResult.isRefetching.value);
+const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || queryResult.isPending.value);
 const errorMessage = computed<string|undefined>(() => {
     if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
     return queryResult.error?.value?.message;
diff --git a/apps/web/src/common/modules/widgets/_widgets/stacked-horizontal-bar-chart/StackedHorizontalBarChart.vue b/apps/web/src/common/modules/widgets/_widgets/stacked-horizontal-bar-chart/StackedHorizontalBarChart.vue
index 29006751e0..d1161bbf7c 100644
--- a/apps/web/src/common/modules/widgets/_widgets/stacked-horizontal-bar-chart/StackedHorizontalBarChart.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/stacked-horizontal-bar-chart/StackedHorizontalBarChart.vue
@@ -212,7 +212,7 @@ const queryResult = useQuery({
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isLoading.value || queryResult.isRefetching.value);
+const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || queryResult.isPending.value);
 const errorMessage = computed<string|undefined>(() => {
     if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
     return queryResult.error?.value?.message;
diff --git a/apps/web/src/common/modules/widgets/_widgets/table/Table.vue b/apps/web/src/common/modules/widgets/_widgets/table/Table.vue
index d3f7013710..8c0d8ce544 100644
--- a/apps/web/src/common/modules/widgets/_widgets/table/Table.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/table/Table.vue
@@ -241,7 +241,7 @@ const queryResults = useQueries({
     ],
 });
 
-const widgetLoading = computed<boolean>(() => queryResults.value?.[0].isLoading || queryResults.value?.[0].isRefetching);
+const widgetLoading = computed<boolean>(() => queryResults.value?.[0].isFetching || queryResults.value?.[0].isPending);
 const errorMessage = computed<string>(() => {
     if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
     return queryResults.value?.[0].error?.message as string;
diff --git a/apps/web/src/common/modules/widgets/_widgets/treemap/Treemap.vue b/apps/web/src/common/modules/widgets/_widgets/treemap/Treemap.vue
index 475817524e..5cc64689e4 100644
--- a/apps/web/src/common/modules/widgets/_widgets/treemap/Treemap.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/treemap/Treemap.vue
@@ -178,7 +178,7 @@ const queryResult = useQuery({
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isLoading.value || queryResult.isRefetching.value);
+const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || queryResult.isPending.value);
 const errorMessage = computed<string>(() => {
     if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
     return queryResult.error?.value?.message;