Merge pull request #316 from Aesdecodes/feature/analytics-skeletons

ux: Implement high-fidelity skeleton loaders for Analytics Dashboard (#65)

Author: AlAfiz

src/components/AnalyticsSkeleton.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import SkeletonCard from "./ui/SkeletonCard";
+
+/**
+ * AnalyticsSkeleton renders a structured placeholder layout for the dashboard.
+ * Designed to be shown when 'isLoading' is true to prevent layout shifting.
+ */
+const AnalyticsSkeleton: React.FC = () => {
+  return (
+    <div className="space-y-8">
+      {/* Top Metrics Grid (matching typical 4-column stat layout) */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        {[...Array(4)].map((_, i) => (
+          <SkeletonCard key={i} height="h-32" className="p-6 flex flex-col gap-3">
+            {/* Title placeholder */}
+            <div className="h-4 w-24 bg-slate-700/50 rounded" />
+            {/* Value placeholder */}
+            <div className="h-8 w-32 bg-slate-700/50 rounded" />
+            {/* Trend placeholder */}
+            <div className="h-3 w-16 bg-slate-700/50 rounded" />
+          </SkeletonCard>
+        ))}
+      </div>
+
+      {/* Main Analytics Charts Section */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Large Primary Chart (e.g., Volume over time) */}
+        <SkeletonCard className="lg:col-span-2 p-6" height="h-[400px]">
+          <div className="flex justify-between items-center mb-8">
+            <div className="h-6 w-48 bg-slate-700/50 rounded" />
+            <div className="h-8 w-24 bg-slate-700/50 rounded-lg" />
+          </div>
+          {/* Simulated Chart Area */}
+          <div className="w-full h-64 border-l border-b border-slate-700/50 relative">
+            <div className="absolute bottom-4 left-4 right-4 h-32 bg-gradient-to-t from-blue-500/10 to-transparent rounded-t-lg" />
+          </div>
+        </SkeletonCard>
+        
+        {/* Secondary Panel (e.g., Asset distribution) */}
+        <SkeletonCard height="h-[400px]" className="p-6 flex flex-col items-center justify-center">
+          <div className="h-6 w-32 bg-slate-700/50 rounded mb-8 self-start" />
+          {/* Simulated Donut Chart */}
+          <div className="w-48 h-48 rounded-full border-[16px] border-slate-700/50" />
+          <div className="mt-8 grid grid-cols-2 gap-4 w-full">
+            <div className="h-3 bg-slate-700/50 rounded" />
+            <div className="h-3 bg-slate-700/50 rounded" />
+          </div>
+        </SkeletonCard>
+      </div>
+
+      {/* Bottom Table/Activity Section */}
+      <div className="space-y-4">
+        <div className="h-6 w-48 bg-slate-800/50 animate-pulse rounded" />
+        <SkeletonCard height="h-64" className="divide-y divide-slate-700/30">
+          {[...Array(5)].map((_, i) => (
+            <div key={i} className="h-12 w-full bg-transparent" />
+          ))}
+        </SkeletonCard>
+      </div>
+    </div>
+  );
+};
+export default AnalyticsSkeleton;

src/components/DynamicRiskAssessmentChart.tsx

@@ -2,10 +2,11 @@
 
 import dynamic from "next/dynamic";
 import { Suspense } from "react";
+import SkeletonCard from "./ui/SkeletonCard";
 
 // Loading component
 const ChartLoadingSkeleton = () => (
-  <div className="bg-slate-800/50 rounded-xl border border-slate-700/50 p-6">
+  <SkeletonCard height="h-[520px]" className="p-6">
     <div className="flex items-center justify-between mb-6">
       <div className="flex items-center gap-2">
         <div className="w-3 h-3 rounded-full bg-blue-400 animate-pulse"></div>
@@ -29,7 +30,7 @@ const ChartLoadingSkeleton = () => (
         </div>
       ))}
     </div>
-  </div>
+  </SkeletonCard>
 );
 
 // Dynamic import with SSR disabled

src/components/InvoiceTable.tsx

@@ -61,13 +61,8 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ filters }) => {
   } = useQuery<InvoicesResponse>({
     queryKey: ['invoices', currentPage, itemsPerPage, filters],
     queryFn: async () => {
-      const response = await fetch(`/api/invoices?${queryString}`);
-      if (!response.ok) {
-        throw new Error('Failed to fetch invoices');
       try {
-        const response = await fetch(
-          `/api/invoices?page=${currentPage}&limit=${itemsPerPage}`
-        );
+        const response = await fetch(`/api/invoices?${queryString}`);
         if (!response.ok) {
           throw new Error(`HTTP ${response.status}: ${response.statusText}`);
         }

src/components/PortfolioChart.tsx

@@ -11,6 +11,7 @@ import {
   ResponsiveContainer,
   TooltipProps
 } from "recharts";
+import SkeletonCard from "./ui/SkeletonCard";
 import { api } from "../lib/api";
 
 interface PnLData {
@@ -110,9 +111,7 @@ export default function PortfolioChart() {
 
   if (loading) {
     return (
-      <div className="h-64 flex items-center justify-center">
-        <div className="animate-pulse text-tradeflow-muted">Loading chart data...</div>
-      </div>
+      <SkeletonCard height="h-[320px]" className="p-6" />
     );
   }
 

src/components/ProModeSection.tsx

@@ -5,17 +5,18 @@ import dynamic from "next/dynamic";
 import Toggle from "../app/Toggle";
 import { useTokenStore } from "../stores/tokenStore";
 import PremiumUnlockModal from "./PremiumUnlockModal";
+import SkeletonCard from "./ui/SkeletonCard";
 
 // Dynamically import the heavy chart component with loading fallback
 const LivePriceChart = dynamic(() => import("../components/LivePriceChart"), {
   ssr: false,
   loading: () => (
-    <div className="w-full h-96 bg-slate-800/50 rounded-xl border border-slate-700/50 flex items-center justify-center">
+    <SkeletonCard height="h-96" className="flex items-center justify-center">
       <div className="text-center">
         <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-3"></div>
         <p className="text-slate-400 text-sm">Loading Pro Chart...</p>
       </div>
-    </div>
+    </SkeletonCard>
   ),
 });
 

src/components/ui/SkeletonCard.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+interface SkeletonCardProps {
+  className?: string;
+  children?: React.ReactNode;
+  /** 
+   * Specific height to match the final component and prevent layout shift.
+   * Use values like 'h-32' for stats or 'h-[400px]' for charts.
+   */
+  height?: string;
+}
+
+/**
+ * SkeletonCard provides a pulsing placeholder for dashboard metrics and charts.
+ * Complies with requirement #65 using animate-pulse and bg-slate-800.
+ */
+const SkeletonCard: React.FC<SkeletonCardProps> = ({ 
+  className = "", 
+  children,
+  height = "h-40" 
+}) => {
+  return (
+    <div 
+      className={`bg-slate-800 animate-pulse rounded-2xl border border-slate-700/50 w-full ${height} ${className}`}
+      aria-hidden="true"
+    >
+      {children}
+    </div>
+  );
+};
+
+export default SkeletonCard;