Multiselect Dropdown plugin slow to load default values

saadidris890 · 2024-12-29T04:11:37.645Z

Hi, I am using the Multiselect Dropdown plugin by Bubble. This dropdown takes around 1-2 seconds to show defaults, and I’m wondering if this can be improved.

I have two screens:

Screen 1 - where user selects the list of countries that will serve as tags
Screen 2 - where user creates blog entries and tags them with one or more countries selected on Screen 1

On Screen 2, the user can create blog entries via a popup. There are 2 panes, on the left I show the blog entries, and on the right I show the details of the blog entry selected.

In the details, I show the multiselect dropdown and set the default value to the countries associated with the selected country. I’m using the multiselect dropdown because the user to be able to make inline edits.

Note: The multiselect field searches from a table that stores a user’s selection of countries (from Screen 1), and the default value is set to the countries associated to the selected blog entry.

When I select a blog entry, it takes like 1-2 seconds for the defaults to appear. Why is that and how can I improve it?

Screenshot attached. Hope this makes sense! Thanks.

screenshot792×725 26.5 KB

mitchbaylis · 2024-12-29T07:27:39.841Z

it’s because bubble is delaying the search to fetch the data to try and reduce the searches needed on page load

if you want you can put a repeating group set to 0x0px on the page somewhere and then reference that group as the dropdowns source - that will force bubble to send the data when the repeating group is rendered (even if rendered to 0x0px)

from a data perspective it’s better to delay the search until it is needed, but from a user perspective it might be better to prefetch the data. I added prefetching to a multi step lead form recently since the delays in each step were decreasing conversion - in your use case you likely don’t really need to prefetch the data but that’s up to you.

saadidris890 · 2024-12-29T18:27:28.286Z

Thanks Mitch for responding. I tried that but there’s still a delay.
Here’s how I have the dropdown:

image312×374 9.33 KB

The source is the repeating group values.
The default value is the list of user’s selected countries stored in a custom state.

What’s interesting is that after the initial display, it is super fast. When I click through the different entries on the left side, it then displays the default values immediately.

Thanks again.

saadidris890 · 2024-12-29T18:51:24.295Z

I also did a test to see how the dropdown renders on page load by using another repeating group to fetch the default values, and it still takes 1-2 seconds on load to show the default values

Not sure what alternatives I have or what I should change with the design to avoid the delay.

mitchbaylis · 2024-12-29T23:49:31.743Z

you could add a loader to the page to distract the user

most web apps do this - even simple apps like gmail

just create a float that covers the whole page with a loader gif on it and use “when page is loaded” to hide it

if you’re referencing data in a repeating group then you could also use “when repeating group loading is no” to hide it

possibly the data you’re trying to access in the dropdown is quite heavy which is why it takes seconds to load it

saadidris890 · 2024-12-30T01:34:02.527Z

Thanks I will try that. I think it’s the rendering of the tags that is slow. The data set is very small. 20 countries, and 5 selected as default.