Исправлена блокировка потока при вставке изображений, оптимизирован код и ответственность

app/components/MessageAttachments/MessageImage.tsx

@@ -5,10 +5,11 @@ import { AspectRatio, Box, Flex, Overlay, Portal, Text } from "@mantine/core";
 import { IconArrowDown, IconCircleX, IconFlameFilled } from "@tabler/icons-react";
 import { useEffect, useRef, useState } from "react";
 import { AttachmentProps } from "./MessageAttachments";
-import { blurhashToBase64Image, isMessageDeliveredByTime } from "@/app/utils/utils";
+import { isMessageDeliveredByTime } from "@/app/utils/utils";
 import { AnimatedRoundedProgress } from "../AnimatedRoundedProgress/AnimatedRoundedProgress";
 import { ImageToView } from "@/app/providers/ImageViewerProvider/ImageViewerProvider";
 import { DownloadStatus, useAttachment } from "@/app/providers/AttachmentProvider/useAttachment";
+import { blurhashToBase64Image } from "@/app/workers/image/image";
 
 export function MessageImage(props: AttachmentProps) {
     const colors = useRosettaColors();
@@ -25,9 +26,11 @@ export function MessageImage(props: AttachmentProps) {
     const preview = getPreview();
     const [blob, setBlob] = useState(props.attachment.blob);
     const [loadedImage, setLoadedImage] = useState(false);
+    const [blurhashPreview, setBlurhashPreview] = useState("");
 
     useEffect(() => {
         constructBlob();
+        constructFromBlurhash();
     }, [downloadStatus]);
 
     const constructBlob = async () => {
@@ -45,6 +48,12 @@ export function MessageImage(props: AttachmentProps) {
         open(images, 0);
     }
 
+    const constructFromBlurhash = async () => {
+        if (preview.length < 20) return;
+        const blob = await blurhashToBase64Image(preview, 200, 220);
+        setBlurhashPreview(blob);
+    }
+
     const onClick = () => {
         if (downloadStatus == DownloadStatus.DOWNLOADED) {
             openImageViewer();
@@ -83,7 +92,7 @@ export function MessageImage(props: AttachmentProps) {
                         borderRadius: 8,
                         objectFit: 'cover',
                         border: '1px solid ' + colors.borderColor
-                    }} src={/*block render???*/blurhashToBase64Image(preview, 200, 220)}></img>
+                    }} src={blurhashPreview == "" ? undefined : blurhashPreview}></img>
                 </>
             )}