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?
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
Thank you so much. This is really helpful! Thank you
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.