BlockUI: The problem of template persisting when blocked property changes quickly

[ergundenizbuyruk]

Describe the bug

I am using the BlockUI component as follows. I am using setBlocked(true) in the request interceptor of my Axios requests, and setBlocked(false) in the response. At this stage, when I send a request, my screen is blocked until the response comes.

However, when I send requests very quickly one after another, that is, when I change the blocked property value one after another, the screen blocking is removed (in some places not fullscreen) but the template continues to appear on the screen.

const pageLoader = () => {
    return (
      <div className="flex flex-column align-items-center justify-content-center w-screen h-screen">
        <ProgressSpinner />
      </div>
    );
  };

  return (
    <AxiosContext.Provider value={axios}>
      <BlockUI blocked={blocked} fullScreen template={pageLoader}>
        {children}
      </BlockUI>
    </AxiosContext.Provider>
  );

Reproducer

https://stackblitz.com/edit/vitejs-vite-fvmxnt?file=src%2FApp.tsx

No response

System Information

node: 20.11.0 react: 18.2.0 primereact: 10.8.2

google chrome

Steps to reproduce the behavior

1. Add BlockUI.
2. Add 2 functions that change blocked parameter.
3. Trigger these functions quickly one after another.
4. See the error.

Expected behavior

No response

[melloware]

Hmmm I am having trouble reproducing with your stackblitz?

[github-actions[bot]]

We're unable to replicate your issue, if you are able to create a reproducer or add details please edit this issue. This issue will be closed if no activities in 20 days.