Hi mukesh,

Thank you so much for helping me.
I updated my component with your code but no spinner appeared. The screenshots below show where the spinner should show up prior to the appontment dates being displayed.

Background on the process
A community user will log int othe community and click a Schedule appointment button. This invokes a lightning component "AppointmentBooking"

a Calendar is displayed with the available time slot to the right. Below is the code for the AppointmentBooking component. I only need this spinner because the system is so slow populating those time slots. Let me know if you need the apex class posted. Thank again!

AppointmentBooking component

<aura:component implements="flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes,force:hasRecordId,flexipage:availableForRecordHome" access="global"
                controller="AppointmentBooking">



    <aura:attribute name="debug" type="Boolean" default="false"/>

    <aura:attribute name="loading" type="Boolean" default="true"/>
    <aura:attribute name="showSpinner" type="Boolean" default="true"/>
    <aura:attribute name="isEligible" type="Boolean" default="true"/>
    <aura:attribute name="showError" type="Boolean" default="false"/>
    <aura:attribute name="errorMessage" type="String"/>
    <aura:attribute name="rowCount" type="Integer" default="4"/>
    <aura:attribute name="isOpen" type="boolean" default="false"/>


    <aura:attribute name="data" type="Object" default="{}"/>
    <aura:attribute name="slotList" type="List" default="[]"/>
    <aura:attribute name="allSlots" type="List" default="[]"/>
    <aura:attribute name="workOrderId" type="Id"/>
    <aura:attribute name="serviceAppointmentId" type="Id"/>
    <aura:attribute name="selectedDate" type="Date"/>
    <aura:attribute name="todayDate" type="Date"/>
    <aura:attribute name="currentUser" type="User"/>
	<force:recordData aura:id="recordLoader" recordId="{!$SObjectType.CurrentUser.Id}" fields="Account.BillingStreet, Account.BillingCity, Account.BillingState, Account.BillingCountry, Account.BillingPostalCode" targetFields="{!v.currentUser}"/> 
    <aura:handler name="init" value="{!this}" action="{!c.initCmpData}"/>
    <aura:handler name="change" value="{!v.selectedDate}" action="{!c.getFilterApptSlots}"/>
    <aura:if isTrue="{!v.debug}">
        Debug<br/>
        recId {!v.recordId}<br/>
        data {!v.data.slots.length}<br/>
        todayDate {!v.todayDate}<br/>
        selectedDate {!v.selectedDate}<br/>
        isEligible {!v.isEligible} <br/>
    </aura:if>

    <aura:if isTrue="{!v.loading}">
        <aura:if isTrue="{!v.showSpinner}">
            <lightning:spinner/>
        </aura:if>
        <aura:set attribute="else">
            <aura:if isTrue="{!v.isEligible}">
                <div class="cmpWrapper">
                    <lightning:layout multipleRows="true">
                        <lightning:layoutItem size="4" padding="around-small">
                            <span class="calWrapper">
                                
                                <center>
                                 
                                    <c:DatePicker aura:id="closeDate" label="Select a preferred appointment date to view availability"
                                                  placeholder="Date"
                                                  value="{!v.selectedDate}"
                                                  formatSpecifier="MM/dd/yyyy" />
                                </center>
                            </span>
                            
                            
                            <br/>
                             <aura:if isTrue="{!v.isEligible}">
                                 <center><br/>
            <div class="slds-float_leftX additionalOption slds-p-bottom_xx-small">
               <h2> Not seeing any results or can’t find an appointment that fits your needs? Contact us at (800) 422-5365.</h2>
                
            </div>
        </center>
        <br/>
            
    </aura:if>
    <center>
        <!-- removing create a case access-->
        <!-- <a href="./contactsupport">
            <lightning:button label="Create Case" variant="brand"/>
        </a> -->
    </center>
                            
                            
                            
                            
                        </lightning:layoutItem>
                        <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:AdVic_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>
                    </lightning:layout>
                    
                    
                    
                    
                    
                    

                   
                </div>
                <aura:set attribute="else">
                    <lightning:icon iconName="utility:warning" alternativeText="Customer Not Eligible"
                                    variant="Warning" title="Not Eligible" class="notification-icon"/>
                    <aura:if isTrue="{!v.showError}">
                        <div id="error">
<!--                            <lightning:input value="{!v.errorMessage}" readonly="true"/>-->
                           
                        </div>
                        <aura:set attribute="else">
                            <br/>
                        </aura:set>
                    </aura:if>
                    <br/>
                    <span>{!v.errorMessage}</span>
                </aura:set>
            </aura:if>
        </aura:set>
    </aura:if>

    <br/>
    <br/>
   
</aura:component>

Helper:

({
    setToday : function(cmp) {
        var today = new Date();
        
        
        const tomorrow = new Date(Number(today));
        tomorrow.setDate(today.getDate() +60);
        
        
        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();
        }
    }
})