Record detail page loading skeleton In LWC

Using salesforce loading spinner is outdated. now time to use animated loading skeletons in LWC modern and looks nice. here a example of record details page loading skeleton. 

Page Loading Skeleton in LWC

detailPageSkeleton.html

<template>
    <div class="slds-grid slds-wrap slds-gutters skelton-grid" lwc:dom="manual">   
    </div>
</template>

detailPageSkeleton.js

import { LightningElement, api } from 'lwc';

export default class DetailPageSkeleton extends LightningElement {
    @api noOfSkeletons = 5; 

    renderedCallback(){
        let CONTAINER_HTML = `<div class="slds-col slds-size_1-of-1 slds-medium-size_6-of-12 slds-large-size_6-of-12">
                                <div class="skelton-container">
                                    <div class="slds-border_bottom">
                                        <div class="skelton line-small"></div>
                                        <div class="skelton line-large"></div>
                                    </div>
                                </div>
                            </div>`;
        const container = this.template.querySelector('.skelton-grid');
        let loadingContainerHtml='';
        
        for (let i = 0; i < this.noOfSkeletons; i++) {
            loadingContainerHtml +=CONTAINER_HTML;
            
        }
        container.innerHTML = loadingContainerHtml;
    }
}

detailPageSkeleton.css

.skelton-container .skelton {
    margin: 10px;
    border-radius: 3px;
    background-image: linear-gradient(90deg, #e2e2e2 0px, #efefef 30px, #e2e2e2 60px);
    background-size: calc(160px + 160px);
    animation: refresh 1.2s infinite ease-out;
}

.line-small {
    height: 8px;
    width: 100px;
}

.line-large {
    height: 10px;
    width: 200px;
}

/* Animation */
@keyframes refresh {
    0% {
        background-position: calc(-160px);
    }

    60%,
    100% {
        background-position: 160px;
    }
}

detailPageSkeleton.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

Also found above code in Tech Shorts Git repo