Ensure that components are still in the DOM when they are loading.

[shammamah-zz]

Closes #674.

Also these are all the same thing:
Closes #780
Closes #756
Closes #684

About

Since the children property of the dcc.Loading component is not rendered when loading_state.is_loading is true, this leads to some information about user interactions being lost when a graph (specifically, a map) is wrapped in the loading component. In this PR, we still render the children but with visibility: hidden, and display the spinner over top of it. The component is not visible, but it still takes up the same amount of space when it is loading, which avoids issues that have to do with divs shifting up or down during loading if the spinner is smaller or larger than the children.

We might want to instead always return this "wrapper" div that contains both the spinner and the component, and only change the visibility when loading_state.is_loading changes. One issue that stems from this is that the component itself would be moved "down" a level in the DOM, which might affect the CSS/layout of different apps.

Before

After

Sample app code

from urllib.request import urlopen
import json
import pandas as pd
import plotly.graph_objects as go
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate
from time import sleep


with urlopen('https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json') as response:
    counties = json.load(response)


df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/fips-unemp-16.csv",
                 dtype={"fips": str})

app = dash.Dash(__name__)
server = app.server

mapbox_token = "pk.eyJ1IjoicGxvdGx5bWFwYm94IiwiYSI6ImNqdnBvNDMyaTAxYzkzeW5ubWdpZ2VjbmMifQ.TXcBE-xg9BFdV2ocecc_7g"

fig = go.Figure(go.Choroplethmapbox(geojson=counties, locations=df.fips, z=df.unemp,
                                    colorscale="Viridis", zmin=0, zmax=12,
                                    marker_opacity=0.5, marker_line_width=0))
fig.update_layout(mapbox_style="carto-positron",
                  mapbox_accesstoken=mapbox_token,
                  mapbox_zoom=3, mapbox_center={"lat": 37.0902, "lon": -95.7129})
fig.update_layout(margin={"r": 0, "t": 0, "l": 0, "b": 0}, uirevision=True)

app.layout = html.Div(
    children=[
        html.Button(id='btn', children='update', n_clicks=0),
        dcc.Loading(dcc.Graph(id='mapbox-loading', figure=fig), type='default'),
        html.Div(style={'backgroundColor': 'pink'}, children='hello')]
)


@app.callback(
    Output('mapbox-loading', 'figure'),
    [Input('btn', 'n_clicks')]
)
def update(click):
    if click is None or click == 0:
        raise PreventUpdate
    sleep(2)
    fig.update_layout(mapbox_style="light")
    return fig


if __name__ == '__main__':
    app.run_server(debug=True, port=8053)

[Marc-Andre-Rivet]

Missing snapshot baseline and changelog.

I expect a new test that ensures the state wasn't lost before / after the component was in loading state.

[Marc-Andre-Rivet]

I don't see the corresponding snapshot baseline in this PR

[shammamah-zz]

This snapshot is already here:

dash-core-components/tests/unit/__snapshots__/Loading.test.js.snap

Line 224 in 803b67b

exports[`Loading renders: Loading with is_loading=true 1`] = `

The baseline is the same, but the test itself had to change because I moved things "down" in the DOM.

[shammamah-zz]

Running into some strange test failures.

This test

dash-core-components/tests/integration/graph/test_graph_basics.py

Line 36 in b35a560

def test_grbs002_wrapped_graph_has_no_infinite_loop(dash_dcc, is_eager):

fails for both values of is_eager on the CI machine. Upon running the tests locally, they both pass.

The versions of Python, all of the Python packages, and chromedriver are the same on my computer and the CI machine.

Removing this line

dash-core-components/tests/integration/graph/test_graph_basics.py

Line 88 in b35a560

sleep(1)

allows for is_eager=True to pass on the CI machine.

Relevant CI run: https://circleci.com/gh/plotly/dash-core-components/17161#tests/containers/1

[alexcjohnson]

Some tests are currently failing because I didn't put className onto the wrapper div when loading is done, I only put it on the spinner itself, when the spinner is present. Is it useful for this class to be applied to the wrapper? At first glance I'd think this is actually unwanted, because then you can't use this class to target the spinner.

[alexcjohnson]

having this line cuts test discovery time locally from ~10 seconds to <1sec - particularly nice when calling pytest -k ...

I didn't pay attention to the other lines, just copied from dash

[Marc-Andre-Rivet]

🎉

[alexcjohnson]

The spinner now leaves its wrapper div around even after it disappears. I did it this way to ensure React had no chance of being confused about the identity of the real children components - loading or not doesn't change the immediate children of the outer containing div at all. Maybe overly paranoid, but didn't seem like it would hurt, right?

[alexcjohnson]

As a bare assert this gave spurious errors.

[alexcjohnson]

gd_.__test__ === 'boo' should be redundant after we already have gd_ === window.gd to show the DOM element is unchanged, just being paranoid again...

[chriddyp]

Yeah, this part, right? Agreed, it isn't clear to me why this was there.

[chriddyp]

wow very nice 💯

[alexcjohnson]

Only the last test here (006) is new, the others I just pulled out of test_integration_1.py into the dash.testing format before fixing them for the className update

[Marc-Andre-Rivet]

@HammadTheOne, @harryturr When writing tests involving callbacks, using a Lock like ☝️ is not always necessary but is the best practice. Gives you full control of when the callback and your test conditions will be run in respect to one another.

[Marc-Andre-Rivet]

Could we also validate that the graph isn't visible while loading?

[alexcjohnson]

I did that with some of the simpler items eg:

dash_dcc.wait_for_text_to_equal("#btn-3", "")

it looks like it's empty even though it actually still has text in it. Not sure exactly how to do that for a graph though - I suppose I could look directly at the visibility style on the element that sets it to hidden.

[Marc-Andre-Rivet]

If equivalent, all good :D

[chriddyp]

💃

[Marc-Andre-Rivet]

Seems fine in IE11, we are apparently using the part of flex that actually works

[Marc-Andre-Rivet]

🙇