How can use this component:

Just need to consume the reusable component and pass the required parameters and it will work as expected.

Purpose of confirmation box with Loader is to use confirmation box to execute action with only single click. After first click on save, button is disabled. After action in the flow compltes it enables the button. 

MessageInfo structure:

Add dependency

This structure you can create as a local variable and fill following fields

Title - Title of the confirmation Pop up

Message - Meesage prompt of the popup

IsSaveVisible- This till show/hide the save button. If you want to use pop up as only feedback popup, you can make this propery false

SaveText - Text on the save button

CancelText - Text on the cancel text

Alternativly you can set properties to webblock instance as shown below 

Handle the events:

There are two events raised from confirmation box component:

Submit - Fired on click of Save

Cancel - Fired on the click of Cancel

Consumer - the demo app needs to create two handlers. One each for these events

Open the popup on button click

Change the IsSaveVisible

This is save visible opens the pop up.

Write the button click logic in save event handlers

For save: confirmationBoxForSave - save related logic can be added

For Cancel: ConfirmationBoxForCancel - hides the pop up

Important property : CanEnableSave

When screen is loded default should be True

Before calling save make this property false. This will ensure save button becomes disabled. And hence no duplicate actions are allowed.

After save assign 

true to CanEnableSave

true to IsSaveVisible

Other Variants available from this components are:

1 - Success Box - we can configure similar way. Only is absence of save button.

2 - Confirmation Box - It is without loader