Visualforce with SLDS spinner embedded in a page layout

Question

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:

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

Any ideas on why this is happening?

Answer 1

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

Answer 2

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>