


<div class="h-[calc(100vh)] flex flex-col bg-white dark:bg-gray-900   h-full">
    <header class="w-full bg-gray-50 dark:bg-gray-900 animate-pulse h-16 sticky gap-5 inset-x-0 items-center  flex p-5  top-0 z-10  border-gray-100 dark:border-gray-700 border-b">

        <div class="rounded-full bg-gray-100 dark:bg-slate-800/40 h-9 w-9  animate-pulse ">

        </div>
        <div class="bg-gray-100 dark:bg-slate-800/40 h-4 w-72 animate-pulse rounded-xl">

        </div>

        <div class="rounded-full bg-gray-100 dark:bg-slate-800/40 h-9 w-2 ml-auto animate-pulse ">

        </div>
    </header>

    <main class=" bg-white dark:bg-gray-900 flex flex-col animate-pulse grow h-10/12 h-full">

        <div class="bg-gray-100 dark:bg-slate-800/40 h-9 w-48 mt-12 mx-auto animate-pulse rounded-xl">

        </div>

        <div class="m-auto">

            {{-- Snipper --}}
            <span 
            style="
             width: 15px;
                height: 15px;
                border-radius: 50%;
                display: inline-block;
                position: relative;
                border: 10px solid;
                border-color: rgba(230, 228, 228, 0.063) rgba(237, 235, 235, 0.094) rgba(255, 255, 255, 0.104) rgba(255, 255, 255, 0.23);
                box-sizing: border-box;
            "
            class=" animate-spin ">

            </span>

        </div>
    </main>

        <!-- Loading spinner... -->
    <foooter class=" sticky bottom-0 w-full h-16 flex items-center gap-3 p-4 dark:bg-gray-900 bg-gray-50 h-10 animate-pulse  border-t dark:border-gray-700">
        <span class="rounded-full bg-gray-100 dark:bg-slate-800/40 h-9 w-9  animate-pulse ">

        </span>

        <span class="rounded-full bg-gray-100 dark:bg-slate-800/40 h-9 w-7  animate-pulse ">

        </span>
    
    
        <div class="bg-gray-100 dark:bg-slate-800/40 h-8 w-11/12 animate-pulse rounded-xl">

        </div>

        <span class="rounded-full bg-gray-100 dark:bg-slate-800/40 h-9 w-9  animate-pulse ">

        </span>


    </foooter>
</div>