Understanding <apex:actionStatus> Component in Visualforce

The <apex:actionStatus> component is used to display status messages or indicators (like loading spinners or text) during an AJAX request triggered by components like <apex:actionSupport> or <apex:actionFunction>.

Syntax

xmlCopyEdit<apex:actionStatus id="statusId">
    <apex:facet name="start">
        <h3>Loading...</h3>
    </apex:facet>
    <apex:facet name="stop">
        <h3>Done!</h3>
    </apex:facet>
</apex:actionStatus>

How It Works

• start facet: Content shown when the AJAX call begins.
• stop facet: Content shown after the AJAX call ends.

Complete Example

xmlCopyEdit<apex:page controller="StatusController">
    <apex:form>
        <apex:inputText value="{!userInput}">
            <apex:actionSupport event="onchange" action="{!processInput}" 
                                rerender="resultPanel" status="inputStatus"/>
        </apex:inputText>
        
        <apex:actionStatus id="inputStatus">
            <apex:facet name="start">
                <h3>Processing...</h3>
            </apex:facet>
            <apex:facet name="stop">
                <h3>Processed!</h3>
            </apex:facet>
        </apex:actionStatus>

        <apex:outputPanel id="resultPanel">
            <h3>{!outputText}</h3>
        </apex:outputPanel>
    </apex:form>
</apex:page>

Apex Controller:

apexCopyEditpublic class StatusController {
    public String userInput { get; set; }
    public String outputText { get; set; }

    public void processInput() {
        outputText = 'Received: ' + userInput;
    }
}

Use Cases

• Enhance UX by providing feedback during AJAX operations.
• Inform users when a background process is running or complete.

Best Practices

• Pair it with action-triggering components like <apex:commandButton>, <apex:actionSupport>.
• Keep messages clear and short.
• Use CSS or images for stylish loading indicators if needed.