Blueprint: Omnibar: Remote data source?

[jackjwilliams]

Omnibar Remote Data Source

Context

So far I've only seen the ability (on any of the "Select" type controls, including Omnibar), to pass in a list of options. Is it possible to call out to an external datasource for querying?

Examples

I have a Geo Dataset of about 29,000 searchable items. The user would open the omnibar, and begin typing to start querying the API. The API would return possible items for selection.

[giladgray]

@jackjwilliams yes it is entirely possible _in your app code_ to do this. i refuse to implement explicit async support in these components; instead we will eventually provide a single loading prop that you can enable while your app makes async calls (howsoever you would like to implement that).

[subratawebops]

@giladgray Can you provide an example to implement this?

[llorca]

you can use inputProps={{ onChange: ... }} to watch for user input in the omnibar. use that to call your API and return items in your preferred format, then give those items to omnibar via the items prop. All of these Blueprint APIs are documented: http://blueprintjs.com/docs/v2/#select/omnibar 👌

[giladgray]

@subratawebops there are many great examples floating around on the webs detailing how to do async data loading in a React component. have a google!

[jtheisen]

I think the remaining question here is how you would display the spinner to indicate a loading operation.

I have also been wondering how I would make a Select to do a lazy load: I would want the select popover to open and then show a spinner until the data is there. I would probably also want a refresh button somewhere within the popover.

Is this something on your todo-list or can I already do it? (I'd have to use Popover and QueryList to build something like that I think.)

[dmackerman]

I think the remaining question here is how you would display the spinner to indicate a loading operation.

Maybe use the emptyState to display a Spinner?

[giladgray]

@dmackerman i would like to add a loading prop to all the components to visualize a loading state. it will be up to the app to do the actual async operation. let's continue on a new issue please.

[danilofes]

@dmackerman i would like to add a loading prop to all the components to visualize a loading state. it will be up to the app to do the actual async operation. let's continue on a new issue please.

@giladgray Is such issue already open? I think the loading prop is very much needed.