Add Spinner in Modal/Popup in LWC Salesforce

<template>
    <div class="slds-tabs_card">
		<div class="slds-page-header">
			<div class="slds-page-header__row">
				<div class="slds-page-header__col-title">
					<div class="slds-media">
						<div class="slds-media__figure">
							<span class="slds-icon_container slds-icon-standard-opportunity">
								 <lightning-icon icon-name="standard:recipe" alternative-text="recipe" title="recipe"></lightning-icon>
                            </span>
						</div>
						<div class="slds-media__body">
							<div class="slds-page-header__name">
								<div class="slds-page-header__name-title">
									<h1>
										<span>Show Spinner in Modal Body LWC</span>
										<span class="slds-page-header__title slds-truncate" title="Recently Viewed">TechDicer</span>
									</h1>
								</div>
							</div>
						</div>
					</div>
				</div>
                <div class="slds-page-header__col-actions">
                    <div class="slds-page-header__controls">
                    <div class="slds-page-header__control">
                        <ul class="slds-button-group-list">
                        <li>
                             <lightning-button name="openModal" label="Open Modal" onclick={openCloseModal} variant="brand" class="slds-m-around_small"></lightning-button>
                        </li>
                        </ul>
                    </div>
                    </div>
                </div>
			</div>
		</div>
	</div> <br/>
   
 
    <!-- This Modal will only be visible if showModal is set to true -->
    <template if:true={showModal}>
        <section aria-modal="true" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container ">
                <header class="slds-modal__header">
                    <h2 class="slds-text-heading_small">Modal Header</h2>
                    <lightning-icon class="slds-modal__close" icon-name="utility:close" size="small" onclick={openCloseModal}></lightning-icon>
                </header>
                <div class="slds-modal__content modalBodySpinner">
                    <template if:true={showLoading}>
                        <lightning-spinner alternative-text="Loading" size="medium" class="spinnerClass"></lightning-spinner>
                    </template>
                    <div class="slds-p-around_small">
                        <p>
                            We will show spinner when ever load the data from server or load the logics. By this way we can give a better user experience to any user that something is in process.  There is a problem when we show the spinner in modal/popup. It show in whole screen instead show only in modal body. For this we just need a custom css position:relative in spinner parent div. Lets understand with a simple example.
                        </p>
                    </div>
                </div>
                <footer class="slds-modal__footer">
                    <lightning-button variant="brand" label="Show/Hide Spinner" onclick={showHideSpinner} class="slds-p-around_x-small"></lightning-button>
                    <lightning-button variant="brand" label="Cancel" onclick={openCloseModal} class="slds-p-around_x-small"></lightning-button>
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </template>
</template>

import { LightningElement, track } from 'lwc';
export default class LWCModalSpinner extends LightningElement {

    @track showModal = false;
    @track showLoading = false;
 
    openCloseModal() {
        // Setting boolean variable show/hide modal
        this.showModal = !this.showModal;
    }
 
    showHideSpinner() {
        // Setting boolean variable show/hide spinner
        this.showLoading = !this.showLoading;
    }
}

.modalBodySpinner{
	position: relative;;
}