Toast Conflicting or loading infinite in promise at concurrent requests

[vikassharmasat]

The toast don't close if API Request function is centralized and in scenario of concurrent requests. It will process only one result others will be in infinite.

there are some screenshots please check

`
import { Bounce, toast } from "react-toastify";

export class ToastUtil {
constructor( unique_key ) {
this.toast_id = {};
this.unique_key = unique_key;
this.toastify_options = {
position: "top-right",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "colored",
transition: Bounce,
isLoading: false,
};
this.toast = toast;
}

showToast() {
    console.log( this.toast_id, 'this is toast id' )
    this.toast_id[this.unique_key] = this.toast.loading( `Please wait success...` );
}

updateToast( message, type ) {
    this.toast.update( this.toast_id[this.unique_key], {
        render: message,
        type,
        ...this.toastify_options,
    } );
    this.hideToast();
}

hideToast() {
    // this.toast.clearWaitingQueue();
    // this.toast_id = null;
   // delete this.toast_id[this.unique_key];
    console.log( Object.keys( this.toast_id ) );
   setTimeout(() => {
       Object.keys(this.toast_id).forEach(key => toast.dismiss(key));
   },5000);
}

}

`