---
title: Activity indicator and form disabling
summary: Provide a consistent activity-indicator and form-disabling UX across the three action/input controls.
status: draft
owner: SAIF Doc Gen
last_reviewed: 2026-08-17
library: SAIF.Presentation.Web.Controls.V2
reference_type: package
operation_id: OP-V2-016
trigger: Control initialization for `SAIFButton`, `SAIFComboBox`, and `SAIFListBox`; client click/change events.
---

# Activity indicator and form disabling

Provide a consistent activity-indicator and form-disabling UX across the three action/input controls. Control initialization for `SAIFButton`, `SAIFComboBox`, and `SAIFListBox`; client click/change events.

| Field | Value |
| --- | --- |
| **Operation ID** | OP-V2-016 |
| **Trigger** | Control initialization for `SAIFButton`, `SAIFComboBox`, and `SAIFListBox`; client click/change events. |
| **Inputs** | `EnableIndicator`, `DisableFormControlsOnClick`/`DisableFormControlsOnChange`. |
| **Outputs** | CSS class selection, registered client script include, client-side form-disable signal. |
| **Primary components** | `SAIFButton, SAIFComboBox, SAIFListBox` |
| **Entry point** | `SAIF.Presentation.Web.Controls.V2/SAIFButton.vb` |

## Steps

1. Apply the base CSS class (`SAIFButton`, `SAIFComboBox`, `SAIFListBox`), switching to the matching `Indicator`-suffixed class when `EnableIndicator` is true. ([BR-V2-092](../business-rules.md#br-v2-092-activity-indicator-switches-to-the-indicator-css-class))
2. Register the matching client script include (`/Resources/Scripts/Controls/Button.js`, `/Resources/Scripts/Controls/ComboBox.js`, `/Resources/Scripts/SAIF.ListBox.js`). ([BR-V2-093](../business-rules.md#br-v2-093-each-interactive-control-registers-its-own-script))
3. `DisableFormControlsOnClick` / `DisableFormControlsOnChange` signal the client script to disable the remaining form controls once the control is actioned. ([BR-V2-094](../business-rules.md#br-v2-094-form-controls-can-be-disabled-on-clickchange))

## Process flow

The following diagram visualizes this operation's control flow.

```mermaid
flowchart TD
	Start([Init]) --> Ind{EnableIndicator?}
	Ind -->|Yes| IndCss[Apply Indicator-suffixed CSS class]
	Ind -->|No| BaseCss[Apply base CSS class]
	IndCss --> Script[Register matching script include]
	BaseCss --> Script
	Script --> Action([User clicks/changes control])
	Action --> Disable{DisableFormControlsOnClick/Change set?}
	Disable -->|Yes| DisableAll[Client disables remaining form controls]
	Disable -->|No| Done([No further action])
```

## Failure and edge-case behavior

- No exceptional failure handling beyond the branches described in **Steps** was found in the analysis findings.*

## Related documentation
- [Operations and processes](../operations-processes.md)
- [Business rules](../business-rules.md)

## Sources
- `SAIF.Presentation.Web.Controls.V2/SAIFButton.vb`