function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
TemesgennnTemesgennn 

A spinner for a visualforce component

Hi all,

Is it possible to display a spinner while a visualforce component is loading in our Org? We created a visualforce page and used it as a component to display a table for our users. I have tried some solutions but no success so far, my code and solution could be totally wrong i am new to this.

Thank you very much for your help, this is my code:
 

<apex:page standardController="Class__c" extensions="ClassAttendanceTableController" lightningStylesheets="true">

    <head>
        <apex:slds />
    </head>
    <apex:form>
        <style>
                .spinnerBg{
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    background-color: #000;
                    opacity: 0.2;
                    z-index: 999999;
                }
                .spinner{
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    background-image: url("/img/loading32.gif");
                    background-size: 16px;
                    background-repeat: no-repeat;
                    background-attachment: fixed;
                    background-position: center;
                    z-index: 9999999;
                    opacity: 1;
                }
   </style>
   
    <apex:actionStatus id="spinnerStatus">    
                    <apex:facet name="start">
                     <div class="spinnerBg" />
                    <div class="spinner" />
                </apex:facet>
    </apex:actionStatus>
   
     <apex:commandButton action="{!save}" value="Save" status="spinnerStatus" reRender="theForm"/>
        <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered slds-scrollable" >
            <thead>
                <tr class="slds-line-height_reset">
                    <th scope="col">
                        <div class="slds-truncate" title="Student Name">Student</div>
                    </th>
                    <apex:repeat value="{!attendanceDates}" var="date">
                        <th scope="col">
                            <div class="slds-truncate">
                                <apex:outputText value="{0, date, MMMM d',' yyyy}">
                                    <apex:param value="{!date}" />
                                </apex:outputText>
                            </div>
                        </th>
                    </apex:repeat>
                </tr>
            </thead>
            
            <tbody>
                <apex:repeat value="{!attendanceNames}" var="name">
                    <tr>
                        <td data-label="Student Name" scope="row" class="slds-truncate">
                            <apex:outputText value="{!name}" />
                            <apex:repeat value="{!attendanceRecords}" var="records">
                                <apex:outputPanel rendered="{!name == records.Student__r.name}">
                                    <td data-label="Present">
                                        <apex:inputField value="{!records.Present__c}" id="present" />
                                    </td>
                                </apex:outputPanel>
                            </apex:repeat>
                        </td>
                    </tr>
                </apex:repeat>
                
            </tbody>
            
        </table>
    </apex:form>
    
</apex:page>
Best Answer chosen by Temesgennn
ANUTEJANUTEJ (Salesforce Developers) 
Hi Temesgenn,

>> https://salesforce.stackexchange.com/questions/191203/visualforce-with-slds-spinner-embedded-in-a-page-layout#:~:text=If%20you%20want%20to%20use,live%20in%20an%20apex%3AactionStatus.

>> https://salesforce.stackexchange.com/questions/65580/popup-spinner-style-apexactionstatus

I was able to find the above implementation that has the similar use case of showing a spinner on the visualforce page when the data is loading, can you try checking this once?

Let me know if it helps you and close your query by marking it as solved so that it can help others in the future.  

Thanks.

All Answers

ShirishaShirisha (Salesforce Developers) 
Hi,

Greetings!

Please refer this thread (https://developer.salesforce.com/forums/?id=906F000000095x4IAA) for the sample code to use the Spinner while loading the page.

Kindly mark it as best answer if it helps so that it can help others in the future.

Warm Regards,
Shirisha Pathuri
 
ANUTEJANUTEJ (Salesforce Developers) 
Hi Temesgenn,

>> https://salesforce.stackexchange.com/questions/191203/visualforce-with-slds-spinner-embedded-in-a-page-layout#:~:text=If%20you%20want%20to%20use,live%20in%20an%20apex%3AactionStatus.

>> https://salesforce.stackexchange.com/questions/65580/popup-spinner-style-apexactionstatus

I was able to find the above implementation that has the similar use case of showing a spinner on the visualforce page when the data is loading, can you try checking this once?

Let me know if it helps you and close your query by marking it as solved so that it can help others in the future.  

Thanks.
This was selected as the best answer
TemesgennnTemesgennn
Thank you @Shirisha and @ANUTEJ