Async select with new UI Kit

Forge Forge UI Kit and Custom UI
1

I just recognized that there has been some big changes in how Forge Apps are setup. I immediately setup a new forge app playing around with the new UI Kit and saw that there is now an “isLoading” prop available.

Does this mean we can now fetch a list of options from an external API without the requirement to host a Custom UI?

2

Hi @DavidIhl , the isLoading prop renders the spinner component within the Select component to give the indication that something is being fetched. This is helpful when you have a list of options that you want to fetch from an API before loading it into the options array.

The below is an example use case of how you could use the prop

const App = () => {
   const [isLoading, setIsLoading] = useState(true)
   const [options, setOptions] = useState([])

   useEffect(()=> {
       fetchOptions().then(res => {
           setOptions(res);
           setIsLoading(false);
       })
   }, [])
   return <Select options={options} isLoading={isLoading} />
}
1 Like
3

This are great news, thank you.

To follow up @QuocLieu. In combination with the isSearchable prop this means that I could fetch a default list (e.g. last used) of 10 items and while searching, I can refetch the list signaling with isLoading that the fetch is still going on, correct?

Best regards!

4

Yep that sounds right :slight_smile: . isSearchable is true by default and you can use onInputChange to get your query value to fetch your options

5

Hi @QuocLieu
I don’t understand if I need to retrieve 1000+ project names to populate Select UI Kit component, then how can we query from Server side in smaller batches? When we scroll down the Select component, will it happen?
Please help me with it. I have a similar issue: Can Select UI KIt support lazy loading or how to get more than 1000 options? - #2 by AaronCollier

Thanks,
YY1

6

@YY1

I had a similar problem in my case.
On initialization I fetch the first e.g. 100 results from my server. Then I use onInputChange to recall the API with a searchTerm. The idea is that a user will start to look for his desired item, so if it is just outside the first results the searchTerm will increase the probability to list it (until there is a single result

image

image

@QuocLieu async select works like a charm for me so far, just some minor inconveniences (see: UI Kit Modal + Select - #3 by DavidIhl)

UX whise I am corrently working on to initialize just a list of the “last used” items. Users should always search for a specific item given this many options anyway.

3 Likes