displaying loading gif until server returns response?

Question

i am developing a lightning component and i'd like to find out how to adding a loading image. Inside my controller i have a fetch() function which will get a server response. How can i display a loading gif until i get a response back from the server?

Answer 1

This is literally in the documentation:

---

<aura:component>
    <aura:attribute name="loaded" type="Boolean" default="false" />

    <lightning:button label="Toggle" variant="brand" onclick="{! c.handleClick }" />

    <div class="exampleHolder">
        <aura:if isTrue="{! v.loaded }">
            Put loaded content here
            <aura:set attribute="else">
                <lightning:spinner alternativeText="Loading" />
            </aura:set>
        </aura:if>
    </div>
</aura:component>

---

({
    handleClick: function (cmp, event) {
        cmp.set('v.loaded', !cmp.get('v.loaded'));
    }
})

---

.THIS.exampleHolder{
    position: relative;
    display: inline-block;
    margin-left: 15px;
    width: 55px;
    vertical-align: middle;
    white-space: nowrap;
}

---

Obviously, you'll do a callback to the server to load the data, but this example includes everything you need.