ロード中の「ぐるぐる」問題を解決！LWCでユーザーフレンドリーなコンポーネントを作る

<template if:true={isLoading}>
          <lightning-spinner alternative-text="読み込み中" size="medium"></lightning-spinner>
</template>

import { LightningElement, track } from 'lwc';

export default class Spinner extends LightningElement {
    @track data = [];
    columns = [
        { label: 'Label', fieldName: 'name' },
        { label: 'Website', fieldName: 'website', type: 'url' },
        { label: 'Phone', fieldName: 'phone', type: 'phone' },
        { label: 'Balance', fieldName: 'amount', type: 'currency' },
        { label: 'CloseAt', fieldName: 'closeAt', type: 'date' }
    ];
    
    @track isLoading = true;

    connectedCallback() {
        this.loadData();
    }

    

    loadData() {
        this.isLoading = true;

        // データを非同期で取得
        setTimeout(() => {
            this.data = generateData({ amountOfRecords: 1000 });
            this.isLoading = false; 
        }, 1000);
    }

    handleReload(){
        this.loadData();
    }
}


function generateData({ amountOfRecords }) {
    return [...Array(amountOfRecords)].map((_, index) => {
        return {
            name: `Name (${index})`,
            website: 'https://www.salesforce.com',
            amount: Math.floor(Math.random() * 10000) / 100, 
            phone: `${Math.floor(Math.random() * 9000000000) + 1000000000}`,
            closeAt: new Date(
                Date.now() + 86400000 * Math.ceil(Math.random() * 20)
            ).toISOString().split('T')[0] 
        };
    });
}

<div class="spinner-container">
    <lightning-datatable ...></lightning-datatable>

    <template if={isLoading}>
        <lightning-spinner alternative-text="読み込み中" size="medium"></lightning-spinner>
    </template>
</div>

.datatable-wrapper {
    position: relative;
}