Skip to main content
Added suggested code in answer to existing
Source Link
Sarang
  • 2.7k
  • 8
  • 55
  • 102

I have a VF page containing lightning component using ltng out. It is taking time to load(about 6 seconds) , and in that time I want to show spinner to user. How can this be implemented?

My VF Page:

<apex:page >
<script src="https://MySSDDomain-dev-dev-ed.my.salesforce.com/lightning/lightning.out.js" />
 <apex:stylesheet value="/resource/SLDS214/assets/styles/salesforce-lightning-design-system-ltng.css"/

<apex:includeLightning />

       <div  id="LoadingvfDIV" class="slds-spinner_container">
            <div class="slds-spinner--brand slds-spinner slds-spinner--small" role="alert">
                <span class="slds-assistive-text">Loading</span>
                <div class="slds-spinner__dot-a"></div>
                <div class="slds-spinner__dot-b"></div>
             </div>
        </div> 
    
    <div id="lightning" />

<script>
$Lightning.use("c:UserPageApplication", function() {
    $Lightning.createComponent("c:UserPageComponent",
                               {},
                               "lightning",
                               function(cmp) {
                                   //dovar somethingloadingDivElt = document.getElementById("LoadingvfDIV");
                                   loadingDivElt.style.display = 'none' ;
                                   console.log('hiding spinnner');
                               });
});
</script>

</apex:page>

I have a VF page containing lightning component using ltng out. It is taking time to load(about 6 seconds) , and in that time I want to show spinner to user. How can this be implemented?

My VF Page:

<apex:page >
<script src="https://MySSDDomain-dev-dev-ed.my.salesforce.com/lightning/lightning.out.js" />
<apex:includeLightning />
    
    <div id="lightning" />

<script>
$Lightning.use("c:UserPageApplication", function() {
    $Lightning.createComponent("c:UserPageComponent",
                               {},
                               "lightning",
                               function(cmp) {
                                   //do something
                               });
});
</script>

</apex:page>

I have a VF page containing lightning component using ltng out. It is taking time to load(about 6 seconds) , and in that time I want to show spinner to user. How can this be implemented?

My VF Page:

<apex:page >
<script src="https://MySSDDomain-dev-dev-ed.my.salesforce.com/lightning/lightning.out.js" />
 <apex:stylesheet value="/resource/SLDS214/assets/styles/salesforce-lightning-design-system-ltng.css"/

<apex:includeLightning />

       <div  id="LoadingvfDIV" class="slds-spinner_container">
            <div class="slds-spinner--brand slds-spinner slds-spinner--small" role="alert">
                <span class="slds-assistive-text">Loading</span>
                <div class="slds-spinner__dot-a"></div>
                <div class="slds-spinner__dot-b"></div>
             </div>
        </div> 
    
    <div id="lightning" />

<script>
$Lightning.use("c:UserPageApplication", function() {
    $Lightning.createComponent("c:UserPageComponent",
                               {},
                               "lightning",
                               function(cmp) {
                                   var loadingDivElt = document.getElementById("LoadingvfDIV");
                                   loadingDivElt.style.display = 'none' ;
                                   console.log('hiding spinnner');
                               });
});
</script>

</apex:page>

Tweeted twitter.com/StackSalesforce/status/814122585151639552
Source Link
Sarang
  • 2.7k
  • 8
  • 55
  • 102

How to show spinner on VF page embedding a LTNG component while its still loading?

I have a VF page containing lightning component using ltng out. It is taking time to load(about 6 seconds) , and in that time I want to show spinner to user. How can this be implemented?

My VF Page:

<apex:page >
<script src="https://MySSDDomain-dev-dev-ed.my.salesforce.com/lightning/lightning.out.js" />
<apex:includeLightning />
    
    <div id="lightning" />

<script>
$Lightning.use("c:UserPageApplication", function() {
    $Lightning.createComponent("c:UserPageComponent",
                               {},
                               "lightning",
                               function(cmp) {
                                   //do something
                               });
});
</script>

</apex:page>