React-select: How to control isLoading and the spinner?

[hipertracker]

Is there any example which for asynOptions which could display spinner showing up during waiting for the data? I can load options from the server but the field is not showing any spinner. Just no options, until they are available. The original example from README file is too simple.

[mik01aj]

In docs on http://jedwatson.github.io/react-select/ you should see the spinner when typing 'a' in the last box. And you should also see it in your own examples, after the your function from asyncOptions was called, yet before the call to callback(null, {options: [...]}).

[BenJenkinson]

I agree with @hipertracker.

The spinner is not automatically shown when the component is loading the data for the very first time, i.e. when { autoLoad: true }.

I've had a look through the source, and I believe that the method autoloadAsyncOptions(..) needs to set isLoading: true before it tries to load data.

Something like:

    autoloadAsyncOptions: function() {
        this.setState({
            isLoading: true
        });
        this.loadAsyncOptions((this.props.value || ''), { isLoading: false }, () => {
            // update with fetched but don't focus
            this.setValue(this.props.value, false);
        });
    },

[sslotsky]

I actually have the opposite problem, my loading circle never goes away even after I've selected options. Is this related?

[LAKnoKAL]

@sslotsky the same shit

[keul]

Related to this: although the official documentation says that you can pass an isLoading prop to the Async select...

Will cause the select to be displayed in the loading state, even if the Async select is not currently waiting for loadOptions to resolve

This is not true. The prop is never read/used by the Async component

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're cleaning up and closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!