[v2] Loading indicator disappears once the menu is opened

If we open the menu while Async component is loading the options, loadingIndicator disappears even though loadOptions is not yet completed. noOptionsMessage displayed until the options are loaded but no more loadingIndicator(Even if you open/close the menu, it’s same). There is no indication if the options are still loading.

Although it’s a simple scenario, I couldn’t find a similar bug report. Simple test case forked from the web site: https://codesandbox.io/s/14919k7q4

Would there be an alternative way to fix this problem?

[sahibjotsaggu]

@Atralbus So the problem is here: https://github.com/JedWatson/react-select/blob/master/src/Async.js#L108

It looks like when you click away from the dropdown, it triggers an onInputChange and since inputValue is "", it sets the isLoading state to false.

I think this is definitely a bug, @jossmac, can you please confirm this?

[Atralbus]

@matthova I think the best option is to handle loading indicator manually with isLoading prop. And I’m using Select component instead of Async since the loadOptions is causing different problems. I reload options when it’s necessary.

Sample code with RxJS to show how I handle loading in the state;

export default class CompWithSelect extends Component {
  constructor(props: Props) {
    super(props)
    this.state = {
        options: [],
        input: '',
        loading: false
    }
    this.search$ = new Subject()
  }

  componentDidMount() {
    this.search$
    .debounceTime(500)
    .do(() => this.setState({ options: [], loading: true }))
    .switchMap(str => this.props.dispatch(runSimpleProgram(str))
      .scan((acc, curr) => curr.name === 'TaskResult' ? [...acc, ...curr.data] : acc, [])
      .finally(() => this.setState({ loading: false }))
    )
    .subscribe(
      (data) => this.setState({
        options: data.map(({value}) => ({value, label: value}))
      }),
      () => this.setState({ loading: false })
    )
  }

  componentDidUpdate(prevProps: Props) {
    if (/* related props changed */) {
      this.search$.next(this.state.input)
    }
  }

  componentWillUnmount() {
    this.search$.unsubscribe()
  }

  handleInputChange = (input: string) => {
    if (this.state.input !== input) {
      this.setState({input})
      this.search$.next(input)
    }
  }

  handleValuesChange = (options: Array<{value: string}>): void => {
    const values = options
      .map(prop('value'))

    this.props.onValuesChange(values)
  }

  handleFocus = () =>
    isEmpty(this.state.options)
    && this.search$.next(this.state.input)

  render () {
    const { values } = this.props
    const { options, loading } = this.state
    return (
      <div>
        <Creatable
          name='values'
          isMulti
          isLoading={loading}
          value={values.map(v => ({label: v, value: v}))}
          options={options}
          filterOption={() => true} // to prevent react-select filter
          onInputChange={this.handleInputChange}
          onChange={this.handleValuesChange}
          onFocus={this.handleFocus}
          closeMenuOnSelect={false}
          createOptionPosition='first'
          allowCreateWhileLoading
        />
      </div>
    )
  }
}