feat: image load status in message

src/common/component/FileMessage/ImageMessage.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, FC } from "react";
-import { Ping } from '@uiball/loaders';
+import { Ping, LineWobble } from '@uiball/loaders';
 import { getDefaultSize, isMobile } from "../../utils";
 
 type Props = {
@@ -19,19 +19,19 @@ const ImageMessage: FC<Props> = ({
   content,
   properties
 }) => {
-  const [url, setUrl] = useState(thumbnail);
+  const url = thumbnail || content;
+  const [status, setStatus] = useState<"loading" | "error" | "loaded">("loading");
   const { width = 0, height = 0 } = getDefaultSize(properties, { min: 200, max: isMobile() ? 300 : 480 });
   useEffect(() => {
-    const newUrl = thumbnail;
     const img = new Image();
     img.onload = () => {
-      setUrl(newUrl);
+      setStatus("loaded");
     };
     img.onerror = () => {
-      setUrl("");
+      setStatus("error");
     };
-    img.src = newUrl;
-  }, [thumbnail]);
+    img.src = url;
+  }, [url]);
 
   return (
     <div className={`relative`} style={{
@@ -49,17 +49,20 @@ const ImageMessage: FC<Props> = ({
           <span className="text-xs text-gray-500">{progress}%</span>
         </div>
       )}
-      <img
-        className="h-auto w-full cursor-zoom-in object-cover preview"
-        // style={{
-        //   width: width ? `${width}px` : "",
-        //   height: height ? `${height}px` : ""
-        // }}
-        data-meta={JSON.stringify(properties)}
-        data-origin={content}
-        data-download={download}
-        src={url}
-      />
+      {status == "error" ? <p className="w-full h-full flex-center text-lg text-red-800 bg-red-100">load image error</p> :
+        status == "loading" ? <p className="w-full h-full flex-center bg-primary-50/80 dark:bg-primary-900/70">
+          <LineWobble />
+        </p> : <img
+          className="h-auto w-full cursor-zoom-in object-cover preview"
+          // style={{
+          //   width: width ? `${width}px` : "",
+          //   height: height ? `${height}px` : ""
+          // }}
+          data-meta={JSON.stringify(properties)}
+          data-origin={content}
+          data-download={download}
+          src={url}
+        />}
     </div>
   );
 };

src/common/utils.tsx

@@ -209,6 +209,8 @@ export const normalizeFileMessage = (data: MessagePayload) => {
   const { properties, content, sending = false, content_type } = data;
   const isFile = content_type == ContentTypes.file;
   const isPic = isImage(properties?.content_type, properties?.size);
+  // gif暂不支持缩略图
+  const isGif = isPic && properties?.content_type == "image/gif";
   let res: null | { file_path?: string, content?: string, download?: string, thumbnail: string } = null;
   if (isFile) {
     if (!sending) {
@@ -220,14 +222,14 @@ export const normalizeFileMessage = (data: MessagePayload) => {
         download: `${BASE_URL}/resource/file?file_path=${encodeURIComponent(
           content
         )}&download=true`,
-        thumbnail: isPic
+        thumbnail: (isPic && !isGif)
           ? `${BASE_URL}/resource/file?file_path=${encodeURIComponent(
             content
           )}&thumbnail=true`
           : ""
       };
     } else if (isPic) {
-      res = { thumbnail: content };
+      res = { thumbnail: isGif ? "" : content };
     }
   }
   return res;