From 800c35cb01ca090e340ed500e5b9f35664d105ac Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Wed, 26 Feb 2025 15:58:40 +0800
Subject: [PATCH] feat(code-editor, mdx-preview): update loading state padding
 for improved aesthetics

---
 src/components/code-editor.tsx | 8 ++++++--
 src/components/mdx-preview.tsx | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/code-editor.tsx b/src/components/code-editor.tsx
index 884e2ff..a2eb3a2 100644
--- a/src/components/code-editor.tsx
+++ b/src/components/code-editor.tsx
@@ -28,7 +28,7 @@ const Editor = dynamic(
   {
     ssr: false,
     loading: () => (
-      <div className="h-full w-full p-10 pt-2">
+      <div className="h-full w-full p-4">
         <Skeleton className="h-full w-full rounded-3xl" />
       </div>
     ),
@@ -210,7 +210,11 @@ export default function CodeEditor() {
       //     console.log(marker.message);
       //   });
       // }}
-      loading={<Skeleton className="h-full w-full" />}
+      loading={
+        <div className="h-full w-full p-4">
+          <Skeleton className="h-full w-full rounded-3xl" />
+        </div>
+      }
     />
   );
 }
diff --git a/src/components/mdx-preview.tsx b/src/components/mdx-preview.tsx
index a5e62cb..45f7381 100644
--- a/src/components/mdx-preview.tsx
+++ b/src/components/mdx-preview.tsx
@@ -86,7 +86,7 @@ export default function MdxPreview({ source }: MdxPreviewProps) {
 
   if (isLoading) {
     return (
-      <div className="h-full w-full p-10">
+      <div className="h-full w-full p-4">
         <Skeleton className="h-full w-full rounded-3xl" />
       </div>
     );