Улучшенный UI изображений

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";
@@ -112,6 +112,42 @@ export function MessageImage(props: AttachmentProps) {
                         </Box>
                     </Flex>
             </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)
             )) && (

app/workers/crypto/crypto.worker.ts

@@ -18,10 +18,11 @@ self.onmessage = async (event: MessageEvent) => {
                 result = await decodeWithPassword(payload.password, payload.data);
                 break;
             case 'encrypt':
-                result = await encrypt(payload.publicKey, payload.data);
+                result = await encrypt(payload.data, payload.publicKey);
                 break;
             case 'decrypt':
-                result = await decrypt(payload.privateKey, payload.data);
+                console.info("decrypt", payload.privateKey, payload.data);
+                result = await decrypt(payload.data, payload.privateKey);
                 break;
             case 'chacha20Encrypt':
                 result = await chacha20Encrypt(payload.data);