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.
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.
@fkarlin I'm talking about the indicator not the text
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 });
});
}
}
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?
has this been fixed?
Will this PR be merged ? :-)
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!
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.
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!
Replace the LoadingIndicator component with null
<Select {...yourOtherProps} components={{ LoadingIndicator: null }} />
LoadingIndicator:
I had already tried components={{ LoadingIndicator: null }}
to no avail, at least for the Async select [v3] scenario.
It worked with Styles and loadingIndicator/loadingMessage like I explain here though .
I am still facing this issue in Async selector
I'm doing this currently to fix it:
useEffect(() => {
// Force state isLoading to false on initial render
ref.current.state.isLoading = false;
}, [])
With obviously a ref set on the AsyncSelect component
EDIT:
Actually, due to requirements, i now only need to do this, whenever theres 3 or more chars then show loading. And then pass this into Select's component prop
const LoadingIndicator = (props) => {
if (props.selectProps.inputValue.length < 3) return null;
return (
<components.LoadingIndicator {...props} />
);
};
components={{ DropdownIndicator, LoadingIndicator }}
I fixed it (in v1) by always calling the callback in the 'getOptions' function
if (input.length < 3) {
callback(null, {
complete: true,
options: [],
});
}
Really... async loading is broken... in a component that loads and shows options?
Any update for V3, manually add spinner on isLoading?
Any update for V3, manually add spinner on isLoading?
The fix for this was addressed in this PR and is supported in react-select version 3.1
https://github.com/JedWatson/react-select/pull/3690
Most helpful comment
I am still facing this issue in Async selector