From 92537f1fd5e8039163950a0cfbd3eb6c8859a4ce Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com>
Date: Mon, 22 Jul 2024 09:01:49 -0300
Subject: [PATCH] fix: Loading of native filter column (#29647)

---
 .../FiltersConfigForm/ColumnSelect.tsx        | 48 +++++++++++--------
 1 file changed, 28 insertions(+), 20 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/ColumnSelect.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/ColumnSelect.tsx
index e83f111972c2a..08cf69fd740ed 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/ColumnSelect.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/ColumnSelect.tsx
@@ -56,6 +56,7 @@ export function ColumnSelect({
   mode,
 }: ColumnSelectProps) {
   const [columns, setColumns] = useState<Column[]>();
+  const [loading, setLoading] = useState(false);
   const { addDangerToast } = useToasts();
   const resetColumnField = useCallback(() => {
     form.setFields([
@@ -87,9 +88,11 @@ export function ColumnSelect({
 
   useChangeEffect(datasetId, previous => {
     if (previous != null) {
+      setColumns([]);
       resetColumnField();
     }
     if (datasetId != null) {
+      setLoading(true);
       cachedSupersetGet({
         endpoint: `/api/v1/dataset/${datasetId}?q=${rison.encode({
           columns: [
@@ -98,26 +101,30 @@ export function ColumnSelect({
             'columns.type_generic',
           ],
         })}`,
-      }).then(
-        ({ json: { result } }) => {
-          const lookupValue = Array.isArray(value) ? value : [value];
-          const valueExists = result.columns.some(
-            (column: Column) => lookupValue?.includes(column.column_name),
-          );
-          if (!valueExists) {
-            resetColumnField();
-          }
-          setColumns(result.columns);
-        },
-        async badResponse => {
-          const { error, message } = await getClientErrorObject(badResponse);
-          let errorText = message || error || t('An error has occurred');
-          if (message === 'Forbidden') {
-            errorText = t('You do not have permission to edit this dashboard');
-          }
-          addDangerToast(errorText);
-        },
-      );
+      })
+        .then(
+          ({ json: { result } }) => {
+            const lookupValue = Array.isArray(value) ? value : [value];
+            const valueExists = result.columns.some(
+              (column: Column) => lookupValue?.includes(column.column_name),
+            );
+            if (!valueExists) {
+              resetColumnField();
+            }
+            setColumns(result.columns);
+          },
+          async badResponse => {
+            const { error, message } = await getClientErrorObject(badResponse);
+            let errorText = message || error || t('An error has occurred');
+            if (message === 'Forbidden') {
+              errorText = t(
+                'You do not have permission to edit this dashboard',
+              );
+            }
+            addDangerToast(errorText);
+          },
+        )
+        .finally(() => setLoading(false));
     }
   });
 
@@ -126,6 +133,7 @@ export function ColumnSelect({
       mode={mode}
       value={mode === 'multiple' ? value || [] : value}
       ariaLabel={t('Column select')}
+      loading={loading}
       onChange={onChange}
       options={options}
       placeholder={t('Select a column')}