From 88da5742ec1ba17b8fb66cc2f41a51394255baa4 Mon Sep 17 00:00:00 2001
From: Froidefond Julien <julienfroidefond@gmail.com>
Date: Wed, 25 Feb 2026 14:24:16 +0100
Subject: [PATCH] feat: improve RadarChart responsiveness with client-side
 rendering

- Introduced useEffect and useState to manage component mounting, ensuring the chart renders correctly on the client side.
- Updated the rendering logic to prevent SSR issues with ResponsiveContainer dimensions, enhancing layout stability.
---
 src/components/RadarChart.tsx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/RadarChart.tsx b/src/components/RadarChart.tsx
index 215e707..e612084 100644
--- a/src/components/RadarChart.tsx
+++ b/src/components/RadarChart.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import {
   Radar,
   RadarChart as RechartsRadar,
@@ -43,19 +44,24 @@ const DARK = {
 
 export function RadarChart({ data, compact }: RadarChartProps) {
   const { theme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    // Defer chart until client so ResponsiveContainer can measure parent (avoids width/height -1 on SSR)
+    const raf = requestAnimationFrame(() => setMounted(true));
+    return () => cancelAnimationFrame(raf);
+  }, []);
   const c = theme === "dark" ? DARK : LIGHT;
 
   if (data.length === 0) return null;
 
-  const initialH = compact ? 112 : 288;
-  const initialW = 300;
+  // ResponsiveContainer needs real DOM dimensions; avoid -1 on SSR
+  if (!mounted) {
+    return <div className={compact ? "h-28 w-full" : "h-72 w-full"} aria-hidden />;
+  }
+
   return (
     <div className={compact ? "h-28 w-full" : "h-72 w-full"}>
-      <ResponsiveContainer
-        width="100%"
-        height="100%"
-        initialDimension={{ width: initialW, height: initialH }}
-      >
+      <ResponsiveContainer width="100%" height="100%">
         <RechartsRadar data={data}>
           <PolarGrid stroke={c.grid} />
           <PolarAngleAxis dataKey="dimension" tick={{ fontSize: compact ? 7 : 9, fill: c.axis }} />