From faad41039aa297464f16fc176e619548ba1133a6 Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Mon, 3 Mar 2025 13:56:25 +0800
Subject: [PATCH] feat(problem): add tabs state management with zustand and
 loading skeleton

---
 src/app/(app)/playground/@problem/layout.tsx | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/app/(app)/playground/@problem/layout.tsx b/src/app/(app)/playground/@problem/layout.tsx
index 23a2af6..2d93f1e 100644
--- a/src/app/(app)/playground/@problem/layout.tsx
+++ b/src/app/(app)/playground/@problem/layout.tsx
@@ -1,3 +1,7 @@
+"use client";
+
+import { Skeleton } from "@/components/ui/skeleton";
+import { useTabsStore } from "@/store/useTabsStore";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { CircleCheckBigIcon, FileTextIcon, FlaskConicalIcon } from "lucide-react";
@@ -13,8 +17,22 @@ export default function ProblemLayout({
   solution,
   submission,
 }: ProblemLayoutProps) {
+  const { hydrated, problemTab, setProblemTab } = useTabsStore();
+
+  if (!hydrated) return (
+    <div className="h-9 w-full flex items-center px-2 py-1 bg-muted gap-1">
+      <Skeleton className="h-full w-[136px] rounded-3xl" />
+      <Skeleton className="h-full w-[111px] rounded-3xl" />
+      <Skeleton className="h-full w-32 rounded-3xl" />
+    </div>
+  )
+
+  const handleTabChange = (value: string) => {
+    setProblemTab(value);
+  };
+
   return (
-    <Tabs defaultValue="description" className="h-full flex flex-col">
+    <Tabs value={problemTab} onValueChange={handleTabChange} className="h-full flex flex-col">
       <ScrollArea className="h-9 flex-none bg-muted px-1">
         <TabsList className="gap-1 bg-transparent">
           <TabsTrigger