Fix Hydraation Error (#10)

---

<details open="true"><summary>Generated summary (powered by <a href="https://app.graphite.dev">Graphite</a>)</summary>

> ## TL;DR
> This pull request introduces a skeleton loading state for the sidebar toggle and recommended sections. This provides a better user experience by indicating that content is loading.
> 
> ## What changed
> Two new components, `ToggleSkeleton` and `RecommendedSkeleton`, were added to the sidebar. These components display a skeleton loading state when the client is not yet ready. The `Wrapper` component was also updated to include these new skeleton components.
> 
> ## How to test
> To test these changes, you can simulate a slow network connection or delay the server response. You should see the skeleton loading state in the sidebar before the actual content is loaded.
> 
> ## Why make this change
> This change improves the user experience by providing visual feedback when content is loading. This is particularly useful in situations where network latency is high or the server response is slow.
</details>

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(