[SOLVED] How to add text to Dash Loading (dcc.Loading) component

How to add text to Dash Loading (dcc.Loading) component

I'd like to use one of the built-in spinners in dcc.Loading but add some text underneath the spinner/loader while it's active.

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

This code will only show the "graph" spinner without any text. Can I add text to the built-in spinner without using the custom_spinner argument? Or do I have to recreate the built-in spinner, add text to it, and then pass it to custom_spinner?

Solution

You can add a className to the dcc.Loading component and define the text to be shown as a css rule targeting the corresponding HTML element.

className (string; optional): Additional CSS class for the built-in spinner root DOM node.

The idea is to set (in a css file in your assets folder) the content of the ::after pseudo-element for that node. For example, let say you set className="spinner" :

.spinner::after { 
  content: "loading...";
}