How can I add a spinner to a page or a macro

[Qi_Zhang]

I have a relatively large confluence page. And it takes about 10-15 seconds to load and display all macros/components. 

How can I add spinner to the entire page, or maybe to individual macros so people know the page is still loading?

[Matt · Accepted solution]

One possible solution (only applicable to Server/Data Center) is to add an HTML macro to the page and use JS/CSS/HTML. 

CSS to hide the main page body while it loads, then some JS to show a loader and set a timeout of 5 seconds before removing the loader and displaying the page. You can adjust that time depending on how long the page actually takes to load.

<style> 
#main-content { display:none } 
#loading { display: flex; flex-direction: column; align-items: center; justify-content: center; } 
#loading aui-spinner { margin: 1em; } 
.custom-card-style { border-radius: 3px; box-shadow: 0 1px 1px rgba(9, 30, 66, 0.25), 0 0 1px 0 rgba(9, 30, 66, 0.31); margin: 0 auto; padding: 10px; width: 20em; } 
</style> 

<script> 
AJS.toInit(function () {
AJS.$('#main-content').before('<div id="loading" class="custom-card-style"><p>Loading page...</p><aui-spinner size="large"></aui-spinner></div>'); 
setTimeout(function(){ AJS.$('#loading').remove(); AJS.$('#main-content').show(); } ,5000) 
}); 
</script> 

Place the HTML macro as the 1st macro in the page. Just be aware that it will be displayed in full when editing the page. 

More details regarding spinners & AUI:
https://aui.atlassian.com/aui/latest/docs/spinner.html

[Qi_Zhang]

Thank you so much. This is really helpful! Thank you