Fix Hydraation Error

app/(browse)/_components/sidebar/toggle.tsx

@@ -2,6 +2,7 @@
 
 import { Hint } from "@/components/hint";
 import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import { useSidebar } from "@/store/use-sidebar";
 import { ArrowLeftFromLine, ArrowRightFromLine } from "lucide-react";
 
@@ -38,3 +39,12 @@ export const Toggle = () => {
     </>
   );
 };
+
+export const ToggleSkeleton = () => {
+  return (
+    <div className="p-3 pl-6 mb-2 hidden lg:flex items-center justify-between w-full">
+      <Skeleton className="h-6 w-[100px]" />
+      <Skeleton className="h-6 w-6" />
+    </div>
+  );
+};

app/(browse)/_components/sidebar/wrapper.tsx

@@ -3,14 +3,27 @@
 import { cn } from "@/lib/utils";
 import { useSidebar } from "@/store/use-sidebar";
 import React from "react";
+import { useIsClient } from "usehooks-ts";
+import { RecommendedSkeleton } from "./recommended";
+import { ToggleSkeleton } from "./toggle";
 
 interface WrapperProps {
   children: React.ReactNode;
 }
 
 export const Wrapper = ({ children }: WrapperProps) => {
+  const isClient = useIsClient();
   const { collapsed } = useSidebar((state) => state);
 
+  if (!isClient) {
+    return (
+      <aside className="fixed left-0 flex flex-col w-[70px] lg:w-60 h-full bg-background border-r border-[#2D2E35] z-50">
+        <ToggleSkeleton />
+        <RecommendedSkeleton />
+      </aside>
+    );
+  }
+
   return (
     <aside
       className={cn(