Bubble's multi-select searchable drop down selector scale issues

Need help Responsiveness
1

In our app, we frequently have a situation where we need to allow the user to add items to a multi select list. For example, we have a Team feature that allows an admin to add users to a team. We use a drop-down searchable multi-select. Great interface! However, once the number of choices (e.g. number of users to pick from) increase and get past say 50, it crawls to almost a halt! At 100 users/objects to pick from, it takes 30 seconds to load the widget!!

What are our options? Is it considered a bug? Our bubble developer is telling me that it is a core bubble widget and the only way around it is to build it from scratch which takes a lot of effort and will be hard to maintain.

2

You can do a couple of things to make it more performative:

  • Lazy load the amount of users ( i.e. pull them in batches of maybe 50) and add a button or keep track of the scroll position on the dropdown to load more users. When the button is clicked or the scroll position of the dropdown is at the end, append the next 50 users to the dropdowns options.
  • If your search is not already searching for users not in the current team, update it to have that constraint ( i.e. Do a search for users where user is not in current team).
3

Lazy loading is a good alternative to give the impression of higher performance to the user.

But I also ask you to check the status of the app. Since you didn’t show it, your app may be poorly structured. Things like the lack of reusable elements, the lack of use of defined styles, the lack of use of custom events, the use of unnecessary advanced queries, among others… can cause great harm not only to maintenance but also to the performance of data loading. If your app is good, you can disregard this warning.

The last tip I give you is to create a reusable element that contains all the large and complex queries. All the queries will be in separate groups and were initially invisible. When necessary, this group is made visible and the query is loaded. With this data, you can feed your dropdown. This significantly improves data search.