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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user