Support loading states

[tcbegley]

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]

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]

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!