[Python] Dash loading component: how to have spinner appear in the correct place on initial...

On initial load, the spinner is very high up on the page (I guess because no figure has been created yet). On subsequent loads (whenever a new option is selected from the dropdown), the spinner is in the correct place where the figure should be displayed. Any idea how I can make it also be in the correct place on initial load?

import time
import plotly.express as px
import dash_mantine_components as dmc
import dash
from dash import dcc, callback, Output, Input

dash.register_page(module=__name__)

layout = dmc.MantineProvider(
children=[
dmc.Select(
id="dropdown",
data=["bar", "scatter", "none"],
value="bar",
),
dcc.Loading(
type="graph",
children=dmc.Box(id="my_figure")
)
]
)


@callback(
Output("my_figure", "children"),
Input("dropdown", "value")
)
def show_fig(value):
if value == "bar":
time.sleep(5)
return dcc.Graph(figure=px.bar())
elif value == "scatter":
time.sleep(5)
return dcc.Graph(figure=px.scatter())
else:
return []

Continue reading...