Dash Loading组件：如何让加载动画在初始加载时显示在正确位置

初始加载时Loading动画跑到顶部，核心原因是承载图表的my_figure容器在没有内容的情况下没有高度，导致dcc.Loading的动画找不到正确的占位空间。后续切换选项时，容器因为之前渲染过图表已经有了高度，所以动画位置正常。

给你两种简单的解决方法：

方法一：给容器设置最小高度 #

直接给承载图表的dmc.Box添加最小高度样式，让容器在空状态下也能占据固定空间，Loading动画就会在容器内居中显示：

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", style={"minHeight": "400px"})
        )
    ]
)


@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 []

方法二：初始渲染空Graph占位 #

在布局里直接给my_figure添加一个空的dcc.Graph作为初始内容，利用Graph组件的默认高度让容器一开始就有正确的尺寸：

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",
            # 初始放一个空Graph占位
            children=dmc.Box(id="my_figure", children=dcc.Graph())
        )
    ]
)


@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 []

两种方法都能解决问题，你可以根据实际需求选择：方法一不用提前渲染Graph，更灵活；方法二的容器高度会和实际图表高度更匹配。

内容的提问来源于stack exchange，提问作者Free Palestine