From e9016f5495f6994852374d1df963a8c7fdbcf870 Mon Sep 17 00:00:00 2001
From: DevMirza <pzhafeez@gmail.com>
Date: Sun, 17 Dec 2023 14:27:11 +0000
Subject: [PATCH] check if the component is client or not

---
 app/(browse)/_components/sidebar/wrapper.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/app/(browse)/_components/sidebar/wrapper.tsx b/app/(browse)/_components/sidebar/wrapper.tsx
index f383ef0..0b202eb 100644
--- a/app/(browse)/_components/sidebar/wrapper.tsx
+++ b/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(