Merge pull request #153 from keploy/fix-hydration-issue

fix: hydration issues

Author: Hermione2408

app/(default)/case-studies/page.tsx

@@ -108,9 +108,9 @@ export default function Home() {
                   viewBox="0 0 24 24"
                   fill="none"
                   stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
                 >
                   <path d="m9 18 6-6-6-6" />
                 </svg>

app/(default)/webstories/css/CircularLoader.module.css

@@ -15,13 +15,13 @@
   .backgroundCircle {
     fill: none;
     stroke: #e2a26d;
-    stroke-width: 10;
+    strokeWidth: 10;
   }
 
   .progressCircle {
     fill: none;
     stroke: #d84f06;
-    stroke-width: 10;
+    strokeWidth: 10;
     stroke-dasharray: 283; /* 2 * Math.PI * 45 (radius) */
     stroke-dashoffset: 283; /* Initially hidden */
     transition: stroke-dashoffset 0.3s linear;

app/layout.tsx

@@ -7,11 +7,8 @@ interface MousePosition {
   y: number;
 }
 
-function MousePosition(): MousePosition {
-  const [mousePosition, setMousePosition] = useState<MousePosition>({
-    x: 0,
-    y: 0,
-  });
+function useMousePosition(): MousePosition {
+  const [mousePosition, setMousePosition] = useState<MousePosition>({ x: 0, y: 0 });
 
   useEffect(() => {
     const handleMouseMove = (event: MouseEvent) => {
@@ -71,10 +68,15 @@ const Particles: React.FC<ParticlesProps> = ({
   const canvasContainerRef = useRef<HTMLDivElement>(null);
   const context = useRef<CanvasRenderingContext2D | null>(null);
   const circles = useRef<any[]>([]);
-  const mousePosition = MousePosition();
+  const mousePosition = useMousePosition();
   const mouse = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
   const canvasSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 });
-  const dpr = typeof window !== "undefined" ? window.devicePixelRatio : 1;
+
+  // Defer devicePixelRatio calculation to client
+  const [dpr, setDpr] = useState(1);
+  useEffect(() => {
+    setDpr(window.devicePixelRatio);
+  }, []);
 
   useEffect(() => {
     if (canvasRef.current) {
@@ -87,7 +89,7 @@ const Particles: React.FC<ParticlesProps> = ({
     return () => {
       window.removeEventListener("resize", initCanvas);
     };
-  }, [color]);
+  }, [color, dpr]);
 
   useEffect(() => {
     onMouseMove();
@@ -116,7 +118,7 @@ const Particles: React.FC<ParticlesProps> = ({
     }
   };
 
-  interface Circle  {
+  interface Circle {
     x: number;
     y: number;
     translateX: number;
@@ -127,7 +129,7 @@ const Particles: React.FC<ParticlesProps> = ({
     dx: number;
     dy: number;
     magnetism: number;
-  };
+  }
 
   const resizeCanvas = () => {
     if (canvasContainerRef.current && canvasRef.current && context.current) {

components/FeatureMoblieView.tsx

@@ -463,7 +463,7 @@ function CombinedTerminalPage({
         promptLabel={
           <p className="font-bold flex">
             {Emoji}
-            <p className="text-accent-100">~/$</p>
+            <span className="text-accent-100">~/$</span>
           </p>
         }
         commands={commands}

components/Particles.tsx

@@ -49,9 +49,9 @@ export default function CaseStudyCard({
               viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
             >
               <path d="m9 18 6-6-6-6" />
             </svg>

components/atg/terminal.tsx

@@ -35,9 +35,9 @@ export default function CaseStudySearch({setSearch}: caseStudySearchProps) {
                   viewBox="0 0 24 24"
                   fill="none"
                   stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
                 >
                   <circle cx="11" cy="11" r="8" />
                   <path d="m21 21-4.3-4.3" />

components/caseStudyCard.tsx

@@ -1,5 +1,5 @@
 export const UpIcon = ({ className }) => (
-    <svg className={className} height="12px" width="12px" viewBox="0 0 407.436 407.436" xmlns="http://www.w3.org/2000/svg">
-      <polygon fill="currentColor" points="203.718,91.567 0,294.621 21.179,315.869 203.718,133.924 386.258,315.869 407.436,294.621" />
-    </svg>
-  );
+  <svg className={className} height="12px" width="12px" viewBox="0 0 407.436 407.436" xmlns="http://www.w3.org/2000/svg">
+    <polygon fill="currentColor" points="203.718,91.567 0,294.621 21.179,315.869 203.718,133.924 386.258,315.869 407.436,294.621" />
+  </svg>
+);

components/caseStudySearch.tsx

@@ -135,7 +135,9 @@ export default function Solutions() {
                         href={item.url}
                         className="flex items-center gap-3 font-semibold hover:text-primary-500 transition-colors duration-200 h-[24px]"
                       >
-                        <div className="h-6 w-6 flex-shrink-0 flex items-center justify-center">{item.icon}</div>
+                        <div className="h-6 w-6 flex-shrink-0 flex items-center justify-center">
+                          {item.icon}
+                        </div>
                         <span>{item.name}</span>
                       </a>
                     </li>

components/nav/UpIcon.js

@@ -74,7 +74,7 @@ const Stories = ({
   };
 
   const handleSwipeUp = () => {
-    window.location.href = "/webstories";
+    router.push("/webstories");
   };
 
   const handleLongPress = () => {