Show Loading in a Modal

This tutorial presents asynchronous loading as a modal. The host owns the operation. CalmUI only displays its current state.

Build the modal in Studio

1. Create View LoadProgress with layer modal and input block-below.
2. Add LoadingState from Components → Feedback.
3. Add ErrorState for a failed result and bind its retry event to an Action Contract such as Load.Retry.
4. Add Store fields load.status as a string and load.error as a string.
5. Read those fields in the component and use ui:if to choose LoadingState or ErrorState. Use loading, failed, and ready as your project's values. See conditional content for the exact directive.
6. Save and wait for package Gameplay to update.

Start the operation

In the Blueprint that owns loading, first call Load CalmUI Package. From Completed, set load.status to loading, then call Open CalmUI Modal. Connect its Failed output to Print String using Error Message.

Start the host operation after the modal opens. On success, set load.status to ready and call Close CalmUI Modal. On failure, set load.status to failed and write a safe user-facing message to load.error; keep the modal open so Retry remains available.

Listen for Load.Retry once after package loading, using Listen for CalmUI Action. When received, clear load.error, set the status back to loading, and retry the real operation.

If input reaches the menu behind it

• Confirm the View layer is modal and input policy is block-below.
• Confirm Open CalmUI Modal completed successfully.
• Do not close the modal before the operation's completion callback.
• If Retry does nothing, print the action listener's Failed error first.