Unable to place the spinner on the component

Hi Salesforce Dev,

Hope you all are fine. I need help on the spinner, I'm able to use the spinner but the problem is it taking the whole page. Whereas my LWC is in right hand side of the lightning page.

Is it possible to have the spinner inside the component and not outside the page. I have tried to use mutiple <div> to keep the spinner within the component but it seems it is always rendering on the page instead.

Please follow the code below, let me know what Am i doing wrong, and what is the right way.

<template>
    <div class="slds-page-header slds-page-header_record-home">
        <div class="slds-page-header__row">
            <div class="slds-page-header__col-title">                
                <header class="slds-media slds-media_center slds-has-flexi-truncate ">
                    <div class="slds-media__figure">
                        <lightning-icon icon-name="standard:contact" alternative-text="Contact" title="Contact"></lightning-icon>
                    </div>
                    <div class="slds-media__body">
                        <h2 class="slds-card__header-title">New Contact</h2>
                    </div>
                </header>
            </div>
        </div>            
        <div class="slds-page-header__row slds-page-header__row_gutters">
            <div if:true={isSpinner} class="slds-spinner_container">
                <div class="slds-spinner--brand slds-spinner slds-spinner_medium" role="alert">
                    <span class="slds-assistive-text">Loading...</span>
                    <div class="slds-spinner__dot-a"></div>
                    <div class="slds-spinner__dot-b"></div>
                </div>
            </div>            
            <div class="slds-page-header__col-details">
                <div class="slds-page-header__detail-row">
                    <table>
                        <tr>
                            <td class="slds-p-left_small slds-p-right_small">
                                <lightning-input type="text" label="First Name" onchange={handleChange} 
                                            value={firstName} data-id="fName" required></lightning-input>
                            </td>
                            <td class="slds-p-right_small slds-p-left_small">
                                <lightning-input type="text" label="Last Name" onchange={handleChange} 
                                            value={lastName} data-id="lName" required></lightning-input>
                            </td>
                        </tr>
                        <tr>
                            <td class="slds-p-top_small slds-p-left_small slds-p-right_small">                   
                                <lightning-input type="email" label="Email" onchange={handleChange} 
                                            value={email} data-id="email" required></lightning-input>
                            </td>
                            <td class="slds-p-top_small slds-p-right_small slds-p-left_small">
                                <lightning-input type="text" label="Level of Intimacy" onchange={handleChange} 
                                            value={levelOfIntimacy} data-id="intimacy"></lightning-input>
                            </td>
                        </tr>
                        <tr>
                            <td class="slds-p-top_small slds-p-left_small slds-p-right_small">
                                <lightning-input type="text" label="Job Title" onchange={handleChange} 
                                            value={jobTitle} data-id="title"></lightning-input>
                            </td>
                            <td class="slds-p-top_small slds-p-right_small slds-p-left_small">
                                <lightning-input type="text" label="Company" onchange={handleChange} 
                                            value={company} data-id="company"></lightning-input>
                            </td>
                        </tr>
                        <tr>
                            <td class="slds-p-top_medium slds-p-left_small slds-p-right_small slds-text-align_right">
                                <lightning-button label="Clear" variant="neutral" onclick={handleClear}></lightning-button>
                            </td>
                            <td class="slds-p-top_medium slds-p-right_small slds-p-left_small">
                                <lightning-button label="Save" variant="brand" onclick={handleSave}></lightning-button>
                            </td>
                        </tr>
                    </table>                    
                </div>  
            </div>          
        </div>
    </div>
</template>