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)
             )) && (