I have a multi-page dash app that uses a custom full screen spinner on launch. The ide

Thanks <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-u

Hi <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="

dbc.Spinner() intial load lags on launch about dash-bootstrap-components HOT 2 CLOSED

marcstern14 commented on June 11, 2024

dbc.Spinner() intial load lags on launch

from dash-bootstrap-components.

Comments (2)

marcstern14 commented on June 11, 2024 1

Thanks @tcbegley! I did a lot of googling, not sure how I didn't find that thread, but I appreciate your response. This solution works great for me!

from dash-bootstrap-components.

tcbegley commented on June 11, 2024

Hi @marcstern14

Check out this topic on the Plotly Forums.

The "Loading..." appears while the javascript bundles are being fetch and Dash is starting up, so the correct solution is to use some CSS that will be applied on initial page load. Updated and Bootstrap specific example below.

import time

import dash_bootstrap_components as dbc
from dash import Dash


def slow_serve_layout():
    # this is just to slow down the initial load to make the spinner clear
    time.sleep(5)
    return dbc.Container(
        dbc.Alert("Hello, world!", color="success"), className="p-5"
    )


app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = slow_serve_layout

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

._dash-loading {
  margin: auto;
  color: transparent;
  width: 2rem;
  height: 2rem;
  text-align: center;
}

._dash-loading::after {
  content: '';
  display: inline-block;
  width: 2rem;
  height: 2rem;
  color: var(--bs-secondary);
  vertical-align: text-bottom;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: spinner-border 0.75s linear infinite;
  animation: spinner-border 0.75s linear infinite;
  margin-top: 2rem;
}