diff --git a/app/(editor)/editor/[postId]/loading.tsx b/app/(editor)/editor/[postId]/loading.tsx
new file mode 100644
index 0000000..901e37d
--- /dev/null
+++ b/app/(editor)/editor/[postId]/loading.tsx
@@ -0,0 +1,18 @@
+import { Skeleton } from "@/components/ui/skeleton"
+
+export default function Loading() {
+  return (
+    <div className="grid w-full gap-10">
+      <div className="flex w-full items-center justify-between">
+        <Skeleton className="h-[38px] w-[90px]" />
+        <Skeleton className="h-[38px] w-[80px]" />
+      </div>
+      <div className="prose prose-stone mx-auto w-[800px] space-y-6">
+        <Skeleton className="h-[50px] w-full" />
+        <Skeleton className="h-[20px] w-2/3" />
+        <Skeleton className="h-[20px] w-full" />
+        <Skeleton className="h-[20px] w-full" />
+      </div>
+    </div>
+  )
+}
diff --git a/components/post-item.tsx b/components/post-item.tsx
index 6c3da62..3ce8d84 100644
--- a/components/post-item.tsx
+++ b/components/post-item.tsx
@@ -1,8 +1,9 @@
-import { formatDate } from "@/lib/utils"
 import { Post } from "@prisma/client"
 import Link from "next/link"
 
+import { formatDate } from "@/lib/utils"
 import { PostOperations } from "@/components/post-operations"
+import { Skeleton } from "@/components/ui/skeleton"
 
 interface PostItemProps {
   post: Pick<Post, "id" | "title" | "published" | "createdAt">
@@ -34,8 +35,8 @@ PostItem.Skeleton = function PostItemSkeleton() {
   return (
     <div className="p-4">
       <div className="space-y-3">
-        <div className="h-5 w-2/5 animate-pulse rounded-lg bg-slate-100"></div>
-        <div className="h-4 w-4/5 animate-pulse rounded-lg bg-slate-100"></div>
+        <Skeleton className="h-5 w-2/5" />
+        <Skeleton className="h-4 w-4/5" />
       </div>
     </div>
   )
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
index f543591..43164c7 100644
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@@ -1,4 +1,5 @@
 import { cn } from "@/lib/utils"
+import { Skeleton } from "@/components/ui/skeleton"
 
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {}
 
@@ -54,12 +55,12 @@ Card.Skeleton = function CardSeleton() {
   return (
     <Card>
       <Card.Header className="gap-2">
-        <div className="h-5 w-1/5 animate-pulse rounded-lg bg-slate-100"></div>
-        <div className="h-4 w-4/5 animate-pulse rounded-lg bg-slate-100"></div>
+        <Skeleton className="h-5 w-1/5" />
+        <Skeleton className="h-4 w-4/5" />
       </Card.Header>
       <Card.Content className="h-10" />
       <Card.Footer>
-        <div className="h-8 w-[120px] animate-pulse rounded-lg bg-slate-200"></div>
+        <Skeleton className="h-8 w-[120px] bg-slate-200" />
       </Card.Footer>
     </Card>
   )
diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx
new file mode 100644
index 0000000..e70f102
--- /dev/null
+++ b/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function Skeleton({ className, ...props }: SkeletonProps) {
+  return (
+    <div
+      className={cn(
+        "h-5 w-2/5 animate-pulse rounded-lg bg-slate-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}