1

I'm trying to embed SLDS' spinner into a standard visualforce while it loads. The issue is I am getting the spinner when I test my Visualforce by itself /apex/myVisualforceName, but not once embedded in the page layout.

My code regarding the spinner and the action status is:

<apex:page id="CustomHistoryTracker" standardController="Oferta__c" extensions="CustomHistoryTrackerController">

    <apex:slds />

    <apex:form id="form">
        <!-- SPINNER -->
        <apex:actionStatus id="status">
            <apex:facet name="start">
                <div class="slds-spinner_container" style="position: fixed;" >
                    <div role="status" class="slds-spinner slds-spinner--large slds-spinner--brand">
                        <div class="slds-spinner__dot-a"></div>
                        <div class="slds-spinner__dot-b"></div>
                    </div>
                </div>
            </apex:facet>
        </apex:actionStatus>
        <!-- / SPINNER -->

So when I test the visualforce, I get the spinner: enter image description here

But in the Page layout I do not (it's blank until the visualforce renders): enter image description here

Any ideas on why this is happening?

  • I'm starting to think it's a matter of CSS... but I'm not sure. – Javier García Manzano Sep 6 '17 at 15:54
5

You are missing the <div class="slds-scope"> container which is needed when inline vf.

<apex:page id="CustomHistoryTracker" standardController="Account" >

    <apex:slds />
    <div class="slds-scope">
    <apex:form id="form" style="height: 200px;">
        <!-- SPINNER -->
                <div id="spinner" class="slds-spinner_container slds-is-relative" >
                    <div role="status" class="slds-spinner slds-spinner--large slds-spinner--brand">
                        <div class="slds-spinner__dot-a"></div>
                        <div class="slds-spinner__dot-b"></div>
                    </div>
                </div>
        <!-- / SPINNER -->
    </apex:form>
    </div>

    <script>
        setTimeout(function(){ document.getElementById('spinner').className += ' slds-hide' }, 3000);
    </script>
</apex:page>

I also removed the action status (because I did not know what you were doing to invoke the status) and added a timeout (to hide it) so you could see that it does indeed work. But without the <div class="slds-scope"> the SLDS styles are not used and thus no matter what you do you will not see the spinner

You can test it out by using the above. Then simple put an x in front of slds-scope and make it xslds-scope and try again. You will see it never shows up. Then start adding back in your code and testing to ensure you do not break it

|improve this answer|||||
  • Ah, slds-scope. I would have never noticed! Thanks, Eric :) – Javier García Manzano Sep 6 '17 at 16:33
  • @JavierGarcíaManzano - glad you got it sorted! – Eric Sep 6 '17 at 16:33
  • Awesome! I'll have to keep that in mind because I was quite annoyed when I came across this issue myself. – JRiffe Sep 6 '17 at 16:38
0

I ran into this issue when trying to implement a spinner for a page that takes a while to load a table with the result of a webservice callout. in short, the spinner is not going to load until the page loads itself.. in other words, the constructor method has completed and your page loads initially.

If you want to use your spinner in the visualforce page while items are loading, you can go about it a few different ways.

  1. (and the way I ended up using) an action function that you can invoke from the on document ready function. Then, your spinner would live in an apex:actionStatus. You can set the status with your action function.

  2. Use javascript or visualforce remoting to load the data.

I personally went with option 1 because it fit my needs better. I needed to set multiple variables after the data had been returned from my callout methods that are constructed from another class. And I needed to set that data in the controller, which you can't (that I know of anyhow) do with the remoting.

Here is an example of what I did.

$(document).ready(function ($) {
    getData('{!holder.Customer_Number__c}');
    ... more stuff ...
}

<apex:actionFunction name="getData" action="{!getDataMethod}" rerender="AccountPanel, ClaimPanel" status="sts" oncomplete="resetTableSort();">
     <apex:param name="CustomerNo" value="" assignTo="{!CustomerNo}"/>
</apex:actionFunction>

<apex:actionstatus id="sts">
            <apex:facet name="start">
                <div class="slds-spinner_container">
                    <div id="mySpinner" role="status" class="slds-spinner slds-spinner_medium">
                        <span class="slds-assistive-text">Loading</span>
                        <div class="slds-spinner__dot-a"></div>
                        <div class="slds-spinner__dot-b"></div>
                    </div>
                </div>
            </apex:facet>
        </apex:actionstatus>  
|improve this answer|||||
  • Thanks for your reply JRiffe, but Eric sorted it bellow with just two lines of code, fyi :-) – Javier García Manzano Sep 6 '17 at 16:34

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.