Hartmut
ae92923c28
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>
23 lines
710 B
TypeScript
23 lines
710 B
TypeScript
import dynamic from "next/dynamic";
|
|
|
|
const AllocationsClient = dynamic(
|
|
() => import("~/components/allocations/AllocationsClient.js").then((m) => m.AllocationsClient),
|
|
{
|
|
loading: () => (
|
|
<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 shimmer-skeleton rounded animate-row-enter" style={{ animationDelay: `${i * 50}ms` }} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
),
|
|
},
|
|
);
|
|
|
|
export default function AllocationsPage() {
|
|
return <AllocationsClient />;
|
|
}
|