How to add the PreLoader in SXA sites – How To Implement Series

Have you ever faced such issue when you have to share your development link with your client, and while you are at the Development phase and your CSS and JS are not set to optimised but you are still to share what you are accomplishing. I know that’s not right but you have do it anyways.

Problem:

With CSS and JS not set to optimised, the page loading takes a hell of a time to load, which can upset your client. You know there are different themes necessary for SXA to work fine. e.g. Core Libraries

This makes the site very bulky to load individual files. This is glimpse on how it looks in my DevTools in Chrome.

dev-tools-sources

281 requests??? are you kidding me?

Well this is normal.

Solution:

With every problem, there is a solution. You just have to see for the work around.

As we could not set the optimiser for JS and CSS ON in our solution because of the continuous development. Well I came up with the workaround which somehow is acceptable because it does not bother you for the incomplete loaded website, instead you patiently wait for the website to come up when all the files are loaded.

preloader.gif

Creating HTML Snippets

What you can do is first create two snippets in your Current website. You can find that in /sitecore/content/[tenant]/[website]/Settings/HTML Snippet

2019-11-10_1716.png

Add HTML markup and Script

You have to now add the code in your PreLoader and PreLoaderInit

Add this html in your PreLoader html snippet.


And and this html and script PreLoaderInit html snippet.

<style>
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.pre-loader{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(-/media/images/preloader.gif) center no-repeat #fff;
}
</style>
//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js
 
$(window).load(function() {
$(".pre-loader").fadeOut("slow");;
});

Add the Loading Image

Add the loading image in the specifed path in your script, in my case  I added in my Media Library/Images/Preloader. You can choose your loader as your choice in gif format.

2019-11-10_1721

Add the snippets in your Head

Now you are ready to place the script in your head. So go to your respective website. In my case it is  /sitecore/content/[tenant]/[website]/Presentation/Partial Designs/Metadata

Add PreLoaderInit  html snippet at very top of your <head> section.

2019-11-10_1715_001.png

Now add PreLoader html snippet at the very top of your <body> tag in your metadata of your website.

2019-11-10_1715.png

Now run the website and you can see this. and Voila! You will see this nice little loader until the page has loaded every source required to run the website.

preloader.gif

Screenshot (5)


Another Solution:

You can create a Simple theme named as PreLoader in your Themes folder. This way you can use this theme for multiple website solutions.

2019-11-10_1734_001.png

You will just need to inject it in your Current Website Theme like other needed themes to run successfully your SXA website.

2019-11-10_1736.png

Just make sure to add it at very top after core libraries.

You will notice that I have not added the modernizer and jQuery libs in my themes, because Core libraries already provide these out of the box.

The reason to add it as a theme is because your Current website theme files load at the very end, and until those loading files are not called it will not show the loader.


Troubleshoot:

Your site will not load until all the files in your solution are loaded, so If you are missing any file, even a single image or css, the website will not load. So make sure your all the assets are loaded properly. In case something is missing fix it first.


Observations:

Even though this is was a workaround for the problem I faced but this is quite useful even when you have enabled the Optimiser ON in your Site Settings.

This solution can be further enhanced into Site specific, where you can add your image from Site Settings, but this is a separate discussion.


Feel free, to use it and share your feedback if you find it useful. Cheers!

Reference Links

Sitecore Experience Platform 9.2 Initial Release
Sitecore SXA 1.9.0

How To Implement Series for SXA

Don’t forget to check my previous articles for SXA.

Create a Phone Link with the SXA Link Component – How To Implement Series
Setting up the Not Found and Internal Server Error pages with SXA – How To Implement Series
Progressive and optimized loading images with SXA – How To Implement Series

4 thoughts on “How to add the PreLoader in SXA sites – How To Implement Series

Share what's in your Mind :)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.