Expand my Community achievements bar.

Anyone knows if we can add loading before page render

Avatar

Level 2

We have AEM page with hundreds of custom components which cause a little long time to render the page, we want to add a loading status, but there are no html elements before the page is ready.

Any suggestion?

5 Replies

Avatar

Community Advisor

Use the following HTML (at the top of the body is best):

<div id="loading"></div>

And this CSS:

#loading {
    background: url('spinner.gif') no-repeat center center;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9999999;
}

And the following JavaScript (uses jQuery):

function hideLoader() {
    $('#loading').hide();
}

$(window).ready(hideLoader);

// Strongly recommended: Hide loader after 20 seconds, even if the page hasn't finished loading
setTimeout(hideLoader, 20 * 1000);

Hope this helps!

Thanks

Avatar

Level 2

Thanks.

I doesn't work for me..

Anything add in the page component body.html will not displayed until the page is starting to load..

 

My scenario is open a page, the page request waiting for server response time is long. When this request get response, then the page DOM is ready, and the page html can be rendered.

Screen Shot 2022-06-30 at 19.47.13.png

 

 

Avatar

Level 2

Checkout your resources included in head section. HTML/Resource rendering starts from top to bottom, so if head section has many resources, will cause delay to load body. Once you have only needed resources in head (css files, meta tags) and other resource requests moved towards end of HTML, then solution provided by @ShaileshBassi should work.

You should also consider using preload/prefetch meta tags [1].

 

[1] https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload 

Avatar

Community Advisor

Hi,

Why does the page taking too long to load? Are you not caching the page? 



Arun Patidar

Avatar

Community Advisor

Hi @aimee8586 ,

May I know what is the use of adding loading status of the page/component?

  • If you would you like to track the time for each component -
    Starting from version AEM 6.0, there is OOTB feature to measure rendering time for each component on a page.
    It is accessible through TouchUI, Developer mode.

    Screen Shot 2022-06-30 at 5.39.35 PM.png

  • If you need them to have it rendered to the end users - IMHO it is not good idea to expose your custom component status to the end users. 

Regards,

Santosh