Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

Support loading states #171

Merged
merged 1 commit into from Apr 7, 2019
Merged

Support loading states #171

merged 1 commit into from Apr 7, 2019

Conversation

tcbegley
Copy link
Collaborator

@tcbegley tcbegley commented Mar 30, 2019

This PR addresses #165 by adding a loading_state prop to all components, which in turn is used to set the data-dash-is-loading attribute.

This makes dash-bootstrap-components compatible with the new Loading component in dash-core-components. Here's a simple example:

import time

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
from dash.dependencies import Input, Output

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

app.layout = dbc.Container(
    [
        dbc.Button("Load", id="button"),
        dbc.Card(
            [
                dbc.CardHeader("Card header"),
                dcc.Loading(dbc.CardBody(id="content")),
            ],
        ),
    ]
)


@app.callback(Output("content", "children"), [Input("button", "n_clicks")])
def load(n):
    if n:
        time.sleep(1)
        return f"The card content has been reloaded {n} times"
    return "The card content has not yet been reloaded"


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

I made a prerelease for testing this: pip install dash-bootstrap-components==0.3.7rc1

Happy to take ideas on how to test this properly, I've tested a lot of components so far, but not all.

@pbugnion
Copy link
Member

pbugnion commented Apr 7, 2019

This looks great! Maybe in a separate PR, would it make sense to document compatibility between dash loading states and dash-bootstrap-components?

We could even make a separate component or classes that use Bootstrap's spinner once PR #161 is merged?

@tcbegley
Copy link
Collaborator Author

tcbegley commented Apr 7, 2019

Maybe in a separate PR, would it make sense to document compatibility between dash loading states and dash-bootstrap-components?

Agreed. It would be good to think about how we can expand the documentation past the component pages, to cover examples, custom css and things like this.

We could even make a separate component or classes that use Bootstrap's spinner

Yes that would be great!

@tcbegley tcbegley merged commit 6050cda into master Apr 7, 2019
@tcbegley tcbegley deleted the loading-states branch Apr 7, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants