Lightning component loading doesn't stop

Hi,

I have a lightning component which invokes from a visualforce page, which inturn gets triggered on click of a button. Now, the issue is I see that the loading screen doesnt stop but does invoke the component too

Here is the code

<apex:page standardController="Order__c" standardStylesheets="false" sidebar="false">
     <apex:includeLightning />
 <link rel="stylesheet" media="screen" href="{!URLFOR($Resource.Framework__SDLS_Base,'css/styles.css')}"/>
<div id="lightning" />
    <div class="slds slds-loading-layout" id="mainWrapper1">
        <div class="slds-grid slds-loading-layout slds-theme--shade">
            <div class="slds-col slds-text-align--center slds-align-middle" >
              <img src="{!URLFOR($Resource.Framework__SLDS_Base,'/img/spinners/slds_spinner_brand.gif')}" alt="saving" width="50" height="50" />&nbsp;
                <span class="slds-text-heading--medium">Loading...</span>
            </div>
        </div>
    </div>
    <!-- <apex:slds /> -->
    
 <script>
    function componentLoaded() {
          document.getElementById('mainWrapper12').classList.add('hidden');
  }
 $Lightning.use("c:OrderApp", function() {
 $Lightning.createComponent("c:Order",
 { 
 "recordId" : "{!$CurrentPage.parameters.Id}",
  },
 "lightning",
 function(cmp) {
 console.log('Component created, do something cool here');
     $A.eventService.addHandler({ "event": "ComponentLoadedEvent", "handler" : componentLoaded});
 });
 });
 </script>
 
</apex:page>

On click of button, the VF page is called and the loading screen shows up for a fraction of sec, then the lightning component fields show up and the loading moves to the bottom. How do I make sure that the loading stops before component starts?

January 17, 2018
·
Answer
·
Like
0
·
Follow
1

pradeep kumar yadav
You have to just add this a line in the "function(cmp)"
<apex:page standardController="Order__c" standardStylesheets="false" sidebar="false"> <apex:includeLightning /> <link rel="stylesheet" media="screen" href="{!URLFOR($Resource.Framework__SDLS_Base,'css/styles.css')}"/> <div id="lightning" /> <div class="slds slds-loading-layout" id="mainWrapper1"> <div class="slds-grid slds-loading-layout slds-theme--shade"> <div class="slds-col slds-text-align--center slds-align-middle" > <img src="{!URLFOR($Resource.Framework__SLDS_Base,'/img/spinners/slds_spinner_brand.gif')}" alt="saving" width="50" height="50" />  <span class="slds-text-heading--medium">Loading...</span> </div> </div> </div>  <script> function componentLoaded() { document.getElementById('mainWrapper12').classList.add('hidden'); } $Lightning.use("c:OrderApp", function() { $Lightning.createComponent("c:Order", { "recordId" : "{!$CurrentPage.parameters.Id}", }, "lightning", function(cmp) { document.getElementById("lightning").style.display = 'none'; console.log('Component created, do something cool here'); $A.eventService.addHandler({ "event": "ComponentLoadedEvent", "handler" : componentLoaded}); }); }); </script> </apex:page>

If you get solution marked it as best answer to help others easily find their solution.