Loader
Table of contents
Definition
In e-commerce, a ‘loader’ is a visual element that is used to indicate to users that the website or application is currently loading or processing information. Loaders are commonly used in situations where a page is taking longer than expected to load or a process is taking longer than usual, such as when a user submits a form or initiates a search.
The loader is usually a simple animation, like a spinning wheel or a progress bar, that is displayed on the screen to let the user know that something is happening in the background. The loader will typically be displayed on the page until the process is complete, at which point it will be replaced with the relevant information or next page.
Loaders are useful in e-commerce websites as they can improve the user experience by providing users with visual feedback on the status of a task and help to reduce frustration if the load time is longer.
Additionally, loaders can be used to indicate to users that a server is currently processing their request, This can help to improve the trust on the website by making the users more aware of what is happening behind the scenes.
It is important to note that using loaders should be balanced with the performance of the website, as excessive use of loaders, or showing loaders for too long can negatively affect the user experience, making the website feel slow or unresponsive.
Behavior
Configure page loader to be shown when fetching search API results by setting the “loader” config object.
Configurations
To render the loader , you need to configure the “loader” config object :
loader: {
//Below configurations should be added here.
}
The following options are available under the object:
el
Element
Required
“el” in loader is an HTML element that is designated to display loader component. This allows developers to control the placement of the loader on the webpage . The “el” can be set by providing the id or class of the element in the code.
Default Value
el: null
Scenarios
There are several HTML selectors that can be used to locate the banner element in an e-commerce page. For ex: getElementById, getElementsByClassName, getElementsByTagName, querySelector, querySelectorAll, getElementsByName, etc.
template
Function
The “template” function here refers to the ability to change the look and feel of the loader component .
Expected return value: A string of HTML that will be used to render the loader component on the webpage.
Default Value
template: function(){
return '<div class="UNX-loader">Loading search results....</div>'
}
Scenarios
For additional information on custom scenarios, please refer to the use cases section located below.
Default Example
Sample code for the Loader config:
loader: {
el: document.getElementById("loaderEl"),
template: function(){
return '<div class="UNX-loader">Loading....</div>'
}
}