Loading indicator in Search bar

[aishwarya2392]

Is it possible to have a loading indicator in the Input search bar(similar to react-select) to indicate that the data is loading?

[mrchief]

data is always there since it's the caller that fetches it and assigns it - so there's no loading state. Now if you want to show a loading indicator while you're fetching then in that case, I think you can hide the component and show a loader and once the data is fetched, toggle back the component.

Let me know if you've a different use case in mind.

[aishwarya2392]

My data is retreived through an API call that might take a bit of time, so until that there could be some indication to say that data is loading. Hiding the component is fine, but in my use case, i have other react-select also, so I cannot altogether hide this because it might look odd.

[mrchief]

You can do something like this:

• data load begins - <DropdownSelect data={[]} readonly=true disabled=true /> and show a loader on top of the component (using css, z-index)
• data load completes - <DropdownSelect data={data} />; remove the loader class (hide the loader)

Wrap this up in HoC if you use it in multiple places.