Show spinner till data loads in google spreadsheet

Question

. 。 Answers to this question are eligible for a +50 reputation bounty. John Grischam wants to to this question. 。

I have embedded a google spreadsheet on my website through an iframe. But data take time to load on the spreadsheet. Is there any add-on or a simple script that i can include to my spreadsheet to show a spinning arrow till all data is loaded in my spreadsheet. Otherwise it just shows a white screen for around 5 to 10 seconds.

 <iframe name='iframe2' scrolling='no' src='https://docs.google.com/spreadsheets/d/e/2PACX-1vQyRGpXqAZ15m-WEyI6mbCIVZrWssEZcEs8nIu7H0NdwELvvg7hDH4GOBJ7HuLMWQxhDdP8Ft9uQsPe/pubhtml?widget=true&headers=false' style='height: 1000px;width:360px;margin-right: auto; margin-left: auto; text-align:center;background:white;display:block;overflow:hidden;'></iframe>

Answer 1

i'm not sure, but maybe you're looking for something like this:

let spinner = true; 
document.querySelector("iframe").addEventListener("load", () => {
  console.log("iframe content loaded");
  spinner = false;
});

found the implementation here

i've created a sandbox here - it fails to find the iframe on the initial load (i think due to the implementation of the sandbox site itself), but if you click refresh in the preview window, it works as expected

Answer 2

There is no way to add an "add-on or simple script" to add a spinner to the spreadsheet, instead modify the webpage holding the iframe tag as follows,

1. Add the spinner to your HTML ( you might use a framework for this)
2. Put the iframe tag as a children of another tag, ie a div, and hide it using style="visibility:hidden;".
3. Use the window load event to remove the spinner by using style.display = 'none' and turn the visibility of the iframe parent to visible .

The following sample use Bootstrap for the spinner.

 window.onload = () => { document.querySelector('iframe').parentNode.style.visibility = 'visible' document.querySelector('.spinner-border').style.display = 'none' }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <div class="spinner-border" role="status"> <span class="sr-only">Loading...</span> </div> <div style="visibility:hidden;"> <iframe name='iframe2' scrolling='no' src='https://docs.google.com/spreadsheets/d/e/2PACX-1vQyRGpXqAZ15m-WEyI6mbCIVZrWssEZcEs8nIu7H0NdwELvvg7hDH4GOBJ7HuLMWQxhDdP8Ft9uQsPe/pubhtml?widget=true&headers=false' style='height: 1000px;width:360px;margin-right: auto; margin-left: auto; text-align:center;background:white;display:block;overflow:hidden;'></iframe> </div>