fix and update

apps/frontend/components/chat/chat-media-album-grid.tsx

@@ -1,12 +1,13 @@
 'use client';
 
 import type { ChatMessage } from '@/lib/api';
+import { MediaImageSkeleton } from '@/components/ui/media-image-skeleton';
 import { parseChatMediaMetadata } from '@/lib/chat-media-album';
 import { cn } from '@/lib/utils';
 
 interface ChatMediaAlbumGridProps {
   messages: ChatMessage[];
-  mediaUrls: Record<string, { blobUrl?: string } | undefined>;
+  mediaUrls: Record<string, { blobUrl?: string; status?: string } | undefined>;
   className?: string;
   onImageClick?: (message: ChatMessage, index: number) => void;
 }
@@ -58,6 +59,7 @@ export function ChatMediaAlbumGrid({ messages, mediaUrls, className, onImageClic
       {imageMessages.map((message, index) => {
         const media = message.storageKey ? mediaUrls[message.storageKey] : undefined;
         const hiddenCount = count > 6 && index === 5 ? count - 6 : 0;
+        const isLoading = !media?.blobUrl || media.status === 'loading';
         return (
           <button
             key={message.id}
@@ -65,11 +67,11 @@ export function ChatMediaAlbumGrid({ messages, mediaUrls, className, onImageClic
             className={cn('relative overflow-hidden bg-[#dfe4ea]', tileClass(Math.min(count, 6), index))}
             onClick={() => onImageClick?.(message, index)}
           >
-            {media?.blobUrl ? (
+            {isLoading ? (
+              <MediaImageSkeleton className="h-full min-h-[96px] w-full rounded-none" rounded="none" />
+            ) : (
               // eslint-disable-next-line @next/next/no-img-element
               <img src={media.blobUrl} alt="" className="h-full w-full object-cover" />
-            ) : (
-              <div className="flex h-full min-h-[96px] items-center justify-center text-xs text-[#667085]">…</div>
             )}
             {hiddenCount > 0 ? (
               <div className="absolute inset-0 flex items-center justify-center bg-black/45 text-2xl font-semibold text-white">