From d435809ae85b0ec18b28a0ad3330aa8dea120ede Mon Sep 17 00:00:00 2001
From: RoyceDa <admin@rosetta-im.com>
Date: Thu, 19 Feb 2026 22:35:02 +0200
Subject: [PATCH] =?UTF-8?q?=D0=A3=D0=BB=D1=83=D1=87=D1=88=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=BD=D1=8B=D0=B9=20UI=20=D0=B8=D0=B7=D0=BE=D0=B1=D1=80=D0=B0?=
 =?UTF-8?q?=D0=B6=D0=B5=D0=BD=D0=B8=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MessageAttachments/MessageImage.tsx       | 40 ++++++++++++++++++-
 1 file changed, 38 insertions(+), 2 deletions(-)

diff --git a/app/components/MessageAttachments/MessageImage.tsx b/app/components/MessageAttachments/MessageImage.tsx
index e04ea40..77f8ef2 100644
--- a/app/components/MessageAttachments/MessageImage.tsx
+++ b/app/components/MessageAttachments/MessageImage.tsx
@@ -1,7 +1,7 @@
 import { useRosettaColors } from "@/app/hooks/useRosettaColors";
 import { DeliveredMessageState } from "@/app/providers/DialogProvider/DialogProvider";
 import { useImageViewer } from "@/app/providers/ImageViewerProvider/useImageViewer";
-import { AspectRatio, Box, Flex, Overlay, Portal, Text } from "@mantine/core";
+import { AspectRatio, Box, Flex, Loader, Overlay, Portal, Text } from "@mantine/core";
 import { IconArrowDown, IconCircleX, IconFlameFilled } from "@tabler/icons-react";
 import { useEffect, useRef, useState } from "react";
 import { AttachmentProps } from "./MessageAttachments";
@@ -111,7 +111,43 @@ export function MessageImage(props: AttachmentProps) {
                             <AnimatedRoundedProgress size={40} value={uploadedPercentage > 95 ? 95 : uploadedPercentage}></AnimatedRoundedProgress>
                         </Box>
                     </Flex>
-                </Portal>}
+            </Portal>}
+            {props.delivered == DeliveredMessageState.WAITING && uploadedPercentage == 0 && isMessageDeliveredByTime(props.timestamp || 0, props.attachments.length) &&
+                <Portal target={mainRef.current!}>
+                    <Flex direction={'column'} pos={'absolute'} justify={'center'} top={0} h={'100%'} align={'center'} gap={'xs'}>
+                     <Box p={'xs'} style={{
+                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                        borderRadius: 8,
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        gap: 4
+                    }}>
+                        <Loader size={15} type={'dots'} color={'white'}></Loader>
+                        <Text size={'xs'} c={'white'}>
+                            Encrypting...
+                        </Text>
+                    </Box>
+                    </Flex>
+            </Portal>}
+            {downloadStatus == DownloadStatus.DECRYPTING && 
+            <Portal target={mainRef.current!}>
+                    <Flex direction={'column'} pos={'absolute'} justify={'center'} top={0} h={'100%'} align={'center'} gap={'xs'}>
+                     <Box p={'xs'} style={{
+                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                        borderRadius: 8,
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        gap: 4
+                    }}>
+                        <Loader size={15} type={'dots'} color={'white'}></Loader>
+                        <Text size={'xs'} c={'white'}>
+                            Decrypting...
+                        </Text>
+                    </Box>
+                    </Flex>
+            </Portal>}
             {(props.delivered == DeliveredMessageState.ERROR || (props.delivered != DeliveredMessageState.DELIVERED &&
                 !isMessageDeliveredByTime(props.timestamp || 0, props.attachments.length)
             )) && (