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>
   );
 };