94 lines
3.5 KiB
Elixir
94 lines
3.5 KiB
Elixir
defmodule ToweropsWeb.Components.Skeletons do
|
|
@moduledoc """
|
|
Loading skeleton components for placeholder UI during data fetches.
|
|
"""
|
|
use Phoenix.Component
|
|
|
|
@doc """
|
|
A pulsing card placeholder.
|
|
"""
|
|
attr :class, :string, default: nil
|
|
|
|
def skeleton_card(assigns) do
|
|
~H"""
|
|
<div class={["animate-pulse rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-gray-800/50", @class]}>
|
|
<div class="h-3 w-24 rounded bg-gray-200 dark:bg-gray-700"></div>
|
|
<div class="mt-3 h-8 w-16 rounded bg-gray-200 dark:bg-gray-700"></div>
|
|
<div class="mt-2 h-3 w-20 rounded bg-gray-200 dark:bg-gray-700"></div>
|
|
</div>
|
|
"""
|
|
end
|
|
|
|
@doc """
|
|
Table rows with pulsing placeholders.
|
|
"""
|
|
attr :rows, :integer, default: 5
|
|
attr :cols, :integer, default: 4
|
|
|
|
def skeleton_table(assigns) do
|
|
~H"""
|
|
<div class="animate-pulse rounded-lg border border-gray-200 bg-white dark:border-white/10 dark:bg-gray-800/50">
|
|
<div class="border-b border-gray-200 px-4 py-3 dark:border-white/10">
|
|
<div class="flex gap-6">
|
|
<div :for={_ <- 1..@cols} class="h-3 w-20 rounded bg-gray-200 dark:bg-gray-700"></div>
|
|
</div>
|
|
</div>
|
|
<div :for={_ <- 1..@rows} class="border-b border-gray-100 px-4 py-3 last:border-0 dark:border-white/5">
|
|
<div class="flex gap-6">
|
|
<div :for={_ <- 1..@cols} class="h-3 w-20 rounded bg-gray-200 dark:bg-gray-700"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
"""
|
|
end
|
|
|
|
@doc """
|
|
A stat card skeleton (number + label placeholder).
|
|
"""
|
|
attr :class, :string, default: nil
|
|
|
|
def skeleton_stat(assigns) do
|
|
~H"""
|
|
<div class={["animate-pulse rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-gray-800/50", @class]}>
|
|
<div class="h-3 w-20 rounded bg-gray-200 dark:bg-gray-700"></div>
|
|
<div class="mt-2 h-8 w-12 rounded bg-gray-200 dark:bg-gray-700"></div>
|
|
</div>
|
|
"""
|
|
end
|
|
|
|
@doc """
|
|
Dashboard loading skeleton - full placeholder for the dashboard content.
|
|
"""
|
|
def skeleton_dashboard(assigns) do
|
|
~H"""
|
|
<div class="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
|
|
<.skeleton_stat :for={_ <- 1..6} />
|
|
</div>
|
|
<div class="mt-6 flex flex-wrap items-center gap-3">
|
|
<div :for={_ <- 1..4} class="h-8 w-28 animate-pulse rounded-lg bg-gray-200 dark:bg-gray-700">
|
|
</div>
|
|
</div>
|
|
<div class="mt-8 grid gap-8 lg:grid-cols-5">
|
|
<div class="lg:col-span-3">
|
|
<div class="h-5 w-28 animate-pulse rounded bg-gray-200 dark:bg-gray-700 mb-4"></div>
|
|
<div class="space-y-3">
|
|
<div :for={_ <- 1..3} class="animate-pulse rounded-lg border border-gray-200 bg-white p-4 dark:border-white/10 dark:bg-gray-800/50">
|
|
<div class="h-3 w-32 rounded bg-gray-200 dark:bg-gray-700"></div>
|
|
<div class="mt-2 h-4 w-48 rounded bg-gray-200 dark:bg-gray-700"></div>
|
|
<div class="mt-2 h-3 w-64 rounded bg-gray-200 dark:bg-gray-700"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="lg:col-span-2">
|
|
<div class="h-5 w-20 animate-pulse rounded bg-gray-200 dark:bg-gray-700 mb-4"></div>
|
|
<div class="space-y-3">
|
|
<div :for={_ <- 1..3} class="animate-pulse rounded-lg border border-gray-200 bg-white p-3 dark:border-white/10 dark:bg-gray-800/50">
|
|
<div class="h-3 w-16 rounded bg-gray-200 dark:bg-gray-700"></div>
|
|
<div class="mt-2 h-4 w-40 rounded bg-gray-200 dark:bg-gray-700"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
"""
|
|
end
|
|
end
|