Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

[BUG] Fix overlay_style in dcc.Loading #2858

Closed
AnnMarieW opened this issue May 13, 2024 · 0 comments · Fixed by #2860
Closed

[BUG] Fix overlay_style in dcc.Loading #2858

AnnMarieW opened this issue May 13, 2024 · 0 comments · Fixed by #2860
Labels
bug something broken sev-2 serious problem

Comments

@AnnMarieW
Copy link
Collaborator

AnnMarieW commented May 13, 2024

dash>= 2.17.0

The overlay_style prop in dcc.Loading should apply only to the background and not the spinner component. You can see it in the docs - here is the example:

This could be tagged as a "Good First Issue". If someone doesn't get to it first, I think I can fix it 🙂

import time

from dash import Dash, Input, Output, callback, html, dcc, no_update
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    [
        dbc.Button("Start", id="loading-overlay-button", n_clicks=0),
        dcc.Loading(
            [dbc.Alert("My Data", id="loading-overlay-output", className="h4 p-4 mt-3")],
            overlay_style={"visibility":"visible", "filter": "blur(2px)"},
            type="circle",
        ),
    ]
)


@callback(
    Output("loading-overlay-output", "children"),
    Input("loading-overlay-button", "n_clicks"),
)
def load_output(n):
    if n:
        time.sleep(1)
        return f"Data updated {n} times."
    return no_update

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

@Coding-with-Adam Coding-with-Adam added bug something broken sev-2 serious problem labels May 13, 2024
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
bug something broken sev-2 serious problem
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants