Add css for loading visual hint to plotly figure div

Nobody has claimed this yet.

On a slow Internet connection, when loading a webpage with a plotly figure getting plotly from the cdn (created with include_plotlyjs=False), there is no visual indication that the figure is loading, the page is just empty and frozen until the figure is rendered. An alternative would be to add a loading div which would contain a rotating circle when the plotly fig div is rotating.

Here is an example of code (courtesy of @GaelVaroquaux)

Current plotly figure

<html>
<head><meta charset="utf-8" /></head>
<body>
    <div>
        
                <script type="text/javascript">window.PlotlyConfig = {MathJaxConfig: 'local'};</script>
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>    
            <div id="5ce67915-186c-4a00-9800-072154c9af49" class="plotly-graph-div" style="height:100%; width:100%;"></div>
            <script type="text/javascript">
                
                    window.PLOTLYENV=window.PLOTLYENV || {};
                    
                if (document.getElementById("5ce67915-186c-4a00-9800-072154c9af49")) {
                    Plotly.newPlot(
                        '5ce67915-186c-4a00-9800-072154c9af49',
                        [{"type": "scatter", "x": [1, 2], "y": [2, 2]}],
                        {"template": {}},
                        {"responsive": true}
                    )
                };
                
            </script>
        </div>
</body>
</html>

and adding the loading component

<html>
<head><meta charset="utf-8" /></head>
<body>
    <div>
    <style>
    div.plotly-graph-loading {text-align: center; display: none;}

    @keyframes spinner-border {
        to { transform: rotate(360deg); }
    }

    div.plotly-graph-div:empty + div.plotly-graph-loading {
        margin: -50% auto 0 auto;
        display: block;
        width: 3rem;
        height: 3rem;
        vertical-align: text-bottom;
        border: .4rem solid #222;
        border-right-color: transparent;
        border-radius: 50%;
        animation: spinner-border 1s linear infinite;
    }
    </style>

        
            <div id="5ce67915-186c-4a00-9800-072154c9af49" class="plotly-graph-div" style="height:100%; width:100%;"></div>
	    <div class="plotly-graph-loading" role="status"></div>
                <script type="text/javascript">window.PlotlyConfig = {MathJaxConfig: 'local'};</script>
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>    
            <script type="text/javascript">
                
                    window.PLOTLYENV=window.PLOTLYENV || {};
                    
                if (document.getElementById("5ce67915-186c-4a00-9800-072154c9af49")) {
                    Plotly.newPlot(
                        '5ce67915-186c-4a00-9800-072154c9af49',
                        [{"type": "scatter", "x": [1, 2], "y": [2, 2]}],
                        {"template": {}},
                        {"responsive": true}
                    )
                };
                
            </script>
        </div>
</body>
</html>

This is a small addition but it can be helpful to show that something will happen. What do you think @nicolaskruchten @jonmease? I'm happy to make a PR but wanted to discuss it with you first.

Locate the code that generates the Plotly figure div and its surrounding HTML, then compare it with the loading component shown in the issue. Verify the result with a slow CDN load: an empty figure should show a loading indicator that disappears once Plotly renders the figure.

Written by the indexing model from the issue text.

Description

Contributor guide

First steps

Research direction

Assessment