[Autocomplete] options are displayed even if loading is true

[sclavijo93]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When you have options available and you set loading to true, the options and the 'Loading..." message are visible at the same time.

Expected Behavior 🤔

I think the options can be hidden while loading is set to true.

Steps to Reproduce 🕹

Steps:

1. codesandbox.io reproduction
2. Type a letter.
3. Check that Loading message and options are visible at the same time

Context 🔦

I'm working on an autocomplete that calls an API on every keystroke using throttle as in the Google maps demo and I want to show the 'Loading...' message while the API is been queried.

I've found a workaround but maybe the options has to be hidden when loading by default?

Workaround:

options={!loading ? top100Films : []}

Your Environment 🌎

Tech	Version
Material-UI	v4.7.0
React	v16.10.2
Browser	All

[oliviertassinari]

I think the options can be hidden while loading is set to true.

@sclavijo93 This is related to #18450. What do you think of the opposite, we don't display the loading text in the popup if options are available?

diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
index f236baa0e..bd6f52c52 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
@@ -378,7 +378,9 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
           open
         >
           <PaperComponent className={classes.paper}>
-            {loading ? <div className={classes.loading}>{loadingText}</div> : null}
+            {loading && groupedOptions.length === 0 ? (
+              <div className={classes.loading}>{loadingText}</div>
+            ) : null}
             {groupedOptions.length === 0 && !freeSolo && !loading ? (
               <div className={classes.noOptions}>{noOptionsText}</div>
             ) : null}

[sclavijo93]

@oliviertassinari In my case I would like to show when the options are been loading. It's a way to say "Hey, the options that you're seeing aren't updated, just wait a minute please until the querying is finished". Or do you think that's not necessary?

[oliviertassinari]

I think that in your case, I would use the CircularProgress demo we have, with the above changes.

[sclavijo93]

Hmm, didn't noticed that. Ok, I'll try with that solution. Thanks!

Do you want me to send a PR with the code you mentioned above?

[oliviertassinari]

If you have the time to send a pull request, that would be awesome :)