Lwc spinner Container Position Issue

Question

The spinner container moves up when I scroll down. How to fix the issue without using the spinner inside a modal?

<template>
    <div class="slds-theme_default">
        <div class="slds-is-relative">
            <!--Loading Spinner-->
            <template if:true={isSpinner}>
                <lightning-spinner alternative-text="Loading" variant="brand" size="large">
                </lightning-spinner>
            </template>
            <!-- Page header begins-->
        </div>  
    </div>
</template>

Answer 1

Depends on what you want the spinner to do! There are several choices I have implemented lately... so I will give you those answers.

First, consider just turning off the stuff that is loading, you can handle this in the HTML:

<template>
    <div class="slds-theme_default">
        <div class="slds-is-relative">
            <!--Loading Spinner-->
            <template if:true={isSpinner}>
               <div class="spinnerHolder">
                <lightning-spinner alternative-text="Loading" variant="brand" size="large">
                </lightning-spinner>
               </div>
            </template >
            <template if:false={isSpinner}>
              <!-- Page header begins-->
            </template >
        </div>  
    </div>
</template>

Or you can use the information from https://www.lightningdesignsystem.com/components/spinners/#site-main-content to do basically anything you want.

Either user the slds classes or use CSS. The page will give you great ideas.

One that I didn't see there was an inline spinner to show something was being fetched (loading...). Here is how I implemented that

First of all you want to name the spinner.. so we can do some snazzy CSS on it Your HTML becomes:

<template>
    <div class="slds-theme_default">
        <div class="slds-is-relative">
            <!--Loading Spinner-->
            <template if:true={isSpinner}>
               <div class="spinnerHolder">
                <lightning-spinner alternative-text="Loading" variant="brand" size="large">
                </lightning-spinner>
               </div>
            </template>
            <!-- Page header begins-->
        </div>  
    </div>
</template>

If you want the spinner to be inline (like loading ) Your CSS is

.spinnerHolder {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
}

Note at the bottom of the LDS page I referenced above you will find lots of CSS tags that will help you out.

Good luck!