From 1e942dab43dff668db976a2e271429a778f3f107 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Fri, 6 Oct 2023 13:15:05 +0200
Subject: [PATCH] fix: Infinite loading of cascading filters

...need to spread the object to force re-load of the components.
---
 CHANGELOG.md                             |  3 ++-
 app/charts/shared/chart-data-filters.tsx | 17 +++++++++--------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dc324c66b..a685b20b0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,7 +9,8 @@ You can also check the [release page](https://github.com/visualize-admin/visuali
 
 ## Unreleased
 
-Nothing yet.
+- Fixes
+  - Cascading filters are not stuck anymore in the loading mode in some cases
 
 # [3.22.8] - 2023-09-29
 
diff --git a/app/charts/shared/chart-data-filters.tsx b/app/charts/shared/chart-data-filters.tsx
index fcf5518a0..e019534e9 100644
--- a/app/charts/shared/chart-data-filters.tsx
+++ b/app/charts/shared/chart-data-filters.tsx
@@ -48,6 +48,7 @@ import {
   useInteractiveFiltersRaw,
 } from "@/stores/interactive-filters";
 import { hierarchyToOptions } from "@/utils/hierarchy";
+import useEvent from "@/utils/use-event";
 
 type ChartDataFiltersProps = {
   dataSet: string;
@@ -227,11 +228,11 @@ const DataFilter = (props: DataFilterProps) => {
   const dimension = data?.dataCubeByIri?.dimensionByIri;
   const hierarchy = data?.dataCubeByIri?.dimensionByIri?.hierarchy;
 
-  const setDataFilter = (
-    e: SelectChangeEvent<unknown> | { target: { value: string } }
-  ) => {
-    updateDataFilter(dimensionIri, e.target.value as string);
-  };
+  const setDataFilter = useEvent(
+    (e: SelectChangeEvent<unknown> | { target: { value: string } }) => {
+      updateDataFilter(dimensionIri, e.target.value as string);
+    }
+  );
 
   const configFilter = dimension
     ? chartConfig.filters[dimension.iri]
@@ -263,9 +264,9 @@ const DataFilter = (props: DataFilterProps) => {
     dimension?.values,
     dimensionIri,
     fetching,
-    updateDataFilter,
-    // Also reload when the config value changes.
+    setDataFilter,
     configFilterValue,
+    updateDataFilter,
   ]);
 
   return dimension ? (
@@ -603,7 +604,7 @@ const useEnsurePossibleInteractiveFilters = (
 
       // We need to get the values dynamically, as they can get updated by
       // useSyncInteractiveFilters and this callback runs with old value.
-      const dataFilters = IFRaw.getState().dataFilters;
+      const dataFilters = { ...IFRaw.getState().dataFilters };
 
       if (!isEqual(filters, interactiveFilters) && !isEmpty(filters)) {
         for (const [k, v] of Object.entries(filters)) {