# Dropdown Selector very slow to load (12 secs to render)

**URL:** <https://community.plotly.com/t/dropdown-selector-very-slow-to-load-12-secs-to-render/64568>\
**Category:** Dash Python\
**Tags:** question\
**Created:** [May 27, 2022, 2:02pm UTC](https://community.plotly.com/t/dropdown-selector-very-slow-to-load-12-secs-to-render/64568 "2022-05-27T14:02:33Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![cdolfi](https://avatars.discourse-cdn.com/v4/letter/c/43a26b/32.png) [@cdolfi](https://community.plotly.com/u/cdolfi)\
**Post date:** [May 27, 2022, 2:02pm UTC](https://community.plotly.com/t/dropdown-selector-very-slow-to-load-12-secs-to-render/64568/1 "2022-05-27T14:02:33Z")

</div>

I am trying to create a dropdown with 10k+ entries in it. We were experience significant slow down on the app and discovered it was from the dropdown taking 12 seconds to load in the options. Are there any suggestions on more efficient implementation? I have read through multiple issues on the plotly github on this topic and while it seems like there were code changes to improve this, I could not find any examples or details on how to implement. The code we are using for the drop down is very simple, and it is getting data from a dcc.store.

dcc.Dropdown(  
id=“projects”,  
multi=True,  
value=[“agroal”],  
options=[  
{“label”: x, “value”: x}  
for x in entries  
],  
)

---

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [May 27, 2022, 7:21pm UTC](https://community.plotly.com/t/dropdown-selector-very-slow-to-load-12-secs-to-render/64568/2 "2022-05-27T19:21:31Z")

</div>

Hi @cdolfi  
Welcome to the community.

10k is a lot but it shouldn’t take that long.  
However, dynamic options may be the way to go [Dropdown | Dash for Python Documentation | Plotly](https://dash.plotly.com/dash-core-components/dropdown#dynamic-options)

---

<div class="post-metadata">

**Author:** ![jkunstle](https://avatars.discourse-cdn.com/v4/letter/j/b9e5f3/32.png) [@jkunstle](https://community.plotly.com/u/jkunstle)\
**Post date:** [May 31, 2022, 6:44pm UTC](https://community.plotly.com/t/dropdown-selector-very-slow-to-load-12-secs-to-render/64568/3 "2022-05-31T18:44:07Z")

</div>

Hey @adamschroeder, I’m on the same team as @cdolfi working on this issue. At the moment, using a dynamic callback isn’t feasible unless we prevent the update for substrings of 3 characters or fewer. Searches of 1-character-long substrings (start of any query) trigger the callback and return a very large subset of the possible options which puts us in the same position as before with ~10,000 options being passed into the Dropdown bar.

Therefore this option isn’t possible for us without further optimization. Any knowledge of common designs in this situation that would be more optimal?

---

<div class="post-metadata">

**Author:** ![jkunstle](https://avatars.discourse-cdn.com/v4/letter/j/b9e5f3/32.png) [@jkunstle](https://community.plotly.com/u/jkunstle)\
**Post date:** [May 31, 2022, 7:33pm UTC](https://community.plotly.com/t/dropdown-selector-very-slow-to-load-12-secs-to-render/64568/4 "2022-05-31T19:33:42Z")

</div>

In the time since posting this I found a successful work-around that should have been obvious earlier but wasn’t: we can just limit the number of results from the searchbar to some relatively small number (250 for me right now) and that’s just fine.

---

<div class="post-metadata">

**Author:** ![jkunstle](https://avatars.discourse-cdn.com/v4/letter/j/b9e5f3/32.png) [@jkunstle](https://community.plotly.com/u/jkunstle)\
**Post date:** [February 1, 2023, 12:25am UTC](https://community.plotly.com/t/dropdown-selector-very-slow-to-load-12-secs-to-render/64568/5 "2023-02-01T00:25:43Z")

</div>

Since posting this I’ve had a few further issues, but I also posted a Minimum-Working-Example of what I implemented here, in case someone in the future finds the design that worked for me helpful:

> [@dcc.Dropdown pause before filtering 'options' with callback](https://community.plotly.com/t/dcc-dropdown-pause-before-filtering-options-with-callback/71707/6):
>
> from dash import Dash, dcc, html, Input, Output, State, callback, no\_update app = Dash(\_\_name\_\_) city\_selections = ["New York City", "Montreal", "San Francisco", "Denver", "Jackson Hole", "Seattle",] app.layout = html.Div( [dcc.Dropdown( id="dropdown", options=["Montreal", "San Francisco"], value=["Montreal", "San Francisco"], multi=True, ) ] ) @callback( Output("dropdown", "options"), …