How to change the default loader of SPA.js

In this tutorial, we will see how to override and change the default loader used by spa.js in Awesome Enterprise

Step 1: Include spa.v3.min.js

We will need to change include the code of spa.v3.min.js file in our “Awesome JS” App. To do that, create a module say ‘spa-v3-js‘ and copy the code from the URL https://cdn.getawesomestudio.com/lib/spa/spa.v3.min.js and save it.

Step 2: Update all-js

In the ‘all-js‘ module comment or remove the following code

and, replace it with the code given below

and save the module.

These are all the preparatory steps needed before we could override the loader design.

Step 3: Replace the loader HTML

Next, to actually replace the loader all we need to do is change the value of spa.loader.html either in the spa-v3-js module itself or in the all-js module as shown below.

the position of spa.loader.html is important, it has to be in a single line. You can use any online HTML minifier like https://minifycode.com/html-minifier/ to minify loader HTML and CSS in a single line.

Save the ‘all-js‘ module, purge the cache and you will have the updated loader.

Bonus example

Here is another example of replacing default the spa loader with another loader.

 

Updated on Aug 06, 2021