Conditional rendering for Account list in Lightning component

Question

I have the list of accounts in lighting component and I want to display it with if condition if accounts list is zero then display the message.

My code works fine the only problem is that whenever I open the page first it shows my message that accounts not found for a while then display the accounts. how I handle this issue?

JS Controller

({
    doInit : function(component, event) {
        var action = component.get("c.findAll");
        action.setCallback(this, function(a) {
            component.set("v.accounts", a.getReturnValue());
        });
        $A.enqueueAction(action);
    }
})

Apex Controller

public with sharing class AccountController {
    @AuraEnabled
    public static List<Account> findAll() {
        return [SELECT id, name FROM Account LIMIT 10];
    }
}

Component code

<aura:component controller="AccountController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="accounts" type="Account[]"/>
        <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

        <ul>

      <aura:if isTrue="{!(v.accounts.length > 0 )}">
                     <aura:iteration items="{!v.accounts}" var="account">
                 <li><a>{!account.Name}</a></li>
            </aura:iteration>
                         <aura:set attribute="else">                                               
                            <div >You don’t have any account. </div>
                        </aura:set>

                    </aura:if> 
      </ul> 
</aura:component>

Answer 1

According to lightning lifecycle, your component is rendered first and then your doInit method is called.

What you can do is use a boolean flag which you set it in your JS when init method is successful. .

<aura:attribute name="accounts" type="Account[]"/>
<aura:attribute name="initDone" type="Boolean" default="false" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <ul>

<aura:if isTrue="{!v.initDone}">
  <aura:if isTrue="{!(v.accounts.length > 0 )}">
        <aura:iteration items="{!v.accounts}" var="account">
            <li><a>{!account.Name}</a></li>
        </aura:iteration>
        <aura:set attribute="else">                                               
            <div >You don’t have any account. </div>
        </aura:set>

    </aura:if> 
</aura:if>
  </ul> 
</aura:component>

JS Code: (

{
doInit : function(component, event) {
    var action = component.get("c.findAll");
    action.setCallback(this, function(a) {
        component.set("v.accounts", a.getReturnValue());
        component.set("v.initDone","true");
    });
    $A.enqueueAction(action);
}
})

Source : https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_lifecycle.htm