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?
1 Answer
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.