feat: Sprint 1 — Alive Enterprise animation foundation
Animation primitives (6 new components): - AnimatedNumber: count-up with easeOutExpo, de-DE locale formatting - ShimmerSkeleton: diagonal gradient sweep replacing animate-pulse - FadeIn: framer-motion viewport-triggered fade + slide - StaggerList/StaggerItem: staggered children entrance - Sparkline: pure SVG inline trend chart with draw-in animation - ProgressRing: animated circular progress with CSS transitions Sidebar & page transitions: - Sliding nav indicator (framer-motion layoutId animation) - Icon frame hover glow (brand-color shadow) - Smooth section collapse/expand (AnimatePresence height animation) - PageTransition wrapper (fade-up on route change) - AnimatedModal component (scale + fade with custom bezier) - Notification badge bounce on count increase Dashboard animations: - StatCards: AnimatedNumber count-up + staggered FadeIn + budget color tinting - WidgetContainer: fade-slide-up on mount - Chargeability: animated percentages + inline utilization bars - ProjectTable/MyProjects: animated numbers + staggered row entrance Shimmer skeletons & table animations: - Replaced animate-pulse across 20+ loading states with shimmer gradient - Staggered row entrance (fadeSlideIn) on Resources, Projects, Allocations tables - hover-lift utility class for subtle card/row elevation on hover - Content-shaped skeletons (avatars, text bars, badges) Light mode surface depth: - Mesh gradient page background (subtle accent-tinted corners) - Enhanced card shadows (two-layer depth) - Sidebar glassmorphism upgrade (bg-white/60, backdrop-blur-2xl, saturate-150) - Toolbar sticky backdrop blur - Enhanced focus ring with brand-color glow Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
@@ -4,11 +4,11 @@ const SystemRolesClient = dynamic(
|
||||
() => import("~/components/admin/SystemRolesClient.js").then((m) => m.SystemRolesClient),
|
||||
{
|
||||
loading: () => (
|
||||
<div className="animate-pulse p-6 space-y-4 max-w-4xl mx-auto">
|
||||
<div className="h-8 w-48 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="p-6 space-y-4 max-w-4xl mx-auto">
|
||||
<div className="h-8 w-48 shimmer-skeleton rounded" />
|
||||
<div className="space-y-3">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<div key={i} className="h-24 w-full bg-gray-200 dark:bg-gray-700 rounded-xl" />
|
||||
<div key={i} className="h-24 w-full shimmer-skeleton rounded-xl animate-row-enter" style={{ animationDelay: `${i * 50}ms` }} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,43 +1,43 @@
|
||||
export default function AllocationsLoading() {
|
||||
return (
|
||||
<div className="flex flex-col h-full gap-4 animate-pulse">
|
||||
<div className="flex flex-col h-full gap-4">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="h-7 w-36 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-9 w-32 bg-gray-200 dark:bg-gray-700 rounded-lg" />
|
||||
<div className="h-7 w-36 shimmer-skeleton rounded" />
|
||||
<div className="h-9 w-32 shimmer-skeleton rounded-lg" />
|
||||
</div>
|
||||
|
||||
{/* Filter bar */}
|
||||
<div className="flex gap-2">
|
||||
<div className="h-9 w-36 bg-gray-100 dark:bg-gray-800 rounded-lg" />
|
||||
<div className="h-9 w-36 bg-gray-100 dark:bg-gray-800 rounded-lg" />
|
||||
<div className="h-9 w-36 bg-gray-100 dark:bg-gray-800 rounded-lg" />
|
||||
<div className="h-9 w-36 shimmer-skeleton rounded-lg" />
|
||||
<div className="h-9 w-36 shimmer-skeleton rounded-lg" />
|
||||
<div className="h-9 w-36 shimmer-skeleton rounded-lg" />
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="flex-1 border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="flex gap-3 px-4 py-3 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="h-3 w-4 bg-gray-300 dark:bg-gray-600 rounded" />
|
||||
<div className="h-3 w-28 bg-gray-300 dark:bg-gray-600 rounded" />
|
||||
<div className="h-3 flex-1 bg-gray-300 dark:bg-gray-600 rounded" />
|
||||
<div className="h-3 w-20 bg-gray-300 dark:bg-gray-600 rounded" />
|
||||
<div className="h-3 w-20 bg-gray-300 dark:bg-gray-600 rounded" />
|
||||
<div className="h-3 w-16 bg-gray-300 dark:bg-gray-600 rounded" />
|
||||
<div className="h-3 w-20 bg-gray-300 dark:bg-gray-600 rounded" />
|
||||
<div className="h-3 w-16 bg-gray-300 dark:bg-gray-600 rounded" />
|
||||
<div className="h-3 w-4 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-28 shimmer-skeleton rounded" />
|
||||
<div className="h-3 flex-1 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-20 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-20 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-16 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-20 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-16 shimmer-skeleton rounded" />
|
||||
</div>
|
||||
{/* Rows */}
|
||||
{[...Array(10)].map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-3 px-4 py-3 border-b border-gray-100 dark:border-gray-800">
|
||||
<div className="h-4 w-4 bg-gray-100 dark:bg-gray-700 rounded" />
|
||||
<div className="h-3 w-28 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-3 flex-1 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-3 w-20 bg-gray-100 dark:bg-gray-800 rounded" />
|
||||
<div className="h-3 w-20 bg-gray-100 dark:bg-gray-800 rounded" />
|
||||
<div className="h-3 w-10 bg-gray-100 dark:bg-gray-800 rounded" />
|
||||
<div className="h-3 w-16 bg-gray-100 dark:bg-gray-800 rounded" />
|
||||
<div className="h-5 w-20 bg-gray-100 dark:bg-gray-800 rounded-full" />
|
||||
<div key={i} className="flex items-center gap-3 px-4 py-3 border-b border-gray-100 dark:border-gray-800 animate-row-enter" style={{ animationDelay: `${i * 50}ms` }}>
|
||||
<div className="h-4 w-4 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-28 shimmer-skeleton rounded" />
|
||||
<div className="h-3 flex-1 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-20 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-20 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-10 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-16 shimmer-skeleton rounded" />
|
||||
<div className="h-5 w-20 shimmer-skeleton rounded-full" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -4,12 +4,12 @@ const AllocationsClient = dynamic(
|
||||
() => import("~/components/allocations/AllocationsClient.js").then((m) => m.AllocationsClient),
|
||||
{
|
||||
loading: () => (
|
||||
<div className="animate-pulse p-6 space-y-4">
|
||||
<div className="h-8 w-48 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-10 w-full bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="p-6 space-y-4">
|
||||
<div className="h-8 w-48 shimmer-skeleton rounded" />
|
||||
<div className="h-10 w-full shimmer-skeleton rounded" />
|
||||
<div className="space-y-2">
|
||||
{[...Array(8)].map((_, i) => (
|
||||
<div key={i} className="h-12 w-full bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div key={i} className="h-12 w-full shimmer-skeleton rounded animate-row-enter" style={{ animationDelay: `${i * 50}ms` }} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
export default function AppLoading() {
|
||||
return (
|
||||
<div className="p-6 space-y-4 animate-pulse">
|
||||
<div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-48" />
|
||||
<div className="h-4 bg-gray-100 dark:bg-gray-800 rounded w-72" />
|
||||
<div className="p-6 space-y-4">
|
||||
<div className="h-8 shimmer-skeleton rounded w-48" />
|
||||
<div className="h-4 shimmer-skeleton rounded w-72" />
|
||||
<div className="grid grid-cols-4 gap-4 mt-4">
|
||||
{[0, 1, 2, 3].map((i) => (
|
||||
<div key={i} className="h-20 bg-gray-100 dark:bg-gray-800 rounded-xl" />
|
||||
<div key={i} className="h-20 shimmer-skeleton rounded-xl" style={{ animationDelay: `${i * 50}ms` }} />
|
||||
))}
|
||||
</div>
|
||||
<div className="h-64 bg-gray-100 dark:bg-gray-800 rounded-xl" />
|
||||
<div className="h-48 bg-gray-100 dark:bg-gray-800 rounded-xl" />
|
||||
<div className="h-64 shimmer-skeleton rounded-xl" />
|
||||
<div className="h-48 shimmer-skeleton rounded-xl" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -530,7 +530,7 @@ export function ProjectsClient() {
|
||||
|
||||
<div className="app-data-table">
|
||||
{isLoading ? (
|
||||
<div className="py-16 text-center text-sm text-gray-500 animate-pulse">Loading projects…</div>
|
||||
<div className="py-16 text-center text-sm text-gray-500 shimmer-skeleton">Loading projects…</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="overflow-x-auto">
|
||||
@@ -558,7 +558,7 @@ export function ProjectsClient() {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100 dark:divide-gray-800">
|
||||
{projects.map((project) => {
|
||||
{projects.map((project, index) => {
|
||||
const isSelected = selection.selectedIds.has(project.id);
|
||||
return (
|
||||
<DraggableTableRow
|
||||
@@ -566,7 +566,8 @@ export function ProjectsClient() {
|
||||
id={project.id}
|
||||
dragRef={rowDragRef}
|
||||
onDrop={(draggedId) => reorder(draggedId, project.id)}
|
||||
className={`transition-colors hover:bg-gray-50/80 dark:hover:bg-gray-900/60 ${isSelected ? "bg-brand-50 dark:bg-brand-900/20" : ""}`}
|
||||
className={`transition-colors hover:bg-gray-50/80 dark:hover:bg-gray-900/60 animate-row-enter ${isSelected ? "bg-brand-50 dark:bg-brand-900/20" : ""}`}
|
||||
style={{ animationDelay: `${Math.min(index * 15, 300)}ms` }}
|
||||
>
|
||||
<td className="px-2 py-3 w-8">
|
||||
<button
|
||||
|
||||
@@ -1,48 +1,48 @@
|
||||
export default function ProjectsLoading() {
|
||||
return (
|
||||
<div className="flex flex-col h-full gap-4 animate-pulse">
|
||||
<div className="flex flex-col h-full gap-4">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="h-7 w-28 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-9 w-28 bg-gray-200 dark:bg-gray-700 rounded-lg" />
|
||||
<div className="h-7 w-28 shimmer-skeleton rounded" />
|
||||
<div className="h-9 w-28 shimmer-skeleton rounded-lg" />
|
||||
</div>
|
||||
|
||||
{/* Filter bar */}
|
||||
<div className="flex gap-2">
|
||||
<div className="h-9 flex-1 bg-gray-100 dark:bg-gray-800 rounded-lg" />
|
||||
<div className="h-9 w-36 bg-gray-100 dark:bg-gray-800 rounded-lg" />
|
||||
<div className="h-9 w-32 bg-gray-100 dark:bg-gray-800 rounded-lg" />
|
||||
<div className="h-9 flex-1 shimmer-skeleton rounded-lg" />
|
||||
<div className="h-9 w-36 shimmer-skeleton rounded-lg" />
|
||||
<div className="h-9 w-32 shimmer-skeleton rounded-lg" />
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="flex-1 border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="flex gap-3 px-4 py-3 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="h-3 w-4 bg-gray-300 dark:bg-gray-600 rounded" />
|
||||
<div className="h-3 w-16 bg-gray-300 dark:bg-gray-600 rounded" />
|
||||
<div className="h-3 flex-1 bg-gray-300 dark:bg-gray-600 rounded" />
|
||||
<div className="h-3 w-16 bg-gray-300 dark:bg-gray-600 rounded" />
|
||||
<div className="h-3 w-16 bg-gray-300 dark:bg-gray-600 rounded" />
|
||||
<div className="h-3 w-24 bg-gray-300 dark:bg-gray-600 rounded" />
|
||||
<div className="h-3 w-20 bg-gray-300 dark:bg-gray-600 rounded" />
|
||||
<div className="h-3 w-20 bg-gray-300 dark:bg-gray-600 rounded" />
|
||||
<div className="h-3 w-12 bg-gray-300 dark:bg-gray-600 rounded" />
|
||||
<div className="h-3 w-4 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-16 shimmer-skeleton rounded" />
|
||||
<div className="h-3 flex-1 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-16 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-16 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-24 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-20 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-20 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-12 shimmer-skeleton rounded" />
|
||||
</div>
|
||||
{/* Rows */}
|
||||
{[...Array(10)].map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-3 px-4 py-3 border-b border-gray-100 dark:border-gray-800">
|
||||
<div className="h-4 w-4 bg-gray-100 dark:bg-gray-700 rounded" />
|
||||
<div className="h-3 w-16 bg-gray-200 dark:bg-gray-700 rounded font-mono" />
|
||||
<div className="h-3 flex-1 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-5 w-20 bg-gray-100 dark:bg-gray-800 rounded-full" />
|
||||
<div className="h-5 w-16 bg-gray-100 dark:bg-gray-800 rounded-full" />
|
||||
<div key={i} className="flex items-center gap-3 px-4 py-3 border-b border-gray-100 dark:border-gray-800 animate-row-enter" style={{ animationDelay: `${i * 50}ms` }}>
|
||||
<div className="h-4 w-4 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-16 shimmer-skeleton rounded font-mono" />
|
||||
<div className="h-3 flex-1 shimmer-skeleton rounded" />
|
||||
<div className="h-5 w-20 shimmer-skeleton rounded-full" />
|
||||
<div className="h-5 w-16 shimmer-skeleton rounded-full" />
|
||||
<div className="flex flex-col gap-1 w-24">
|
||||
<div className="h-2 w-full bg-gray-200 dark:bg-gray-700 rounded-full" />
|
||||
<div className="h-2 w-10 bg-gray-100 dark:bg-gray-800 rounded" />
|
||||
<div className="h-2 w-full shimmer-skeleton rounded-full" />
|
||||
<div className="h-2 w-10 shimmer-skeleton rounded" />
|
||||
</div>
|
||||
<div className="h-3 w-20 bg-gray-100 dark:bg-gray-800 rounded" />
|
||||
<div className="h-3 w-20 bg-gray-100 dark:bg-gray-800 rounded" />
|
||||
<div className="h-3 w-8 bg-gray-100 dark:bg-gray-800 rounded" />
|
||||
<div className="h-3 w-20 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-20 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-8 shimmer-skeleton rounded" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -937,7 +937,7 @@ export function ResourcesClient() {
|
||||
{/* Table */}
|
||||
<div className="app-data-table">
|
||||
{isLoading && resources.length === 0 ? (
|
||||
<div className="p-12 text-center text-sm text-gray-500 animate-pulse">
|
||||
<div className="p-12 text-center text-sm text-gray-500 shimmer-skeleton">
|
||||
Loading resources…
|
||||
</div>
|
||||
) : (
|
||||
@@ -1097,7 +1097,7 @@ export function ResourcesClient() {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100 dark:divide-gray-800">
|
||||
{displayedResources.map((resource) => {
|
||||
{displayedResources.map((resource, index) => {
|
||||
const skills = resource.skills as unknown as SkillEntry[];
|
||||
const isSelected = selection.selectedIds.has(resource.id);
|
||||
const isDeactivating =
|
||||
@@ -1114,7 +1114,8 @@ export function ResourcesClient() {
|
||||
id={resource.id}
|
||||
dragRef={rowDragRef}
|
||||
onDrop={(draggedId) => reorder(draggedId, resource.id)}
|
||||
className={`transition-colors hover:bg-gray-50/80 dark:hover:bg-gray-900/60 ${isSelected ? "bg-brand-50 dark:bg-brand-900/20" : ""}`}
|
||||
className={`transition-colors hover:bg-gray-50/80 dark:hover:bg-gray-900/60 animate-row-enter ${isSelected ? "bg-brand-50 dark:bg-brand-900/20" : ""}`}
|
||||
style={{ animationDelay: `${Math.min(index * 15, 300)}ms` }}
|
||||
>
|
||||
<td className="px-4 py-3">
|
||||
<input
|
||||
|
||||
@@ -1,49 +1,49 @@
|
||||
export default function ResourcesLoading() {
|
||||
return (
|
||||
<div className="flex flex-col h-full gap-4 animate-pulse">
|
||||
<div className="flex flex-col h-full gap-4">
|
||||
{/* Page header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="h-7 w-32 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-9 w-28 bg-gray-200 dark:bg-gray-700 rounded-lg" />
|
||||
<div className="h-7 w-32 shimmer-skeleton rounded" />
|
||||
<div className="h-9 w-28 shimmer-skeleton rounded-lg" />
|
||||
</div>
|
||||
|
||||
{/* Filter bar */}
|
||||
<div className="flex gap-2">
|
||||
<div className="h-9 flex-1 bg-gray-100 dark:bg-gray-800 rounded-lg" />
|
||||
<div className="h-9 w-36 bg-gray-100 dark:bg-gray-800 rounded-lg" />
|
||||
<div className="h-9 w-36 bg-gray-100 dark:bg-gray-800 rounded-lg" />
|
||||
<div className="h-9 w-28 bg-gray-100 dark:bg-gray-800 rounded-lg" />
|
||||
<div className="h-9 flex-1 shimmer-skeleton rounded-lg" />
|
||||
<div className="h-9 w-36 shimmer-skeleton rounded-lg" />
|
||||
<div className="h-9 w-36 shimmer-skeleton rounded-lg" />
|
||||
<div className="h-9 w-28 shimmer-skeleton rounded-lg" />
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="flex-1 border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="flex gap-3 px-4 py-3 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="h-3 w-4 bg-gray-300 dark:bg-gray-600 rounded" />
|
||||
<div className="h-3 w-10 bg-gray-300 dark:bg-gray-600 rounded" />
|
||||
<div className="h-3 w-28 bg-gray-300 dark:bg-gray-600 rounded" />
|
||||
<div className="h-3 w-20 bg-gray-300 dark:bg-gray-600 rounded" />
|
||||
<div className="h-3 w-16 bg-gray-300 dark:bg-gray-600 rounded" />
|
||||
<div className="h-3 w-24 bg-gray-300 dark:bg-gray-600 rounded" />
|
||||
<div className="h-3 w-14 bg-gray-300 dark:bg-gray-600 rounded" />
|
||||
<div className="h-3 flex-1 bg-gray-300 dark:bg-gray-600 rounded" />
|
||||
<div className="h-3 w-20 bg-gray-300 dark:bg-gray-600 rounded" />
|
||||
<div className="h-3 w-4 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-10 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-28 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-20 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-16 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-24 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-14 shimmer-skeleton rounded" />
|
||||
<div className="h-3 flex-1 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-20 shimmer-skeleton rounded" />
|
||||
</div>
|
||||
{/* Rows */}
|
||||
{[...Array(10)].map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-3 px-4 py-3 border-b border-gray-100 dark:border-gray-800">
|
||||
<div className="h-4 w-4 bg-gray-100 dark:bg-gray-700 rounded" />
|
||||
<div className="h-3 w-10 bg-gray-200 dark:bg-gray-700 rounded font-mono" />
|
||||
<div className="h-3 w-32 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-3 w-20 bg-gray-100 dark:bg-gray-800 rounded" />
|
||||
<div className="h-3 w-14 bg-gray-100 dark:bg-gray-800 rounded" />
|
||||
<div className="h-5 w-20 bg-gray-100 dark:bg-gray-800 rounded-full" />
|
||||
<div className="h-5 w-12 bg-gray-100 dark:bg-gray-800 rounded-full" />
|
||||
<div key={i} className="flex items-center gap-3 px-4 py-3 border-b border-gray-100 dark:border-gray-800 animate-row-enter" style={{ animationDelay: `${i * 50}ms` }}>
|
||||
<div className="h-4 w-4 shimmer-skeleton rounded" />
|
||||
<div className="h-8 w-8 shimmer-skeleton rounded-full" />
|
||||
<div className="h-4 w-32 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-20 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-14 shimmer-skeleton rounded" />
|
||||
<div className="h-5 w-20 shimmer-skeleton rounded-full" />
|
||||
<div className="h-5 w-12 shimmer-skeleton rounded-full" />
|
||||
<div className="flex gap-1 flex-1">
|
||||
<div className="h-5 w-16 bg-gray-100 dark:bg-gray-800 rounded-full" />
|
||||
<div className="h-5 w-16 bg-gray-100 dark:bg-gray-800 rounded-full" />
|
||||
<div className="h-5 w-16 shimmer-skeleton rounded-full" />
|
||||
<div className="h-5 w-16 shimmer-skeleton rounded-full" />
|
||||
</div>
|
||||
<div className="h-3 w-16 bg-gray-100 dark:bg-gray-800 rounded" />
|
||||
<div className="h-3 w-16 shimmer-skeleton rounded" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -4,12 +4,20 @@ const ResourcesClient = dynamic(
|
||||
() => import("./ResourcesClient.js").then((m) => m.ResourcesClient),
|
||||
{
|
||||
loading: () => (
|
||||
<div className="animate-pulse p-6 space-y-4">
|
||||
<div className="h-8 w-48 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-10 w-full bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="p-6 space-y-4">
|
||||
<div className="h-8 w-48 shimmer-skeleton rounded" />
|
||||
<div className="h-10 w-full shimmer-skeleton rounded" />
|
||||
<div className="space-y-2">
|
||||
{[...Array(10)].map((_, i) => (
|
||||
<div key={i} className="h-12 w-full bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center gap-3 px-4 py-3 animate-row-enter"
|
||||
style={{ animationDelay: `${i * 50}ms` }}
|
||||
>
|
||||
<div className="h-8 w-8 rounded-full shimmer-skeleton flex-shrink-0" />
|
||||
<div className="h-4 w-32 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-48 shimmer-skeleton rounded" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,49 +1,49 @@
|
||||
export default function TimelineLoading() {
|
||||
return (
|
||||
<div className="flex flex-col h-full gap-0 animate-pulse">
|
||||
<div className="flex flex-col h-full gap-0">
|
||||
{/* Toolbar */}
|
||||
<div className="flex items-center gap-2 px-4 py-3 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="h-8 w-24 bg-gray-200 dark:bg-gray-700 rounded-lg" />
|
||||
<div className="h-8 w-24 bg-gray-200 dark:bg-gray-700 rounded-lg" />
|
||||
<div className="h-8 w-24 shimmer-skeleton rounded-lg" />
|
||||
<div className="h-8 w-24 shimmer-skeleton rounded-lg" />
|
||||
<div className="flex-1" />
|
||||
<div className="h-8 w-8 bg-gray-100 dark:bg-gray-800 rounded-lg" />
|
||||
<div className="h-8 w-8 bg-gray-100 dark:bg-gray-800 rounded-lg" />
|
||||
<div className="h-8 w-20 bg-gray-100 dark:bg-gray-800 rounded-lg" />
|
||||
<div className="h-8 w-8 shimmer-skeleton rounded-lg" />
|
||||
<div className="h-8 w-8 shimmer-skeleton rounded-lg" />
|
||||
<div className="h-8 w-20 shimmer-skeleton rounded-lg" />
|
||||
</div>
|
||||
|
||||
{/* Date header */}
|
||||
<div className="flex border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
|
||||
<div className="w-48 flex-shrink-0 px-4 py-2">
|
||||
<div className="h-3 w-20 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-3 w-20 shimmer-skeleton rounded" />
|
||||
</div>
|
||||
<div className="flex-1 flex gap-px py-2 px-2">
|
||||
{[...Array(20)].map((_, i) => (
|
||||
<div key={i} className="flex-1 h-3 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div key={i} className="flex-1 h-3 shimmer-skeleton rounded" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Resource rows */}
|
||||
{[...Array(8)].map((_, i) => (
|
||||
<div key={i} className="flex border-b border-gray-100 dark:border-gray-800 py-3">
|
||||
<div key={i} className="flex border-b border-gray-100 dark:border-gray-800 py-3 animate-row-enter" style={{ animationDelay: `${i * 50}ms` }}>
|
||||
{/* Resource name cell */}
|
||||
<div className="w-48 flex-shrink-0 px-4 flex flex-col gap-1.5">
|
||||
<div className="h-3 w-24 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-2 w-12 bg-gray-100 dark:bg-gray-800 rounded" />
|
||||
<div className="h-3 w-24 shimmer-skeleton rounded" />
|
||||
<div className="h-2 w-12 shimmer-skeleton rounded" />
|
||||
</div>
|
||||
{/* Allocation bars */}
|
||||
<div className="flex-1 relative px-2 flex items-center gap-1">
|
||||
{i % 3 === 0 && (
|
||||
<div className="h-7 rounded-lg bg-brand-100 dark:bg-brand-900/30" style={{ width: "35%", marginLeft: "10%" }} />
|
||||
<div className="h-7 rounded-lg shimmer-skeleton" style={{ width: "35%", marginLeft: "10%" }} />
|
||||
)}
|
||||
{i % 3 === 1 && (
|
||||
<>
|
||||
<div className="h-7 rounded-lg bg-purple-100 dark:bg-purple-900/30" style={{ width: "20%", marginLeft: "5%" }} />
|
||||
<div className="h-7 rounded-lg bg-blue-100 dark:bg-blue-900/30" style={{ width: "30%", marginLeft: "2%" }} />
|
||||
<div className="h-7 rounded-lg shimmer-skeleton" style={{ width: "20%", marginLeft: "5%" }} />
|
||||
<div className="h-7 rounded-lg shimmer-skeleton" style={{ width: "30%", marginLeft: "2%" }} />
|
||||
</>
|
||||
)}
|
||||
{i % 3 === 2 && (
|
||||
<div className="h-7 rounded-lg bg-green-100 dark:bg-green-900/30" style={{ width: "45%", marginLeft: "20%" }} />
|
||||
<div className="h-7 rounded-lg shimmer-skeleton" style={{ width: "45%", marginLeft: "20%" }} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,10 +4,10 @@ const TimelineView = dynamic(
|
||||
() => import("~/components/timeline/TimelineView.js").then((m) => m.TimelineView),
|
||||
{
|
||||
loading: () => (
|
||||
<div className="animate-pulse flex flex-col gap-4 h-full p-6">
|
||||
<div className="h-8 w-48 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-10 w-full bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="flex-1 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="flex flex-col gap-4 h-full p-6">
|
||||
<div className="h-8 w-48 shimmer-skeleton rounded" />
|
||||
<div className="h-10 w-full shimmer-skeleton rounded" />
|
||||
<div className="flex-1 shimmer-skeleton rounded" />
|
||||
</div>
|
||||
),
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user