check if the component is client or not

Zaid-maker · Dec 17, 2023 · e9016f5 · e9016f5
1 parent cc69028
commit e9016f5
Showing 1 changed file with 13 additions and 0 deletions.
diff --git 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(