lightning-quick-action-panel include lightning spinner

Question

I want to include a lightning-spinner inside the body of my lightning-quick-action- panel but it's not working as desired

This is my lwc.html:

<template>
<lightning-quick-action-panel header="LABEL" class="panel-body_custom">
    <!-- body -->
        <div class="slds-is-relative">
            <!-- spinner -->
            <template if:true={bypassExecuting}>
                <lightning-spinner variant="brand" size="medium"> 
</lightning-spinner>    
            </template>
        </div>
        <lightning-layout multiple-rows="true">
            <lightning-layout-item size="12">
                body
            </lightning-layout-item>
            <lightning-layout-item size="12">
                body
            </lightning-layout-item>
            <lightning-layout-item size="12">
                body
            </lightning-layout-item>
            <lightning-layout-item size="12">
                body
            </lightning-layout-item>
        </lightning-layout>
    <!-- footer -->
    <div slot="footer">
        <lightning-button variant="neutral" label="Cancel"></lightning-button>
        <lightning-button variant="brand" label="Save" class="slds-m-left_x-small"></lightning-button>
    </div>
</lightning-quick-action-panel>
</template>

But it's being displayed like this:

Is there any way to make it appear centered and also hovering everything else inside the body?

Regards,

Answer 1

Put your slds-is-relative around all of the body (and spinner) so the lightning spinner covers over the body versus occupying the top where it's defined before the body.

<lightning-quick-action-panel header="LABEL" class="panel-body_custom">
    <!-- body -->
    <div class="slds-is-relative">
        <!-- spinner -->
        <template if:true={bypassExecuting}>
            <lightning-spinner variant="brand" size="medium"> 
            </lightning-spinner>    
        </template>
        <lightning-layout multiple-rows="true">
            <lightning-layout-item size="12">
                body
            </lightning-layout-item>
            <lightning-layout-item size="12">
                body
            </lightning-layout-item>
            <lightning-layout-item size="12">
                body
            </lightning-layout-item>
            <lightning-layout-item size="12">
                body
            </lightning-layout-item>
        </lightning-layout>
    </div> <!-- body within slds-is-relative along with spinner -->
    <!-- footer -->
    <div slot="footer">
        <lightning-button variant="neutral" label="Cancel"></lightning-button>
        <lightning-button variant="brand" label="Save" class="slds-m-left_x-small"></lightning-button>
    </div>
</lightning-quick-action-panel>