How to handle scenario wherein first modal is taking time to load and second modal loads before first

[semanticrelated]

Hi Experts,

I have a scenario wherein the requirement is
1] Modal A should show up first , On acceptance of that Modal B should load.

However, currently whats happening is
1]Modal A is taking time to load as the content shown in it is a bit large.
2] Intermittently, Modal B shows up before Modal A, which should not happen.
3] Instead of loading Modal B after accepting the Modal A, Modal B is loaded together with Modal A at all times and hidden behind it, which is not the way it is supposed to work.

Any thoughts/pointers/reference code will be helpful.

[lubber-de]

Could you please adjust the following jsfiddle according to your needs?
As the second modal is triggered by a button inside the first modal your described situation should not happen.
https://jsfiddle.net/lubber/v0kqrwds/15/

I believe, you just have to use allowMultiple: true

[semanticrelated]

Hello,

Thank you for your reply.
Is there any way I can use a setTimeOut() function or something similar in nature , which can be used in the callback function of second modal, so that it loads a bit slower than the first.

Any pointers/reference code will be really helpful.

[lubber-de]

Sure, here's an example which opens the seconds modal 2 seconds after you have clicked on the button inside the first modal
https://jsfiddle.net/lubber/v0kqrwds/17/

[semanticrelated]

Thank you for your reply.

Looks like in my case, the OOTB application modal file is getting called first instead of the custom one I have, which is causing issues. Let me check further on this.

Thanks a lot for your inputs.

Will post the updates here.