From e86fa441e1436c247932743fa3b2f933d4efc025 Mon Sep 17 00:00:00 2001
From: AlexTraveylan <monsieurdemares@gmail.com>
Date: Thu, 16 Jan 2025 22:11:51 +0100
Subject: [PATCH] feat: implement dynamic imports for performance components
 with loading skeletons

---
 app/scan/[url]/page.tsx                       | 32 +++++++++++++-----
 .../[pageName]/[reportNumber]/page.tsx        | 33 ++++++++++++++-----
 components/ui/skeleton.tsx                    | 15 +++++++++
 3 files changed, 62 insertions(+), 18 deletions(-)
 create mode 100644 components/ui/skeleton.tsx

diff --git a/app/scan/[url]/page.tsx b/app/scan/[url]/page.tsx
index 4686cbc..2061e99 100644
--- a/app/scan/[url]/page.tsx
+++ b/app/scan/[url]/page.tsx
@@ -1,14 +1,28 @@
-import BestPracticeCard from "@/components/best-practice-card"
-import ChartRequests from "@/components/chart-requests"
-import EcoMetricCard from "@/components/eco-metric-card"
-import EcoIndexDisplay from "@/components/ecoindex-card"
 import Header from "@/components/header"
 import ReportInfos from "@/components/report-infos"
+import { Skeleton } from "@/components/ui/skeleton"
 import { AnalysisService } from "@/lib/analysis.service"
 import { bestPracticesFactory } from "@/lib/best-practice.service"
 import { EcoIndexCalculator } from "@/lib/eco-index"
 import { requestLighthouse } from "@/lib/lighthouse"
 import { NavItemsBuilder } from "@/lib/routing-links"
+import dynamic from "next/dynamic"
+
+const DynamicEcoIndexDisplay = dynamic(() => import("@/components/ecoindex-card"), {
+  loading: () => <Skeleton className="w-full max-w-4xl mx-auto h-[200px]" />,
+})
+
+const DynamicEcoMetricCard = dynamic(() => import("@/components/eco-metric-card"), {
+  loading: () => <Skeleton className="w-full max-w-4xl mx-auto h-[200px]" />,
+})
+
+const DynamicChartRequests = dynamic(() => import("@/components/chart-requests"), {
+  loading: () => <Skeleton className="w-full max-w-4xl mx-auto h-[200px]" />,
+})
+
+const DynamicBestPracticeCard = dynamic(() => import("@/components/best-practice-card"), {
+  loading: () => <Skeleton className="w-full max-w-4xl mx-auto h-[200px]" />,
+})
 
 export default async function Page({
   params,
@@ -38,21 +52,21 @@ export default async function Page({
       <main className="py-4">
         <div className="flex flex-col gap-4">
           <ReportInfos metrics={metrics} />
-          <EcoIndexDisplay ecoIndex={ecoIndex} />
-          <EcoMetricCard metrics={metrics} />
+          <DynamicEcoIndexDisplay ecoIndex={ecoIndex} />
+          <DynamicEcoMetricCard metrics={metrics} />
           <div className="flex gap-4 w-full max-w-4xl mx-auto">
-            <ChartRequests
+            <DynamicChartRequests
               reqDetails={metrics.requests}
               title="Nombre de requêtes - Répartition"
             />
-            <ChartRequests
+            <DynamicChartRequests
               reqDetails={metrics.byteWeight}
               title="Taille des requêtes - Répartition"
             />
           </div>
           <div className="flex flex-col gap-4 w-full max-w-4xl mx-auto">
             {bestPractices.map((practice, index) => {
-              return <BestPracticeCard key={`Bp-n°${index}`} practice={practice} />
+              return <DynamicBestPracticeCard key={`Bp-n°${index}`} practice={practice} />
             })}
           </div>
         </div>
diff --git a/app/suivi/[projectName]/[pageName]/[reportNumber]/page.tsx b/app/suivi/[projectName]/[pageName]/[reportNumber]/page.tsx
index 14af69e..389fd65 100644
--- a/app/suivi/[projectName]/[pageName]/[reportNumber]/page.tsx
+++ b/app/suivi/[projectName]/[pageName]/[reportNumber]/page.tsx
@@ -1,15 +1,30 @@
-import BestPracticeCard from "@/components/best-practice-card"
-import ChartRequests from "@/components/chart-requests"
-import EcoMetricCard from "@/components/eco-metric-card"
-import EcoIndexDisplay from "@/components/ecoindex-card"
 import Header from "@/components/header"
 import ReportInfos from "@/components/report-infos"
+import { Skeleton } from "@/components/ui/skeleton"
 import { AnalysisService } from "@/lib/analysis.service"
 import { bestPracticesFactory } from "@/lib/best-practice.service"
 import { EcoIndexCalculator } from "@/lib/eco-index"
 import { JsonLhExtractorFactory } from "@/lib/folder-services/factories"
 import { NavItemsBuilder } from "@/lib/routing-links"
 
+import dynamic from "next/dynamic"
+
+const DynamicEcoIndexDisplay = dynamic(() => import("@/components/ecoindex-card"), {
+  loading: () => <Skeleton className="w-full max-w-4xl mx-auto h-[200px]" />,
+})
+
+const DynamicEcoMetricCard = dynamic(() => import("@/components/eco-metric-card"), {
+  loading: () => <Skeleton className="w-full max-w-4xl mx-auto h-[200px]" />,
+})
+
+const DynamicChartRequests = dynamic(() => import("@/components/chart-requests"), {
+  loading: () => <Skeleton className="w-full max-w-4xl mx-auto h-[200px]" />,
+})
+
+const DynamicBestPracticeCard = dynamic(() => import("@/components/best-practice-card"), {
+  loading: () => <Skeleton className="w-full max-w-4xl mx-auto h-[200px]" />,
+})
+
 export default async function Page({
   params,
 }: {
@@ -44,21 +59,21 @@ export default async function Page({
       <main className="py-4">
         <div className="flex flex-col gap-4">
           <ReportInfos metrics={metrics} />
-          <EcoIndexDisplay ecoIndex={ecoIndex} />
-          <EcoMetricCard metrics={metrics} />
+          <DynamicEcoIndexDisplay ecoIndex={ecoIndex} />
+          <DynamicEcoMetricCard metrics={metrics} />
           <div className="flex gap-4 w-full max-w-4xl mx-auto">
-            <ChartRequests
+            <DynamicChartRequests
               reqDetails={metrics.requests}
               title="Nombre de requêtes - Répartition"
             />
-            <ChartRequests
+            <DynamicChartRequests
               reqDetails={metrics.byteWeight}
               title="Taille des requêtes - Répartition"
             />
           </div>
           <div className="flex flex-col gap-4 w-full max-w-4xl mx-auto">
             {bestPractices.map((practice, index) => {
-              return <BestPracticeCard key={`Bp-n°${index}`} practice={practice} />
+              return <DynamicBestPracticeCard key={`Bp-n°${index}`} practice={practice} />
             })}
           </div>
         </div>
diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx
new file mode 100644
index 0000000..d7e45f7
--- /dev/null
+++ b/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }