Axios Loader

Add custom spinners, popups, or loading indicators to improve user experience during Axios requests.

Supports CJS and ESM.

Features

• Loader Management - Automatically show/hide custom loaders
• Page Interaction Control - Disable UI interactions during requests
• Factory Pattern Configuration

Installation

npm i @dpsys/axios-loader

Example Usage

1. Make (or update existing) Axios instance:

import { AxiosLoader } from '@dpsys/axios-loader';

let axiosLoaderInstance = new AxiosLoader
(
	// Axios config or an existing Axios instance
	{
		baseURL: 'https://test.com',
	},
	// Loader config
	{
		loaderShowAfterMs: 300, 
		loaderMessage: 'Loading ...'
	}
)
.setLoaderCallbacks
(
	// showLoaderCallback
    (requestID, loaderMessage) => console.log(`Showing loader ${requestID} with message: ${loaderMessage}`),
	// hideLoaderCallback
    (requestID) => console.log(`Hiding loader ${requestID}`)
);

export const axiosLoader = axiosLoaderInstance.getAxiosInstance();
// export default axiosLoaderInstance.getAxiosInstance();

2. Use it in your app

• Loader config can be overriden here

import {axiosLoader} from '../lib/axios/default';

axiosLoader.post('/some-route', {data: 'foo'}, {loaderMessage: 'Different loader message...', disablePageInteraction: false});
.then( async (response) =>
{
	...
});

Config

| Option | Type | Default | Description | |--------------------------|---------|-------------------|-------------------------------------------------------------------------------| | loaderShow | boolean | false | Whether to show the loader. Is automatically enabled after setting callbacks via setLoaderCallbacks. | | loaderShowAfterMs | number | 200 | Delay in milliseconds before the loader appears. | | loaderMessage | string | Please wait ... | Message displayed in the loader. | | loaderNeverHide | boolean | false | If true, loader is never removed after request has finished. | | disablePageInteraction | boolean | true | Whether to prevent user page interaction during each request. |

Callbacks

• showLoaderCallback(requestID: number, message: string): Implement this callback to show your loader.
• hideLoaderCallback(requestID: number): Implement this callback to hide your loader.

Methods

• setLoaderCallbacks(showLoaderCallback, hideLoaderCallback): see Callbacks section