From 5db172fce3e5f77cbf70bfdffc8e78de4b6e6b10 Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Thu, 20 Mar 2025 15:41:00 +0800
Subject: [PATCH] feat(LanguageSelector): add loading state for hydration

---
 .../workspace/editor/components/language-selector.tsx    | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/features/playground/workspace/editor/components/language-selector.tsx b/src/components/features/playground/workspace/editor/components/language-selector.tsx
index 5b37525..fae25e4 100644
--- a/src/components/features/playground/workspace/editor/components/language-selector.tsx
+++ b/src/components/features/playground/workspace/editor/components/language-selector.tsx
@@ -7,11 +7,16 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Loading } from "@/components/loading";
 import { useProblemEditor } from "@/hooks/use-problem-editor";
 import { EditorLanguageIcons } from "@/config/editor-language-icons";
 
-export default function LanguageSelector() {
-  const { currentLang, changeLang, editorLanguageConfigs } = useProblemEditor();
+export function LanguageSelector() {
+  const { hydrated, currentLang, changeLang, editorLanguageConfigs } = useProblemEditor();
+
+  if (!hydrated) {
+    return <Loading className="h-6 w-16 p-0" skeletonClassName="rounded-2xl" />
+  }
 
   return (
     <Select value={currentLang} onValueChange={changeLang}>