Add css for loading visual hint to plotly figure div

Chưa có ai nhận issue này.

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.

Tìm đoạn mã tạo ra div của figure Plotly và HTML xung quanh nó, sau đó so sánh với loading component được hiển thị trong issue. Xác minh kết quả bằng cách tải CDN chậm: một figure trống phải hiển thị loading indicator và indicator này biến mất khi Plotly render figure.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Hướng dẫn đóng góp

Bắt đầu từ đâu

Hướng nghiên cứu

Đánh giá