dcc.Loading - keep children component in view

I am rendering a map-graph component which is wrapped around dcc.Loading. Anytime a user interacts with the map, the loading component is triggered and hides the map.

Some of the operations can take a few seconds, even a couple of minutes. Ideally, I’d like users to view the map while it is loading. Is it possible to do this? I didn’t see a property to control this in the docs: Loading | Dash for Python Documentation | Plotly

layout = html.Div([

                            # Plot properties map
                                id = "map-loading",
                                type = "default",
                                className = "map-loading",




                      Output("map-d", "figure"),
                      Input("input1", "value"),
                      Input("map-d", "relayoutData")

def update_map(input1):

# check for triggered inputs / states
ctx = dash.callback_context

# some operations 

layout = {

             "autosize": True,
             "hovermode": "closest",
             "mapbox": {

                 "accesstoken": MAPBOX_KEY,
                 "bearing": 0,
                 "center": {
                     "lat": x,
                     "lon": y
                 "pitch": 0,
                 "zoom": zoom,
                 "style": "streets",



return ({'data': data, 'layout': layout}) 

Loading current view:

Airbnb example:

You can probably change the opacity of the loading component with some custom CSS. But you won’t be able to interact with the map while the loading state is active.

1 Like