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

<div class="skeleton-base @AdditionalClasses" style="@($"height: {Height}px;")">
    @ChildContent
    <div class="skeleton-shimmer"></div>
</div>

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

    /// <summary>
    /// Additional CSS classes to include.
    /// </summary>
    [Parameter]
    public string AdditionalClasses { get; set; } = "";

    /// <summary>
    /// Child content to render within the skeleton loader.
    /// </summary>
    [Parameter]
    public RenderFragment ChildContent { get; set; } = null!;
}

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

    .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-base {
        background-color: var(--bs-gray-800);
    }

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