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>
29 lines
832 B
TypeScript
29 lines
832 B
TypeScript
import dynamic from "next/dynamic";
|
|
|
|
const TimelineView = dynamic(
|
|
() => import("~/components/timeline/TimelineView.js").then((m) => m.TimelineView),
|
|
{
|
|
loading: () => (
|
|
<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>
|
|
),
|
|
},
|
|
);
|
|
|
|
export default function TimelinePage() {
|
|
return (
|
|
<div className="app-page flex h-full flex-col gap-5 pb-6">
|
|
<div className="app-page-header">
|
|
<div>
|
|
<h1 className="app-page-title">Timeline</h1>
|
|
<p className="app-page-subtitle mt-1">Interactive resource planning timeline</p>
|
|
</div>
|
|
</div>
|
|
<TimelineView />
|
|
</div>
|
|
);
|
|
}
|