# 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](/reqease-docs/quick-start.md).
* `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`

```javascript
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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://hichemtech.gitbook.io/reqease-docs/requester/loading-indicator.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.