Add css for loading visual hint to plotly figure div

Personne n'a encore pris cette issue.

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.

Repérez le code qui génère le div de la figure Plotly et le HTML qui l’entoure, puis comparez-le au composant de chargement présenté dans l’issue. Vérifiez le résultat avec un chargement lent depuis le CDN : une figure vide devrait afficher un indicateur de chargement qui disparaît une fois que Plotly a rendu la figure.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

Guide de contribution

Par où commencer

Piste de recherche

Évaluation