feat: remove loading indicator when typing in select

[ktmud]

SUMMARY

Remove the loading indicator in select option menus when users are typing and (some) options are already loaded. The loading indicator showing up as users type was added in #16531, while tackling the issue of the inaccurate "No data" message when data is still loading. But we shouldn't show "Loading..." when there are already filtered options available. Removing this unnecessary loading indicator makes the control feels faster.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before

The "Loading..." option shows up as soon as users type, even when all options are loaded:

After

No "Loading..." option when users start to type, but there is a loading indicator in the input and all filtered options will show up after actual loading is finished:

When all options are loaded for a specific search string, there is no loading indicator at all and no excessive requests will be fired.

TESTING INSTRUCTIONS

1. Run npm run storybook in superset-frontend
2. Test it in the storybook: http://localhost:6006/?path=/story/select--async-select
   1. Try search for something in and not in the first page. E.g. "ale", "sandro"
   2. "No data" should not show up if there is a match in loaded options or the next page is still loading
   3. "Loading..." should not show up if there is already a matched option

ADDITIONAL INFORMATION

• Has associated issue: fix: Adds a loading message when needed in the Select component #16531 chore: Improves the Select component to avoid additional queries when all values have been loaded #16712
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[codecov]

Codecov Report

Merging #18799 (e4ae742) into master (bd63a1b) will decrease coverage by 0.00%.
The diff coverage is 84.21%.

@@            Coverage Diff             @@
##           master   #18799      +/-   ##
==========================================
- Coverage   66.58%   66.58%   -0.01%     
==========================================
  Files        1641     1641              
  Lines       63533    63538       +5     
  Branches     6424     6428       +4     
==========================================
+ Hits        42303    42305       +2     
- Misses      19551    19553       +2     
- Partials     1679     1680       +1     

Flag	Coverage Δ
javascript	51.38% <84.21%> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
superset-frontend/src/components/Select/utils.ts	59.09% <66.66%> (+1.19%)	⬆️
superset-frontend/src/components/Select/Select.tsx	86.69% <85.71%> (-0.67%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update bd63a1b...e4ae742. Read the comment docs.

[michael-s-molina]

@ktmud I found some problems while testing.

The loading indicator is different when we open the select vs when we search for something.

Screen.Recording.2022-02-23.at.1.44.25.PM.mov

The loading spinner is showing after searching and clicking outside the Select. When fetchOnlyOnSearch is true it never stops spinning.

Screen.Recording.2022-02-23.at.1.55.35.PM.mov

[ktmud]

@michael-s-molina Thanks for testing! I've fixed both issues.

[michael-s-molina]

@michael-s-molina Thanks for testing! I've fixed both issues.

@ktmud I just tested it again and the bugs are still happening. Did you forget to commit something?

I also noticed that you removed the debounce from handleOnSearch which is triggering this expensive calculation for every typed key.

Screen.Recording.2022-02-25.at.9.03.22.AM.mov

[ktmud]

@michael-s-molina are you sure you pulled the latest changes? The bugs are fixed for me.

debounce is removed for handleOnSearch but the actual expensive operations are still debounced as in debouncedHandleSearch.

[michael-s-molina]

debounce is removed for handleOnSearch but the actual expensive operations are still debounced as in debouncedHandleSearch.

This part is not debounced:

if (allowNewOptions && isSingleMode) {
    const newOption = searchValue &&
      !hasOption(searchValue, selectOptions) && {
        label: searchValue,
        value: searchValue,
        isNewOption: true,
      };
    const cleanSelectOptions = selectOptions.filter(
      opt => !opt.isNewOption,
    );
    const newOptions = newOption
      ? [newOption, ...cleanSelectOptions]
      : cleanSelectOptions;
    setSelectOptions(newOptions);
  }
  if (isAsync && !allValuesLoaded && loadingEnabled) {
    setIsLoading(search !== searchedValue);
  }

[ktmud]

It's not really expensive. The goal of this whole PR is to make the select options update more responsively to user inputs, which is achieved by separating initial filtering and menu state updates with debounced async requests.

[michael-s-molina]

@michael-s-molina are you sure you pulled the latest changes? The bugs are fixed for me.

Screen.Recording.2022-02-28.at.4.44.13.PM.mov

[michael-s-molina]

It's not really expensive. The goal of this whole PR is to make the select options update more responsively to user inputs, which is achieved by separating initial filtering and menu state updates with debounced async requests.

You can see the loading indicator flicking while you type because it's updating the loading state for every key typed.

Screen.Recording.2022-02-28.at.4.55.19.PM.mov

[ktmud]

@michael-s-molina I can reproduce the bug now. Looks like this might need a larger refactoring than I thought it needed. Thanks for testing!

[ktmud]

@michael-s-molina This should be ready for re-review.

[michael-s-molina]

The allowNewOptions is not working as intended. If you add a new option and then search for it then it will disappear from the options.

Screen.Recording.2022-03-02.at.9.38.08.AM.mov

[ktmud]

The allowNewOptions is not working as intended. If you add a new option and then search for it then it will disappear from the options.

This should have been fixed

[geido]

/testenv up

[github-actions]

@geido Ephemeral environment spinning up at http://34.217.29.213:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[michael-s-molina]

I haven't found any other problems while testing. Thank you so much @ktmud for improving the user experience of the component and for addressing all suggestions.

@geido was doing some tests with real data so I would kindly request to wait for his approval as well before merging the PR given the critical nature of the component.

[michael-s-molina]

Suggested change

	optionsArray.find(x =>
	typeof x === 'object' ? x.value === value : x === value,
	) !== undefined
	optionsArray.find(option =>
	typeof option === 'object' ? option.value === value : option === value,
	) !== undefined

[ktmud]

In general I prefer to use x in these one liners because sometimes you may want to rename the iterable variable as well.

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.