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>
|
||||
),
|
||||
},
|
||||
|
||||
@@ -90,7 +90,7 @@
|
||||
/* ─── Light Theme Surface Variables ─────────────────────────────────────── */
|
||||
|
||||
:root {
|
||||
--surface-page: 244 246 250;
|
||||
--surface-page: 246 247 251;
|
||||
--surface-card: 255 255 255;
|
||||
--surface-elevated: 249 250 252;
|
||||
--surface-input: 255 255 255;
|
||||
@@ -132,6 +132,8 @@
|
||||
background-color 0.15s ease,
|
||||
color 0.15s ease;
|
||||
background-image:
|
||||
radial-gradient(ellipse at 0% 0%, rgb(var(--accent-50) / 0.15), transparent 50%),
|
||||
radial-gradient(ellipse at 100% 100%, rgb(var(--accent-100) / 0.08), transparent 50%),
|
||||
radial-gradient(circle at top left, rgb(var(--accent-100) / 0.32), transparent 24rem),
|
||||
linear-gradient(180deg, rgb(255 255 255 / 0.72), transparent 24rem);
|
||||
text-rendering: optimizeLegibility;
|
||||
@@ -168,13 +170,20 @@
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
input:focus-visible,
|
||||
select:focus-visible,
|
||||
textarea:focus-visible,
|
||||
button:focus-visible,
|
||||
a:focus-visible {
|
||||
:focus-visible {
|
||||
outline: 2px solid rgb(var(--accent-500));
|
||||
outline-offset: 2px;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
button:focus-visible,
|
||||
a:focus-visible,
|
||||
input:focus-visible,
|
||||
select:focus-visible,
|
||||
textarea:focus-visible {
|
||||
outline: 2px solid rgb(var(--accent-500));
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 3px rgb(var(--accent-500) / 0.12);
|
||||
}
|
||||
|
||||
/* Scrollbar styling for dark mode */
|
||||
@@ -345,16 +354,28 @@
|
||||
|
||||
@layer components {
|
||||
.app-surface {
|
||||
@apply rounded-2xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900/90;
|
||||
@apply rounded-2xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900/90;
|
||||
--tw-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
:is(.dark) .app-surface {
|
||||
--tw-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.app-surface-strong {
|
||||
@apply rounded-3xl border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900;
|
||||
@apply rounded-3xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900;
|
||||
--tw-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
:is(.dark) .app-surface-strong {
|
||||
--tw-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.app-toolbar {
|
||||
@apply rounded-2xl border border-gray-200 bg-white/90 p-4 shadow-sm backdrop-blur;
|
||||
@apply dark:border-gray-700 dark:bg-gray-900/90 dark:shadow-black/20;
|
||||
@apply sticky top-0 z-10 rounded-2xl border border-gray-200 bg-white/80 p-4 shadow-sm backdrop-blur-sm;
|
||||
@apply dark:border-gray-700 dark:bg-gray-900/80 dark:shadow-black/20;
|
||||
}
|
||||
|
||||
.app-input {
|
||||
@@ -443,3 +464,49 @@
|
||||
.animate-overbooking-blink {
|
||||
animation: overbooking-blink 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ─── Shimmer skeleton animation ─────────────────────────────────────────── */
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -200% 0; }
|
||||
100% { background-position: 200% 0; }
|
||||
}
|
||||
|
||||
.shimmer-skeleton {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--surface-card) 25%,
|
||||
color-mix(in srgb, var(--text-very-muted) 8%, var(--surface-card)) 50%,
|
||||
var(--surface-card) 75%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ─── Table row stagger entrance ─────────────────────────────────────────── */
|
||||
@keyframes fadeSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-row-enter {
|
||||
animation: fadeSlideIn 0.25s ease-out both;
|
||||
}
|
||||
|
||||
/* ─── Subtle hover lift for cards and table rows ─────────────────────────── */
|
||||
.hover-lift {
|
||||
transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
|
||||
}
|
||||
.hover-lift:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
:is(.dark) .hover-lift:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user