aliasvault/apps/server/AliasVault.Client/Main/Components/Loading/SkeletonLoader.razor

@using Microsoft.AspNetCore.Components

<div class="skeleton-loader rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800" style="@($"height: {Height}px;")">
    <div class="skeleton-content">
        @for (int i = 0; i < Parts; i++)
        {
            <div class="skeleton-part" style="@($"width: {100 / Parts}%;")"></div>
        }
    </div>
    <div class="skeleton-shimmer"></div>
</div>

@code {
    /// <summary>
    /// The height of the skeleton loader element.
    /// </summary>
    [Parameter]
    public int Height { get; set; } = 60;

    /// <summary>
    /// Amount of skeleton parts to render.
    /// </summary>
    [Parameter]
    public int Parts { get; set; } = 2;
}

<style>
    .skeleton-loader {
        background-color: var(--bs-gray-200);
        border-radius: 0.5rem;
        overflow: hidden;
        position: relative;
    }

    .skeleton-content {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem;
    }

    .skeleton-part {
        background-color: var(--bs-gray-300);
        border-radius: 0.25rem;
        height: 0.75rem;
    }

    .skeleton-shimmer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.4) 50%,
            transparent 100%
        );
        animation: shimmer 1.5s infinite;
    }

    @@keyframes shimmer {
        0% {
            transform: translateX(-100%);
        }
        100% {
            transform: translateX(100%);
        }
    }

    /* Dark mode support */
    :root[data-bs-theme="dark"] .skeleton-loader {
        background-color: var(--bs-gray-800);
    }

    :root[data-bs-theme="dark"] .skeleton-part {
        background-color: var(--bs-gray-700);
    }

    :root[data-bs-theme="dark"] .skeleton-shimmer {
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.1) 50%,
            transparent 100%
        );
    }
</style>