add image block skeleton

vercel · Jan 15, 2025 · f240f64 · f240f64
1 parent 007a427
commit f240f64
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git 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
@@ -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" />