dcc.Loading not working with bootstrap

[sanabria]

I built an app with standard dcc.Loading components:

dcc.Loading(
  dcc.Graph(
    id='conversion_experiment',
  ),

which is working. However, when I try to add an external stylesheet for bootstrap (eg for dash-bootstrap-components), the loading animation stops working:

This works:
external_stylesheets = [
‘https://codepen.io/chriddyp/pen/bWLwgP.css’,
]

This breaks the dcc.Loading:

external_stylesheets = [
‘https://codepen.io/chriddyp/pen/bWLwgP.css’,
“https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css”
]

Anyone know what could be the issue ? Thanks!!

[tcbegley]

Very strange, just adding CSS shouldn’t break things, the CSS classes used to style the spinner are all quite specific to Dash, so it’s unlikely to be a clash there.

I tried making a minimal example that reproduces the issue, but this worked for me with both Bootstrap included and Bootstrap not included. Does it work for you too?

import time

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(
    external_stylesheets=[
        "https://codepen.io/chriddyp/pen/bWLwgP.css",
        "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css",
    ]
)

app.layout = html.Div(
    [html.Button("load", id="button"), dcc.Loading(html.Div(id="output"))]
)


@app.callback(Output("output", "children"), [Input("button", "n_clicks")])
def load_content(n):
    time.sleep(3)
    return "Loaded!"


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