[v2] No way to manually set isLoading on async select box

[standayweb]

So I'm using the isLoading prop on the normal Select to show a loader in the select box after you select something while it is fetching data to populate some fields below.

Somewhere else in the app I am trying to do the same with the async select component and it doesn't seem to work, I think it should be possible to override the isLoading prop.

[fkarlin]

I think I have the same problem as you, if you mean the text "Loading ..." that appears? I want to be able to delete it or alternatively edit the text.

[standayweb]

@fkarlin I'm talking about the indicator not the text

[ebonow]

This is still an issue! The isLoading prop gets completely ignored by the AsyncSelect.

    constructor(props: Props) {
      super();
      this.state = {
        defaultOptions: Array.isArray(props.defaultOptions)
          ? props.defaultOptions
          : undefined,
        inputValue: '',
        isLoading: props.defaultOptions === true ? true : false,
        loadedOptions: [],
        passEmptyOptions: false,
      };
    }
    componentDidMount() {
      this.mounted = true;
      const { defaultOptions } = this.props;
      if (defaultOptions === true) {
        this.loadOptions('', options => {
          if (!this.mounted) return;
          const isLoading = !!this.lastRequest;
          this.setState({ defaultOptions: options || [], isLoading });
        });
      }
    }

[ebonow]

And here is the render method. This seems like the best place to address it as the Async isLoading state seems independent from the user manually wanting to display the indicator.

render() {
      const { loadOptions, ...props } = this.props;
      const {
        defaultOptions,
        inputValue,
        isLoading,
        loadedInputValue,
        loadedOptions,
        passEmptyOptions,
      } = this.state;
      const options = passEmptyOptions
        ? []
        : inputValue && loadedInputValue ? loadedOptions : defaultOptions || [];
      return (
        // $FlowFixMe
        <SelectComponent
          {...props}
          filterOption={this.props.filterOption || null}
          ref={ref => {
            this.select = ref;
          }}
          options={options}
          isLoading={isLoading}
          onInputChange={this.handleInputChange}
        />
      );
    }

It looks like the solution can be addressed on line 171:

isLoading = {isLoading || props.isLoading}

Thoughts?

[Mawaheb]

has this been fixed?

[aurels]

Will this PR be merged ? :-)

[oudoulj]

Sorry for the duplicate but I'm still trying to figure out how to always hide the "Loading..." and the 3 dots on the right while typing in an Async select [v3].
How do I do that ?
Thanks!

[firrae]

Trying to understand this, but is isLoading now an option on async-select/async-creatable? I just want to set it when I load in the data in the background because I manually handle it currently as it's dependent on 2 other dropdowns.