fix and update

apps/frontend/components/chat/chat-image-lightbox.tsx

@@ -3,6 +3,7 @@
 import { useEffect } from 'react';
 import { ChevronLeft, ChevronRight, Download, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { MediaImageSkeleton } from '@/components/ui/media-image-skeleton';
 import type { ChatMessage } from '@/lib/api';
 import { cn } from '@/lib/utils';
 
@@ -97,7 +98,7 @@ export function ChatImageLightbox({
             // eslint-disable-next-line @next/next/no-img-element
             <img src={media.blobUrl} alt="" className="max-h-[calc(100vh-140px)] max-w-full object-contain" />
           ) : (
-            <div className="text-sm text-white/70">Загрузка изображения...</div>
+            <MediaImageSkeleton className="h-[min(70vh,520px)] w-[min(92vw,720px)]" rounded="2xl" />
           )}
         </div>
 
@@ -137,7 +138,9 @@ export function ChatImageLightbox({
                 {thumb?.blobUrl ? (
                   // eslint-disable-next-line @next/next/no-img-element
                   <img src={thumb.blobUrl} alt="" className="h-full w-full object-cover" />
-                ) : null}
+                ) : (
+                  <MediaImageSkeleton className="h-full w-full min-h-0" rounded="none" />
+                )}
               </button>
             );
           })}

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