From 3111d58b3c6c79d9bffde8e698f3561c8066e9eb Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Wed, 26 Feb 2025 15:58:32 +0800
Subject: [PATCH] feat(language-selector): add loading state with skeleton
 component for improved user experience

---
 .../@workspace/@editor/components/language-selector.tsx    | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/app/(app)/playground/@workspace/@editor/components/language-selector.tsx b/src/app/(app)/playground/@workspace/@editor/components/language-selector.tsx
index 3e81de2..8a638eb 100644
--- a/src/app/(app)/playground/@workspace/@editor/components/language-selector.tsx
+++ b/src/app/(app)/playground/@workspace/@editor/components/language-selector.tsx
@@ -7,11 +7,16 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
 import { useCodeEditorState } from "@/store/useCodeEditor";
 import { SUPPORTED_LANGUAGES } from "@/constants/language";
 
 export default function LanguageSelector() {
-  const { language, setLanguage } = useCodeEditorState();
+  const { loading, language, setLanguage } = useCodeEditorState();
+
+  if (loading) {
+    return <Skeleton className="h-6 w-16 rounded-2xl" />;
+  }
 
   return (
     <Select value={language} onValueChange={setLanguage}>