Show spinner for specific table row only?

Question

I got a table with an account list, as such:

<table>
    <aura:iteration items="{!v.accounts}" var="acc">
        <tr>
            <td>
                <a onclick="{!c.deleteAccount}" id="{!acc.Id}">
                    <lightning:icon iconName="utility:delete" size="small" alternativeText="Delete"/>
                    <span class="slds-assistive-text">Delete</span>
                </a>    
            </td>
            <td>{!acc.Name}</td>
        </tr>
    </aura:iteration>
</table>

How can I dynamically replace the <lightning:icon iconName="utility:delete /> part with a spinner only for the table row that was clicked?

If I do something like

<table>
    <aura:iteration items="{!v.accounts}" var="acc">
        <tr>
            <td>
                <aura:if isTrue="{!v.accountIsBeingDeleted}">
                    <div style="height:1rem; position:relative; margin-right:1rem">
                        <div class="slds-spinner_container">
                        <div role="status" class="slds-spinner slds-spinner_x-small slds-spinner_brand">
                            <span class="slds-assistive-text">Loading</span>
                            <div class="slds-spinner__dot-a"></div>
                            <div class="slds-spinner__dot-b"></div>
                        </div>
                        </div>
                    </div>
                    <aura:set attribute="else">
                        <a onclick="{!c.deleteAccount}" id="{!acc.Id}">
                            <lightning:icon iconName="utility:delete" size="small" alternativeText="Delete"/>
                            <span class="slds-assistive-text">Delete</span>
                        </a>    
                    </aura:set>
                </aura:if>
            </td>
            <td>{!acc.Name}</td>
        </tr>
    </aura:iteration>
</table>

it will (obviously) show a spinner for all rows in the list, rather than the specific row clicked.

The function for deleting is quite straightforward:

    deleteAccount: function (component, event, helper) {
        component.set("v.accountIsBeingDeleted", true) // this part
        // call helper function to delete account
    },

Any pointers?

Answer 1

since you need to set the loader on specific row you need to keep track of the account on which the action is being performed.

You can do this in multiple ways, here is one easy way to handle this

HTML

<aura:application extends="force:slds">
    <aura:attribute name="accounts" type="object[]" />
    <aura:attribute name="accountIdInProgress" type="String" default=""/>

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"></aura:handler>

    <table>
        <aura:iteration items="{!v.accounts}" var="acc">
            <tr>
                <td>
                    <aura:if isTrue="{!acc.id == v.accountIdInProgress}">
                        <div style="height:1rem; position:relative; margin-right:1rem">
                            <div class="slds-spinner_container">
                                <div role="status" class="slds-spinner slds-spinner_x-small slds-spinner_brand">
                                    <span class="slds-assistive-text">Loading</span>
                                    <div class="slds-spinner__dot-a"></div>
                                    <div class="slds-spinner__dot-b"></div>
                                </div>
                            </div>
                        </div>
                        <aura:set attribute="else">
                            <a onclick="{!c.deleteAccount}" data-id="{!acc.id}">
                                <lightning:icon iconName="utility:delete" size="small" alternativeText="Delete" />
                                <span class="slds-assistive-text">Delete</span>
                            </a>
                        </aura:set>
                    </aura:if>
                </td>
                <td>{!acc.name}</td>
            </tr>
        </aura:iteration>
    </table>
</aura:application>

JS

({
    doInit : function(component, event, helper) {
        component.set("v.accounts", [
            {
                id: "1",
                name: "Account 1"
            },
            {
                id: "2",
                name: "Account 2"
            },
            {
                id: "3",
                name: "Account 3"
            },
            {
                id: "4",
                name: "Account 4"
            }
        ])
    },
    deleteAccount: function (component, event, helper) {
        const accountId = event.target.getAttribute("data-id");
        component.set("v.accountIdInProgress", accountId)

        // Do something...
        setTimeout($A.getCallback(() => {
            component.set("v.accountIdInProgress", null);
        }), 2000);
    }
})