add image block skeleton

Author: jeremyphilemon

components/block.tsx

@@ -477,7 +477,7 @@ function PureBlock({
                 })}
               >
                 {isDocumentsFetching && !block.content ? (
-                  <DocumentSkeleton />
+                  <DocumentSkeleton blockKind={block.kind} />
                 ) : block.kind === 'code' ? (
                   <CodeEditor
                     content={

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" />