From 2692c941e1cf775ba4fc6d6093861ab14946333d Mon Sep 17 00:00:00 2001
From: RoyceDa <admin@rosetta-im.com>
Date: Wed, 18 Feb 2026 20:30:07 +0200
Subject: [PATCH] =?UTF-8?q?=D0=A3=D0=B1=D1=80=D0=B0=D0=BD=D0=B0=20=D1=82?=
 =?UTF-8?q?=D0=B5=D0=BC=D0=BD=D0=B0=D1=8F=20=D0=BF=D0=BE=D0=B4=D0=BE=D0=BB?=
 =?UTF-8?q?=D0=B6=D0=BA=D0=B0=20=D1=83=20=D1=84=D0=BE=D1=82=D0=BE=D0=B3?=
 =?UTF-8?q?=D1=80=D0=B0=D1=84=D0=B8=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MessageAttachments/MessageImage.tsx       | 84 +++++++++----------
 1 file changed, 41 insertions(+), 43 deletions(-)

diff --git a/app/components/MessageAttachments/MessageImage.tsx b/app/components/MessageAttachments/MessageImage.tsx
index d9247d3..5e22afe 100644
--- a/app/components/MessageAttachments/MessageImage.tsx
+++ b/app/components/MessageAttachments/MessageImage.tsx
@@ -13,12 +13,12 @@ import { DownloadStatus, useAttachment } from "@/app/providers/AttachmentProvide
 export function MessageImage(props: AttachmentProps) {
     const colors = useRosettaColors();
     const {
-        downloadPercentage, 
-        uploadedPercentage, 
-        download, 
+        downloadPercentage,
+        uploadedPercentage,
+        download,
         downloadStatus,
         getBlob,
-        getPreview} = useAttachment(props.attachment, props.chacha_key_plain);
+        getPreview } = useAttachment(props.attachment, props.chacha_key_plain);
     const mainRef = useRef<HTMLDivElement>(null);
     const error = downloadStatus == DownloadStatus.ERROR;
     const { open } = useImageViewer();
@@ -55,7 +55,6 @@ export function MessageImage(props: AttachmentProps) {
             return;
         }
     }
-    console.info(downloadStatus);
     return (
         <AspectRatio onClick={onClick} ref={mainRef} style={{
             minWidth: 200,
@@ -85,44 +84,6 @@ export function MessageImage(props: AttachmentProps) {
                         objectFit: 'cover',
                         border: '1px solid ' + colors.borderColor
                     }} src={/*block render???*/blurhashToBase64Image(preview, 200, 220)}></img>
-                    <Overlay center h={'100%'} radius={8} opacity={1} color="transparent">
-                        <Flex direction={'column'} pos={'absolute'} top={0} justify={'center'} h={'100%'} align={'center'} gap={'xs'}>
-                            {!error && (
-                                <Box style={{
-                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                    borderRadius: 50,
-                                    height: 40,
-                                    width: 40,
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    alignItems: 'center',
-                                }}>
-                                    {downloadPercentage > 0 ? (
-                                        <AnimatedRoundedProgress size={40} value={downloadPercentage} color="white"></AnimatedRoundedProgress>
-                                    ) : (
-                                        <IconArrowDown size={25} color={'white'} />
-                                    )}
-                                </Box>
-                            )}
-                            {error && (
-                                <Box p={'xs'} style={{
-                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                    borderRadius: 8,
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    alignItems: 'center',
-                                    gap: 4
-                                }}>
-                                    <Text size={'xs'} c={'white'}>
-                                        Image expired
-                                    </Text>
-                                    <IconFlameFilled size={15} style={{
-                                        fontSmooth: 'always'
-                                    }} color={'white'} />
-                                </Box>
-                            )}
-                        </Flex>
-                    </Overlay>
                 </>
             )}
 
@@ -149,6 +110,43 @@ export function MessageImage(props: AttachmentProps) {
                         <IconCircleX size={40} color={colors.error} />
                     </Overlay>
                 )}
+
+            {(downloadStatus == DownloadStatus.NOT_DOWNLOADED || downloadStatus == DownloadStatus.DOWNLOADING) && (<Flex direction={'column'} pos={'absolute'} top={0} justify={'center'} h={'100%'} align={'center'} gap={'xs'}>
+                {!error && (
+                    <Box style={{
+                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                        borderRadius: 50,
+                        height: 40,
+                        width: 40,
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }}>
+                        {downloadPercentage > 0 ? (
+                            <AnimatedRoundedProgress size={40} value={downloadPercentage} color="white"></AnimatedRoundedProgress>
+                        ) : (
+                            <IconArrowDown size={25} color={'white'} />
+                        )}
+                    </Box>
+                )}
+                {error && (
+                    <Box p={'xs'} style={{
+                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                        borderRadius: 8,
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        gap: 4
+                    }}>
+                        <Text size={'xs'} c={'white'}>
+                            Image expired
+                        </Text>
+                        <IconFlameFilled size={15} style={{
+                            fontSmooth: 'always'
+                        }} color={'white'} />
+                    </Box>
+                )}
+            </Flex>)}
         </AspectRatio>
     );
 }