fix: Adds a loading message when needed in the Select component (#16531)

superset-frontend/src/components/Select/Select.stories.tsx

@@ -300,6 +300,7 @@ const USERS = [
 ];
 
 export const AsyncSelect = ({
+  fetchOnlyOnSearch,
   withError,
   withInitialValue,
   responseTime,
@@ -381,7 +382,9 @@ export const AsyncSelect = ({
       >
         <Select
           {...rest}
+          fetchOnlyOnSearch={fetchOnlyOnSearch}
           options={withError ? fetchUserListError : fetchUserListPage}
+          placeholder={fetchOnlyOnSearch ? 'Type anything' : 'Select...'}
           value={
             withInitialValue
               ? { label: 'Valentina', value: 'Valentina' }

superset-frontend/src/components/Select/Select.tsx

@@ -137,6 +137,13 @@ const StyledSpin = styled(Spin)`
   margin-top: ${({ theme }) => -theme.gridUnit}px;
 `;
 
+const StyledLoadingText = styled.span`
+  ${({ theme }) => `
+    margin-left: ${theme.gridUnit * 3}px;
+    color: ${theme.colors.grayscale.light1};
+  `}
+`;
+
 const MAX_TAG_COUNT = 4;
 const TOKEN_SEPARATORS = [',', '\n', '\t', ';'];
 const DEBOUNCE_TIMEOUT = 500;
@@ -175,7 +182,8 @@ const Select = ({
   );
   const [selectValue, setSelectValue] = useState(value);
   const [searchedValue, setSearchedValue] = useState('');
-  const [isLoading, setLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isTyping, setIsTyping] = useState(false);
   const [error, setError] = useState('');
   const [isDropdownVisible, setIsDropdownVisible] = useState(false);
   const [page, setPage] = useState(0);
@@ -350,9 +358,10 @@ const Select = ({
       const cachedCount = fetchedQueries.current.get(key);
       if (cachedCount) {
         setTotalCount(cachedCount);
+        setIsTyping(false);
         return;
       }
-      setLoading(true);
+      setIsLoading(true);
       const fetchOptions = options as OptionsPagePromise;
       fetchOptions(value, page, pageSize)
         .then(({ data, totalCount }: OptionsTypePage) => {
@@ -361,39 +370,56 @@ const Select = ({
           setTotalCount(totalCount);
         })
         .catch(onError)
-        .finally(() => setLoading(false));
+        .finally(() => {
+          setIsLoading(false);
+          setIsTyping(false);
+        });
     },
     [options],
   );
 
-  const handleOnSearch = debounce((search: string) => {
+  const handleOnSearch = useMemo(
-    const searchValue = search.trim();
+    () =>
-    // enables option creation
+      debounce((search: string) => {
-    if (allowNewOptions && isSingleMode) {
+        const searchValue = search.trim();
-      const firstOption = selectOptions.length > 0 && selectOptions[0].value;
+        // enables option creation
-      // replaces the last search value entered with the new one
+        if (allowNewOptions && isSingleMode) {
-      // only when the value wasn't part of the original options
+          const firstOption =
-      if (
+            selectOptions.length > 0 && selectOptions[0].value;
-        searchValue &&
+          // replaces the last search value entered with the new one
-        firstOption === searchedValue &&
+          // only when the value wasn't part of the original options
-        !initialOptions.find(o => o.value === searchedValue)
+          if (
-      ) {
+            searchValue &&
-        selectOptions.shift();
+            firstOption === searchedValue &&
-        setSelectOptions(selectOptions);
+            !initialOptions.find(o => o.value === searchedValue)
-      }
+          ) {
-      if (searchValue && !hasOption(searchValue, selectOptions)) {
+            selectOptions.shift();
-        const newOption = {
+            setSelectOptions(selectOptions);
-          label: searchValue,
+          }
-          value: searchValue,
+          if (searchValue && !hasOption(searchValue, selectOptions)) {
-        };
+            const newOption = {
-        // adds a custom option
+              label: searchValue,
-        const newOptions = [...selectOptions, newOption];
+              value: searchValue,
-        setSelectOptions(newOptions);
+            };
-        setSelectValue(searchValue);
+            // adds a custom option
-      }
+            const newOptions = [...selectOptions, newOption];
-    }
+            setSelectOptions(newOptions);
-    setSearchedValue(searchValue);
+            setSelectValue(searchValue);
-  }, DEBOUNCE_TIMEOUT);
+          }
+        }
+        setSearchedValue(searchValue);
+        if (!searchValue) {
+          setIsTyping(false);
+        }
+      }, DEBOUNCE_TIMEOUT),
+    [
+      allowNewOptions,
+      initialOptions,
+      isSingleMode,
+      searchedValue,
+      selectOptions,
+    ],
+  );
 
   const handlePagination = (e: UIEvent<HTMLElement>) => {
     const vScroll = e.currentTarget;
@@ -469,9 +495,18 @@ const Select = ({
     if (!isDropdownVisible) {
       originNode.ref?.current?.scrollTo({ top: 0 });
     }
+    if ((isLoading && selectOptions.length === 0) || isTyping) {
+      return <StyledLoadingText>{t('Loading...')}</StyledLoadingText>;
+    }
     return error ? <Error error={error} /> : originNode;
   };
 
+  const onInputKeyDown = () => {
+    if (isAsync && !isTyping) {
+      setIsTyping(true);
+    }
+  };
+
   const SuffixIcon = () => {
     if (isLoading) {
       return <StyledSpin size="small" />;
@@ -496,6 +531,7 @@ const Select = ({
         mode={mappedMode}
         onDeselect={handleOnDeselect}
         onDropdownVisibleChange={handleOnDropdownVisibleChange}
+        onInputKeyDown={onInputKeyDown}
         onPopupScroll={isAsync ? handlePagination : undefined}
         onSearch={shouldShowSearch ? handleOnSearch : undefined}
         onSelect={handleOnSelect}