feat: upload image progress indicator

src/common/component/FileMessage/Image.js

@@ -1,6 +1,52 @@
 // import React from 'react'
+import styled from "styled-components";
+import { CircularProgressbar, buildStyles } from "react-circular-progressbar";
+import "react-circular-progressbar/dist/styles.css";
+const Styled = styled.div`
+  position: relative;
+  width: fit-content;
+  height: fit-content;
+  /* min-height: 240px;
+  max-height: 480px;
+  min-width: 240px;
+  max-width: 480px; */
+  img {
+    object-fit: cover;
+  }
+  .overlay {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.4);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .progress {
+      width: 15px;
+      height: 15px;
+      /* svg {
+        .CircularProgressbar-background {
+          fill: transparent;
+        }
+        .CircularProgressbar-trail {
+          stroke: #000;
+        }
+        .CircularProgressbar-path {
+          stroke: #000;
+        }
+      } */
+      .CircularProgressbar-path {
+        stroke: #444;
+      }
+    }
+  }
+`;
 import { getDefaultSize } from "../../utils";
 export default function Image({
+  uploading,
+  progress,
   thumbnail,
   download,
   content,
@@ -9,16 +55,32 @@ export default function Image({
   const { width = 0, height = 0 } = getDefaultSize(properties);
   console.log("image props", properties, width, height);
   return (
-    <img
-      className="img preview"
-      style={{
-        width: width ? `${width}px` : "",
-        height: height ? `${height}px` : "",
-      }}
-      data-meta={JSON.stringify(properties)}
-      data-origin={content}
-      data-download={download}
-      src={thumbnail || download || content}
-    />
+    <Styled>
+      {uploading && (
+        <div className="overlay">
+          <div className="progress">
+            <CircularProgressbar
+              value={progress}
+              strokeWidth={50}
+              styles={buildStyles({
+                storke: "#000",
+                strokeLinecap: "butt",
+              })}
+            />
+          </div>
+        </div>
+      )}
+      <img
+        className="img preview"
+        style={{
+          width: width ? `${width}px` : "",
+          height: height ? `${height}px` : "",
+        }}
+        data-meta={JSON.stringify(properties)}
+        data-origin={content}
+        data-download={download}
+        src={thumbnail || download || content}
+      />
+    </Styled>
   );
 }