+ Start a Discussion
Rebekah LillyRebekah Lilly 

lightning:recordEditForm display delay

I have a very simple lightning:recordEditForm:
<lightning:recordEditForm aura:id="recordEditForm" 
                                       objectApiName="CustomObject__c"
                                       onsubmit="{!c.handleCreate}"
                                       onsuccess="{!c.goToNewRecord}" >
    
             <lightning:inputField fieldName="Name__c" />
             <lightning:inputField fieldName="Description__c" />
             <lightning:inputField fieldName="Type__c" />    
             <lightning:inputField fieldName="Related__c" />
             <lightning:inputField fieldName="Required__c" />
             <lightning:inputField fieldName="Necessary__c" /> 
             <lightning:inputField fieldName="Source__c" />
             <lightning:input aura:id="ProjDueDate" name="ProjDueDate" label="Project Due Date" type="date" dateStyle="short" />
             <lightning:inputField fieldName="Product_Group__c" />
             <lightning:inputField fieldName="Category__c" />
             <lightning:inputField fieldName="PLM_Member__c" />
             <lightning:inputField fieldName="Sourcing_Member__c" />
             <lightning:inputField fieldName="MFG_Member__c" />
             <lightning:inputField fieldName="Quality_Member__c" />
             <lightning:inputField fieldName="Engineering_Member__c" />
             <lightning:inputField fieldName="Sales_Member__c" />
             <lightning:inputField fieldName="Application_Member__c" />
                 
             <lightning:button class="slds-m-top_small" type="submit" label="Create Project" />
             <lightning:button class="slds-m-top_small" variant="neutral" label="Cancel" onclick="{!c.handleCancel}" />   
        
             </lightning:recordEditForm>
        
As you can see, I am using a lightning:input field for the date because the default way lightning:inputField handled my date field was "April 5, 2022" instead of "4/5/2022" and it needed to look consistent with the record page. 

After deploying this into a full sandbox for testing, we are noticing a delay in the display. The lightning:input field is displayed first and for a couple of brief seconds its the only field you see, then the remaining of the lightning:inputField fields show up. 

Is there a way to keep this delay or handle it more efficiently so that all fields are rendered together? 

Or is there a way to control the way the lightning:inputField date is handled to be "mm/dd/yyyy" like the standard record page?

Thanks in advance!
Best Answer chosen by Rebekah Lilly
Maharajan CMaharajan C
Hi Rebekah,

lightning:inputField field don't support any format tag as of now.

Please try with the spiinner. In background still the lightning input and button will load load first but you can adjust the UI with spinner little bit. Also you can play with the inverse spinner.
 
<div>
     <lightning:spinner alternativeText="Loading" size="large" variant="brand" aura:id="mySpinner"/>
</div>

<lightning:recordEditForm aura:id="recordEditForm" 
                                       objectApiName="CustomObject__c"
                                       onsubmit="{!c.handleCreate}"
                                       onsuccess="{!c.goToNewRecord}" 
                                       onload="{!c.handleLoad}" >
    
             <lightning:inputField fieldName="Name__c" />
             <lightning:inputField fieldName="Description__c" />
             <lightning:inputField fieldName="Type__c" />    
             <lightning:inputField fieldName="Related__c" />
             <lightning:inputField fieldName="Required__c" />
             <lightning:inputField fieldName="Necessary__c" /> 
             <lightning:inputField fieldName="Source__c" />
             <lightning:input aura:id="ProjDueDate" name="ProjDueDate" label="Project Due Date" type="date" dateStyle="short" />
             <lightning:inputField fieldName="Product_Group__c" />
             <lightning:inputField fieldName="Category__c" />
             <lightning:inputField fieldName="PLM_Member__c" />
             <lightning:inputField fieldName="Sourcing_Member__c" />
             <lightning:inputField fieldName="MFG_Member__c" />
             <lightning:inputField fieldName="Quality_Member__c" />
             <lightning:inputField fieldName="Engineering_Member__c" />
             <lightning:inputField fieldName="Sales_Member__c" />
             <lightning:inputField fieldName="Application_Member__c" />
                 
             <lightning:button class="slds-m-top_small" type="submit" label="Create Project" />
             <lightning:button class="slds-m-top_small" variant="neutral" label="Cancel" onclick="{!c.handleCancel}" />   
        
</lightning:recordEditForm>


 In JS Controller File :
 
({
    handleLoad : function(component, event, helper) {
        var spinner = component.find("mySpinner");
        $A.util.toggleClass(spinner, "slds-hide");
    }
})

Thanks,
Maharajan.C

All Answers

Maharajan CMaharajan C
Hi Rebekah,

lightning:inputField field don't support any format tag as of now.

Please try with the spiinner. In background still the lightning input and button will load load first but you can adjust the UI with spinner little bit. Also you can play with the inverse spinner.
 
<div>
     <lightning:spinner alternativeText="Loading" size="large" variant="brand" aura:id="mySpinner"/>
</div>

<lightning:recordEditForm aura:id="recordEditForm" 
                                       objectApiName="CustomObject__c"
                                       onsubmit="{!c.handleCreate}"
                                       onsuccess="{!c.goToNewRecord}" 
                                       onload="{!c.handleLoad}" >
    
             <lightning:inputField fieldName="Name__c" />
             <lightning:inputField fieldName="Description__c" />
             <lightning:inputField fieldName="Type__c" />    
             <lightning:inputField fieldName="Related__c" />
             <lightning:inputField fieldName="Required__c" />
             <lightning:inputField fieldName="Necessary__c" /> 
             <lightning:inputField fieldName="Source__c" />
             <lightning:input aura:id="ProjDueDate" name="ProjDueDate" label="Project Due Date" type="date" dateStyle="short" />
             <lightning:inputField fieldName="Product_Group__c" />
             <lightning:inputField fieldName="Category__c" />
             <lightning:inputField fieldName="PLM_Member__c" />
             <lightning:inputField fieldName="Sourcing_Member__c" />
             <lightning:inputField fieldName="MFG_Member__c" />
             <lightning:inputField fieldName="Quality_Member__c" />
             <lightning:inputField fieldName="Engineering_Member__c" />
             <lightning:inputField fieldName="Sales_Member__c" />
             <lightning:inputField fieldName="Application_Member__c" />
                 
             <lightning:button class="slds-m-top_small" type="submit" label="Create Project" />
             <lightning:button class="slds-m-top_small" variant="neutral" label="Cancel" onclick="{!c.handleCancel}" />   
        
</lightning:recordEditForm>


 In JS Controller File :
 
({
    handleLoad : function(component, event, helper) {
        var spinner = component.find("mySpinner");
        $A.util.toggleClass(spinner, "slds-hide");
    }
})

Thanks,
Maharajan.C
This was selected as the best answer
Rebekah LillyRebekah Lilly
Thank you!