Making of a global loader component that will be invoked from anywhere in the app while making ajax calls using Axios interceptors
We are always optimizing our web pages and applications to open in a zippy. But, sometimes, it is necessary to let the users wait for a brief moment for all the data and pages to load. We will need something to get the users’ attention and keep them on the site long enough for all the content to load or to notify them that work is being done in the background.
One way to do that is by showing a beautiful, engaging and informative loading animation or loading gif in the website whenever background tasks are running.
Below is the code for a simple
Loader component in
vue . We have two states
isVisible to show/hide the loader and
text to define the loading text.