feat: optimize svg fileformat (#238)

Signed-off-by: laixingyou <[email protected]>

apps/web/src/modules/analyze/components/DownCardLoadImage.tsx

@@ -28,6 +28,7 @@ interface DownLoadImageProps {
   qrcodeLink?: string;
   fileFormat: string;
   onComplete: () => void;
+  onCompleteLoad: () => void;
 }
 
 const DownLoadImage = (props: DownLoadImageProps) => {
@@ -37,6 +38,7 @@ const DownLoadImage = (props: DownLoadImageProps) => {
     loadingDownLoadImg,
     fileFormat,
     onComplete,
+    onCompleteLoad,
   } = props;
 
   const { t } = useTranslation();
@@ -70,6 +72,20 @@ const DownLoadImage = (props: DownLoadImageProps) => {
       cardDownRef.current!.src = dataURL;
       cardRef.current!.style.removeProperty('width');
       await sleep(300);
+      onCompleteLoad();
+    };
+    const timer = setTimeout(() => {
+      fetchData().catch((e) => {
+        console.log('error:', e);
+      });
+    }, 300);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [downloadDivRef, cardRef, cardImgRef, size]);
+
+  useEffect(() => {
+    const downLoadImg = async () => {
       if (loadingDownLoadImg) {
         // download img
         if (fileFormat === 'PNG') {
@@ -99,24 +115,10 @@ const DownLoadImage = (props: DownLoadImageProps) => {
         }
       }
     };
-
-    const timer = setTimeout(() => {
-      fetchData().catch((e) => {
-        console.log('error:', e);
-      });
-    }, 300);
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [
-    downloadDivRef,
-    cardRef,
-    cardImgRef,
-    onComplete,
-    size,
-    loadingDownLoadImg,
-  ]);
-
+    downLoadImg().catch((e) => {
+      console.log('error:', e);
+    });
+  }, [loadingDownLoadImg]);
   return (
     <div
       className={classnames(

apps/web/src/modules/analyze/components/DownloadAndShare.tsx

@@ -83,6 +83,7 @@ const DownloadAndShare = (props: {
   const [open, setOpen] = useState(false);
   const [fileFormat, setFileFormat] = useState('PNG');
   const [loadingDownLoadImg, setLoadingDownLoadImg] = React.useState(false);
+  const [loadingPrviewImg, setLoadingPrviewImg] = React.useState(false);
 
   return (
     <>
@@ -172,24 +173,29 @@ const DownloadAndShare = (props: {
                 </label>
               </div>
             </RadioGroup.Root>
-            <div
-              onClick={() => {
-                setLoadingDownLoadImg(true);
-              }}
-              className="absolute right-10 top-24 flex  h-7 w-20 cursor-pointer items-center justify-center rounded-sm border border-[#3A5BEF] text-xs text-[#3A5BEF]"
-            >
-              {loadingDownLoadImg ? (
-                <AiOutlineLoading className="t animate-spin" />
-              ) : (
-                t('analyze:download')
-              )}
-            </div>
+            {loadingPrviewImg && (
+              <div
+                onClick={() => {
+                  setLoadingDownLoadImg(true);
+                }}
+                className="absolute right-10 top-24 flex  h-7 w-20 cursor-pointer items-center justify-center rounded-sm border border-[#3A5BEF] text-xs text-[#3A5BEF]"
+              >
+                {loadingDownLoadImg ? (
+                  <AiOutlineLoading className="t animate-spin" />
+                ) : (
+                  t('analyze:download')
+                )}
+              </div>
+            )}
           </div>
           <DownCardLoadImage
             size={downloadImageSize}
             cardRef={cardRef}
             loadingDownLoadImg={loadingDownLoadImg}
             fileFormat={fileFormat}
+            onCompleteLoad={() => {
+              setLoadingPrviewImg(true);
+            }}
             onComplete={() => {
               setLoadingDownLoadImg(false);
             }}