Forum Academy Marketplace Showcase Pricing Features

How to load over 5000 items in a multi-dropdown

So we are trying to load 5K items into a dropdown.

When the particular group becomes visible the control starts loading it seems. It takes up to 5 seconds for the placeholder to show up.

In typical flow the user wont get to this part of the page (making this group visible) for at least 5 to 6 seconds and most likely much longer.

Is there a way to have the control start loading sooner?

Try setting the search it preforms as a page state and having the contents of the drop down be the at state

So you have a dropdown with 5k items? In just one dropdown?
Sounds like a lot to display in my opinion. Maybe is easier to change some of the UX/UI for finding a way around? A dropdown with just categories or more general parent groups of the items you display?
Not sure what you are building though so maybe it’s not relevant what I propose

1 Like

Thanks Chris. Will try that.

design.agx - we’re using the multi-dropdown which has has text search and is the main reason we’re using it. And the call to action is to start typing to search for the contextual items in the list. Its basically a mini search tool.

You’ll likely experience a lag at some stage in the process because you are asking Bubble to download 5,000 items onto the page.

To avoid this, I wonder if you could use a Searchbox instead. If you need to allow the user to select multiple options, you could grab a Searchbox result and save it in a custom state list of choices selected.

1 Like

^ this.

Or an input box with a group focus below when input is empty that holds a repeating group of the search.

1 Like

Thanks.

I checked out searchbox and its definitely interesting. Its not ideal though because the dropdown has the benefit of demonstrating the kinds of content that is desired and for shorter lists it works well to just scroll and select.

Its an interesting fallback option though.

I know i’m not everybody by any stretch of the imagination but if you you told me i’d have to scroll through 5000 entries, i’d tell you to add a search feature and a piece of info that tells me some tips on how to search with the ability to check out al 5000 only if searching didn’t work for me

that’s too much for most users to scroll through.

it’s also pretty well impossible to view and consider 5000 different choices at the same time.

maybe consider a repeating group that displays data in a paginated fashion. this could reduce load times and increase UX.

maybe load only 200 items at a time from the DB.
load 50 at a time to view
when you get to number 150 (350, 550, etc) , call out to the DB for the next 200

^^^ just an idea

1 Like

Thanks.

I dont expect people to search as much as just see the first few to get an idea.

The current solution is nice because you set focus and a list of options shows up AND you can choose to scroll OR just keep typing. This one particular field is just one of 5 similar fields. This is the only one with a huge number of choices. For example another one has only 10 items in. Some only have dozens. Some have hundreds. But the action for all the lists is the same. So keeping the model the same helps with cognitive load because they’ve already learned how to use it.

Its funny that the ideal solution comes down to whether choices show up on first click click or not. Push comes to shove i’ll just change the scheme for this one field and use search.

Use by above solution with group focus and when the input is focused display group focus

5000 might be a bit much but this plugin - Selectize by @Jici I find very good for slow loading dropdown lists and well worth trying out.

Gives you search, gives a spinny wheel while loading - decent UX for your users.

3 Likes

Thanks @lindsay_knowcode

I am also keen to know how you are going to get this done. I have a site where user submitted entries will be used as the multi-select dropdown / search results for all other users.

I decided to go with searchbox. reasonable compromise given how how perf was with the multidropdown. After fully implementing the solution with the multi - it was clear that it would never work.

2 Likes