From f58b7a5eb4d9321d88e293713bc6c69cff1ff725 Mon Sep 17 00:00:00 2001
From: ngc2207 <cfngc3109@gmail.com>
Date: Sat, 11 Jan 2025 08:29:25 +0800
Subject: [PATCH] feat(playground): add loading skeleton to editor panel for
 improved user experience

---
 src/app/playground/layout/editor-panel.tsx | 35 ++++++++++++++++++++--
 src/components/ui/skeleton.tsx             | 15 ++++++++++
 2 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ui/skeleton.tsx

diff --git a/src/app/playground/layout/editor-panel.tsx b/src/app/playground/layout/editor-panel.tsx
index 17fccfd..e261644 100644
--- a/src/app/playground/layout/editor-panel.tsx
+++ b/src/app/playground/layout/editor-panel.tsx
@@ -1,10 +1,12 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useEditorStore } from "@/store/useEditorStore";
+import { Skeleton } from "@/components/ui/skeleton";
 
 export default function EditorPanel() {
   const { setLanguage, setCode } = useEditorStore();
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     const handleMessage = (event: MessageEvent) => {
@@ -23,5 +25,34 @@ export default function EditorPanel() {
     };
   }, [setLanguage, setCode]);
 
-  return <iframe src="https://editor.litchi.icu" className="w-full h-full" />;
+  const handleLoad = () => {
+    setLoading(false);
+  };
+
+  return (
+    <div className="relative w-full h-full">
+      {loading && (
+        <div className="absolute inset-0 flex flex-col bg-[#282c34]">
+          <div className="flex-initial p-4 border-b border-[#3e4452] flex justify-between items-center">
+            <div className="space-x-2 flex items-center">
+              <Skeleton className="h-8 w-24 rounded-md" />
+              <Skeleton className="h-8 w-24 rounded-md" />
+            </div>
+            <div className="space-x-2 flex items-center">
+              <Skeleton className="h-8 w-24 rounded-md" />
+              <Skeleton className="h-8 w-24 rounded-md" />
+            </div>
+          </div>
+          <div className="flex-grow p-4">
+            <Skeleton className="w-full h-full rounded-md" />
+          </div>
+        </div>
+      )}
+      <iframe
+        src="https://editor.litchi.icu"
+        className="w-full h-full"
+        onLoad={handleLoad}
+      />
+    </div>
+  );
 }
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..d7e45f7
--- /dev/null
+++ b/src/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }