diff --git a/components/block.tsx b/components/block.tsx
index 066e3ae6e..c1b9c5e88 100644
--- a/components/block.tsx
+++ b/components/block.tsx
@@ -477,7 +477,7 @@ function PureBlock({
                 })}
               >
                 {isDocumentsFetching && !block.content ? (
-                  <DocumentSkeleton />
+                  <DocumentSkeleton blockKind={block.kind} />
                 ) : block.kind === 'code' ? (
                   <CodeEditor
                     content={
diff --git a/components/document-skeleton.tsx b/components/document-skeleton.tsx
index 7a457947b..ae8ace917 100644
--- a/components/document-skeleton.tsx
+++ b/components/document-skeleton.tsx
@@ -1,7 +1,13 @@
 'use client';
 
-export const DocumentSkeleton = () => {
-  return (
+import { BlockKind } from './block';
+
+export const DocumentSkeleton = ({ blockKind }: { blockKind: BlockKind }) => {
+  return blockKind === 'image' ? (
+    <div className="flex flex-col gap-4 w-full justify-center items-center h-[calc(100dvh-60px)]">
+      <div className="animate-pulse rounded-lg bg-muted-foreground/20 size-96" />
+    </div>
+  ) : (
     <div className="flex flex-col gap-4 w-full">
       <div className="animate-pulse rounded-lg h-12 bg-muted-foreground/20 w-1/2" />
       <div className="animate-pulse rounded-lg h-5 bg-muted-foreground/20 w-full" />