How to handle long-loading Plotly plots which freeze the browser?

Viewed 421

I have an HTML page that contains a plotly plot. The problem is, since it's a 3D scatter plot with a few hundred points, it locks up the page load when it's loading, and this happens for like 15 seconds, which would cause any user to imagine that there's something wrong with the page.

Is there a switch somewhere where I can defer loading the plotly plot, or have it only load once a user agrees to load it? Or at least display a loading spinner, maybe? I'm really unpracticed in Javascript, so I'm having a hard time imagining where to start.

The div in question starts like this:

<div id="52ccea91-0074-42e3-91fa-d2421bbd09ca" class="plotly-graph-div" style="height:100%; width:100%;"></div>
<script type="text/javascript">
   window.PLOTLYENV=window.PLOTLYENV || {};
                    
      if (document.getElementById("52ccea91-0074-42e3-91fa-d2421bbd09ca")) {
          Plotly.newPlot(
             '52ccea91-0074-42e3-91fa-d2421bbd09ca', ... ... 

I tried changing that second line to <script type="text/javascript" async>, but that doesn't seem to have changed anything.

Should I be wrapping this in some kind of asynchronous loading container?

I should say that this is not using any kind of framework at all, since it's just a plain vanilla HTML page generated from Pandoc.

0 Answers
Related