Alert Message Dismissal Allows Multiple User Actions During API Data Fetch, Leading to Queued Requests and Incorrect UI State

[Adameddy26]

Description

In all apps, whenever an API fetches data, an alert message 'Click backdrop to dismiss' appears on the UI. However, if the user clicks outside the alert message while the data is still loading, the message disappears, and the user is allowed to perform other operations on the page. This behavior causes multiple API requests to get stuck in the queue, leading to inconsistencies in the data displayed on the UI.

Current behavior

The alert message disappears prematurely when the user clicks outside it.
Users can perform other operations, causing multiple API requests to queue up.

Expected behavior

The alert message should remain on the screen until the data is fully loaded.
User actions should be restricted until the current API call is completed.

Steps to reproduce the issue

Navigate to TO page.
Select a filter option (e.g., 'Approved' status) and trigger the API call.
While the data is still loading, click outside the 'Click backdrop to dismiss' alert message.
Select a different filter option (e.g., 'Completed') and uncheck the previously selected option ('Approved').
Observe that the UI appears to show both filters as active, but only the data for the initially selected filter ('Approved') is fetched.

Additional information

https://jam.dev/c/3f5b6af0-c748-468f-9146-64f937749eb0