Is it possible to add some sort of loading spinner while the chart is being rendered ?

[GeorgeFlorian]

Following the issue from React Plotly: plotly/react-plotly.js#310 and the repo not being really maintained, I thought of asking this here as well.

I am using Plotly inside a React component and I am wondering how can I display a loading spinner while the chart is being rendered.
I have a choropleth map with a lot of data and it takes a while for it to finish rendering.
I would like to display a spinner until the chart has finished rendering.

Is this possible ?

Thank you.

[TomBlackwoodTTM]

Easiest method I found was on Stack Overflow which is to do something like

document.getElementById('plot').innerHTML = '<div class="spinner"></div>';

/**
 * Load Data Stuff
 */

document.getElementById('plot').innerHTML = '';
Plotly.newPlot({data:data, layout:layout});

And on your webpage in header styling tags add

<style>
.spinner {
   	position: absolute;
	left: 30%;
	top: 40%;
	height:60px;
	width:60px;
	margin:0px auto;
	-webkit-animation: rotation .6s infinite linear;
	-moz-animation: rotation .6s infinite linear;
	-o-animation: rotation .6s infinite linear;
	animation: rotation .6s infinite linear;
	border-left:6px solid rgba(0,174,239,.15);
	border-right:6px solid rgba(0,174,239,.15);
	border-bottom:6px solid rgba(0,174,239,.15);
	border-top:6px solid rgba(0,174,239,.8);
	border-radius:100%;
}
	
@-webkit-keyframes rotation {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
	from {-moz-transform: rotate(0deg);}
	to {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
	from {-o-transform: rotate(0deg);}
	to {-o-transform: rotate(359deg);}
}
@keyframes rotation {
	from {transform: rotate(0deg);}
	to {transform: rotate(359deg);}
}
</style>

And then it listed various stylings you could get from this link

[GeorgeFlorian]

Easiest method I found was on Stack Overflow which is to do something like

document.getElementById('plot').innerHTML = '<div class="spinner"></div>';

/**
 * Load Data Stuff
 */

document.getElementById('plot').innerHTML = '';
Plotly.newPlot({data:data, layout:layout});

And on your webpage in header styling tags add

<style>
.spinner {
   	position: absolute;
	left: 30%;
	top: 40%;
	height:60px;
	width:60px;
	margin:0px auto;
	-webkit-animation: rotation .6s infinite linear;
	-moz-animation: rotation .6s infinite linear;
	-o-animation: rotation .6s infinite linear;
	animation: rotation .6s infinite linear;
	border-left:6px solid rgba(0,174,239,.15);
	border-right:6px solid rgba(0,174,239,.15);
	border-bottom:6px solid rgba(0,174,239,.15);
	border-top:6px solid rgba(0,174,239,.8);
	border-radius:100%;
}
	
@-webkit-keyframes rotation {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
	from {-moz-transform: rotate(0deg);}
	to {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
	from {-o-transform: rotate(0deg);}
	to {-o-transform: rotate(359deg);}
}
@keyframes rotation {
	from {transform: rotate(0deg);}
	to {transform: rotate(359deg);}
}
</style>

And then it listed various stylings you could get from this link

Firsty, I am using React and the React Plotly component. So I won't use document.getElement... nor Plotly.newPlot({data:data, layout:layout});.

Secondly, all my data is already loaded before the chart begins rendering.

I don't need a loading spinner for fetching the data, I need a loading spinner for rendering the chart, because on charts with large data (gapminder, choropleth), Plotly takes ages to render that chart.
There is no hasEndedRendering method or event available.

[gvwilson]

Hi - we are trying to tidy up the stale issues and PRs in Plotly's public repositories so that we can focus on things that are still important to our community. Since this one has been sitting for several years, I'm going to close it; if it is still a concern, please add a comment letting us know what recent version of our software you've checked it with so that I can reopen it and add it to our backlog. Thanks for your help - @gvwilson