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
BobPBobP 

Lightning Component Show Spinner

I have a lightning component that i am trying to figure out how to add the a spinner to while waiting for appointment time slot to load. I am not sure where to add it with in the lightning component code.

 I believe i need it added to this section of code and probably the helper class to but I am not sure how to get this to work. 
 
<lightning:layoutItem size="8" padding="around-small">
                            <span class="slotsWrapper">
                                <center>
                               
                                    <aura:iteration items="{!v.slotList}" var="slot" indexVar="i">
                                       <aura:if isTrue="{!(i > v.rowCount) == false}">
                                           
                                            <c:Acme_BookingSlot slot="{!slot}" workOrderId="{!v.workOrderId}" serviceAppointmentId="{!v.serviceAppointmentId}"/>
                                        </aura:if>
                                       </aura:iteration>
                                    <lightning:button label="Display Additional Appointments" onclick="{!c.showMore}" variant="brand"/>
                                </center>
                            </span>
                        </lightning:layoutItem>

Helper
({
    setToday : function(cmp) {
        var today = new Date();
        
        
        const tomorrow = new Date(Number(today));
        tomorrow.setDate(today.getDate() + 62);
        
        
        var str = tomorrow.getFullYear() + '-' + String(tomorrow.getMonth() + 1).padStart(2, '0') + '-' + String(tomorrow.getDate()).padStart(2, '0');
        cmp.set("v.todayDate", str);
        cmp.set("v.selectedDate",str);
	},
    checkAccountEligibility : function(cmp) {
        console.log('Checking Account Eligibility');
        var action = cmp.get("c.checkAccountEligibility");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var eligibilityStatus = response.getReturnValue();
                console.log('@@@@ eligibilityStatus: ' + eligibilityStatus);
                cmp.set("v.loading", false);
                cmp.set("v.showSpinner",false);
                if(eligibilityStatus !== 'Eligible') {
                    cmp.set("v.isEligible", false);
                    cmp.set("v.showError", true);
                    cmp.set("v.errorMessage", eligibilityStatus);
                } else {
                    this.createWorkOrderAndServiceAppointment(cmp);
                }
            } else {
                let errors = response.getError();
                console.log('Error response: ' + response);
                console.log("Error message: " + errors[0].message);
            }
        });

        $A.enqueueAction(action);
    },
    createWorkOrderAndServiceAppointment : function(cmp) {
        //cmp.set("v.showSpinner", true);
          console.log('Getting appointments to create?');
        var action = cmp.get("c.createWorkOrderAndServiceAppointment");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var resp = response.getReturnValue();
                cmp.set("v.loading", false);
                cmp.set("v.isEligible", resp.isEligibleCustomer); //change to true from other cmp.resp.isEligibleCustomer
                if(resp.isEligibleCustomer) { //swith to true for testing resp.isEligibleCustomer
                    cmp.set("v.workOrderId", resp.workOrderId);
                    cmp.set("v.serviceAppointmentId", resp.serviceAppointmentId);
                    this.getApptSlots(cmp);
                }
            } else {
                let errors = response.getError();
                console.log('Error response: ' + response);
                console.log("Error message: " + errors[0].message);
            }
        });

        $A.enqueueAction(action);
    },
    getApptSlots : function(cmp){
        console.log('here is the callback function which is erroring out due to too much CPU time, but why?');
        var selectedDate = cmp.get("v.selectedDate");
        var workOrderId = cmp.get("v.workOrderId")
        var serviceAppointmentId = cmp.get("v.serviceAppointmentId");

        var action = cmp.get("c.getAppointmentSlots");
        action.setParams({
            workOrderId: workOrderId,
            serviceAppointmentId: serviceAppointmentId
        });
        action.setCallback(this, function(response) {
            cmp.set("v.showSpinner", false);
            var state = response.getState();
            if (state === "SUCCESS") {
                var resp = response.getReturnValue();
                console.log(resp);
                cmp.set("v.data",resp);
                cmp.set("v.slotList", resp.slots);
                cmp.set("v.allSlots", resp.slots);
                cmp.set("v.rowCount", 4);
            }
            else{
                let errors = response.getError();
                console.log('Error response: ' + response);
                console.log("Error message: " + errors[0].message);
            }
        });

        $A.enqueueAction(action);
    },
    getFilterApptSlots : function (cmp) {
        var allSlots = cmp.get("v.allSlots");
        var todayDate = cmp.get("v.todayDate");
        var selectedDate = cmp.get("v.selectedDate");
        var convertedSelectedDate = new Date(selectedDate);

        if(selectedDate >= todayDate) {
            var filteredSlots = [];
            // Filter the slots by Date
            allSlots.forEach(function (slot) {
                var convertedStartDate = new Date(slot.times.startDT);
                if(convertedStartDate >= convertedSelectedDate){
                    filteredSlots.push(slot) ;
                }
            });
            cmp.set("v.rowCount", 4);
            cmp.set("v.slotList", filteredSlots);
        } else {
            cmp.set("v.selectedDate", todayDate);
            var toastEvent = $A.get("e.force:showToast");
            toastEvent.setParams({
                "title": "Notice",
                "type":"warning",
                "message": "Appointments must be scheduled at least one day in advance.",
                "mode":'sticky'

            });
            toastEvent.fire();
        }
    }
})

 
Best Answer chosen by BobP
PriyaPriya (Salesforce Developers) 
Hi Bob,

Can you please refer below example which matches your requirment
https://www.sfdcpoint.com/salesforce/loading-spinner-in-lightning-component/#google_vignette

Hope this is helpful!

Regards,
Ranjan

All Answers

PriyaPriya (Salesforce Developers) 
Hi Bob,

Can you please refer below example which matches your requirment
https://www.sfdcpoint.com/salesforce/loading-spinner-in-lightning-component/#google_vignette

Hope this is helpful!

Regards,
Ranjan
This was selected as the best answer
BobPBobP
Thank you for the link. I think it should be useful i just need to figure out where to add the spinner code. This piece of code below calls the c:Acme_BookingSlot lightning component and once it calls it the spinner should be activated. As the component take 15-20 second to load the appointment time slots so i dont want the user  to keep clicking or wonder if anything is happening
 
<aura:iteration items="{!v.slotList}" var="slot" indexVar="i">
                                       <aura:if isTrue="{!(i > v.rowCount) == false}">
                                           
                                            <c:Acme_BookingSlot slot="{!slot}" workOrderId="{!v.workOrderId}" serviceAppointmentId="{!v.serviceAppointmentId}"/>
                                        </aura:if>
                                       </aura:iteration>

 
PriyaPriya (Salesforce Developers) 

Hey BobP,

Since the information was useful, I request you to kindly mark it as the best answer so that it can helps the other in future.

Regards,

Priya Ranjan

BobPBobP
I will mark your response as best anwser for helping buti will repose with all the code for this lightning component as I need help with placing the spinner code with my component