from dash import Dash, html, Input, Output, dcc

app = Dash(prevent_initial_callbacks=True)

app.layout = html.Div([
    html.Button("Button 1", id="btn1"),
    html.Button("Button 2", id="btn2"),
    html.Button("Button 3", id="btn3"),
    dcc.Loading(html.P(id="logA"), overlay_style={"visibility":"visible", "opacity": 0.5, "backgroundColor": "#000"}, custom_spinner=html.Div(id="logB"), id="logC")
])

# Works (accessing direct child of layout)
app.clientside_callback(
    """
    async function(){
        const content = document.getElementById("logA");

        if (!content) {
            console.error("content element not found!");
            return;
        }
		
        await new Promise(r => setTimeout(r, 10000)); 
        return "Test";
    }
    """,
    Output("logA", "children"),
    Input("btn1", "n_clicks"),
    prevent_initial_call=True
)

# Does not work (accessing custom_spinner element)
app.clientside_callback(
    """
    function(){
        const content = document.getElementById("logB");

        if (!content) {
            console.error("content element not found!");
            return;
        }
        
        return "loading test...";
    }
    """,
    Output("logB", "children"),
    Input("btn1", "n_clicks"),
    prevent_initial_call=True
)

# Does not work (accessing the Loading component itself)
app.clientside_callback(
    """
    function(){
        const content = document.getElementById("logC");

        if (!content) {
            console.error("content element not found!");
            return;
        }
        
        return "loading test...";
    }
    """,
    Output("logC", "children"),
    Input("btn1", "n_clicks"),
    prevent_initial_call=True
)

if __name__ == '__main__':
    app.run_server(debug=True)