Loading indicator

Loading Indicator Options

ReqEase provides a flexible Loading Indicator to give your users visual feedback about ongoing processes. These options are configured within the loading property in the requester options of ReqEase. Here's an overview:

• loadingInModal (boolean): This option controls whether or not to display the loading indicator in a modal dialog. When set to true, a modal with a loading spinner will be shown during the loading process.

• modalOptions (object, optional): If loadingInModal is enabled, you can specify additional options for the modal, such as its title, content, and other settings. We'll discuss modal options in more detail in Modals.

• loadingIndicatorActions (object): This object contains actions related to the Loading Indicator, allowing you to customize its behavior. One of its key methods is affectButton.

• spinnerIcon (string, optional): You can set a custom spinner icon by providing the class or HTML content for the spinner. This will be displayed when the Loading Indicator is active.

affectButton Function

The affectButton function is responsible for managing the state of the "OK" button (or any other button specified in your ReqEase configuration) during loading. It takes three parameters:

• loadingIndicator (LoadingIndicator): The instance of the Loading Indicator.

• loadingIndicatorActions (LoadingIndicatorActions): The Loading Indicator Actions object.

• toState (LoadingState): The desired state of the button, which can be one of the following: LoadingState.NOT_LOADING, LoadingState.LOADING.

By default, the affectButton function disables the button and adds a spinner icon to it when the Loading Indicator is active. It restores the original content of the button when the loading process is complete. This behavior ensures that users cannot interact with the form while a request is in progress, providing a smoother user experience.

Example of customizing affectButton

const myCustomAffectButton = (loadingIndicator, loadingIndicatorActions, toState) => {
    if (isUndefinedOrNull(loadingIndicator.requester.requesterOptions.okBtn)) {
        return;
    }
    
    // Customize button behavior here based on toState
    switch (toState) {
        case LoadingState.NOT_LOADING:
            // Enable the button and restore original content
            loadingIndicator.requester.requesterOptions.okBtn.prop("disabled", false);
            loadingIndicator.requester.requesterOptions.okBtn.html("Submit");
            break;
        case LoadingState.LOADING:
            // Disable the button and set a custom loading message
            loadingIndicator.requester.requesterOptions.okBtn.prop("disabled", true);
            loadingIndicator.requester.requesterOptions.okBtn.html("Loading...");
            break;
        default:
            // Handle other states if needed
            break;
    }
    
    // You can add additional custom logic here as needed
};

const reqEase = new ReqEase(
    {
        //other options
        requester: {
            //other options
            loading: {
            //other options
                loadingIndicatorActions: {
                    affectButton: myCustomAffectButton
                }
            }
        }
    }
);

In this example, we've overridden the affectButton function to change the button's behavior based on the toState parameter, which represents the loading state.

• When LoadingState.NOT_LOADING is reached, we enable the button and restore its original content ("Submit").

• When LoadingState.LOADING is reached, we disable the button and display a custom loading message ("Loading...").

These Loading Indicator options give you fine-grained control over how loading is presented and how it interacts with your interface. You can customize it to suit the needs and style of your web application.