4

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>

0
4

You can use a DIV and SLDS spinner

Here is a sample of what we use on my project.

        <div id="LoadingvfDIV" class="slds-spinner_container" style="display:block;">
            <div class="slds-spinner slds-spinner--large" aria-hidden="false" role="alert">
                <div class="slds-spinner__dot-a"></div>
                <div class="slds-spinner__dot-b"></div>
            </div>
        </div>    

        <div class="slds-m-around--xx-small">
            <div id="lightningvfDIV" style="min-height: 100vh !important;display:none;"/>
        </div> 

        <script>
            $Lightning.use("c:AppWebApp4vf", function() {
                $Lightning.createComponent("c:CmpWebApp", // Component name
                                           {},
                                           "lightningvfDIV",
                                           function(cmp) {
                                               var loadingDivElt = document.getElementById("LoadingvfDIV");
                                               loadingDivElt.style.display = 'none' ;
                                               var ltngDivElt = document.getElementById("lightningvfDIV");
                                               ltngDivElt.style.display = 'block' ;
                                               console.log('AppWebApp VF Page includer initialized'); 
                                           });
            });           
        </script> 
5
  • The part of code of "LoadingvfDIV" is not working for me. In short, spinner is not displayed. Updated my code above.
    – Sarang
    Jan 2 '17 at 10:15
  • Can u check with chrome/ff dev tools if slds-spinner_container is matching with a loaded css ? SLDS is supposed to be included by default with VF pages, in your apex:page declaration try to add standardStylesheets="true" Jan 2 '17 at 17:20
  • oops, seems i said a mistake :) SDLS are not included as standard in VF pages so u have to do it manually ( upload slds as static resource then include it in your vf page) . example: <apex:stylesheet value="{!URLFOR($Resource.slds, '/assets/styles/salesforce-lightning-design-system.min.css')}"/> Jan 2 '17 at 17:28
  • I have already added that in code
    – Sarang
    Jan 3 '17 at 5:49
  • And slds-spinner css classes are not matched in a css ? ( check stackoverflow.com/questions/23919162/… to see how to look for that ) Jan 3 '17 at 10:49
3

You can add a loading section or spinner in a div, directly at the top of your Visualforce Page (let's say before your <div id="lightning" />):

<div id="loading">
    // Put your spinner here
</div>

Then, in the callback of your $Lightning.createComponent call, just hide this div by replacing the //do something comment:

document.getElementById('loading').style.display = 'none';
1
  • I have added the code as per yours and Nicolas's suggestion. The spinner is still not shown, though the loading word is shown.
    – Sarang
    Jan 2 '17 at 10:17
1

Please include slds in the VF page, below code working for me..

<apex:slds /> <div role="status" class="slds-spinner slds-spinner_large slds-spinner_brand"> <span class="slds-assistive-text">Loading...</span> <div class="slds-spinner__dot-a"></div> <div class="slds-spinner__dot-b"></div> </div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.