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
dcc.Loading(
id = "map-loading",
type = "default",
className = "map-loading",
fullscreen=False,
children=dcc.Graph(id="map-d"),
),
dcc.Input(id='input1')
]),
@app.callback([
Output("map-d", "figure"),
],
[
Input("input1", "value"),
Input("map-d", "relayoutData")
],
)
def update_map(input1):
# check for triggered inputs / states
ctx = dash.callback_context
print(ctx.triggered)
# some operations
data.append(d)
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:
