From b554239f107efc35a4c5d87d35f2c98fd295cecb Mon Sep 17 00:00:00 2001
From: laixingyou <laixy7@gmail.com>
Date: Mon, 25 Sep 2023 22:04:07 +0800
Subject: [PATCH] feat: optimize svg fileformat  (#238)

Signed-off-by: laixingyou <laixy7@gmail.com>
---
 .../analyze/components/DownCardLoadImage.tsx  | 38 ++++++++++---------
 .../analyze/components/DownloadAndShare.tsx   | 30 +++++++++------
 2 files changed, 38 insertions(+), 30 deletions(-)

diff --git a/apps/web/src/modules/analyze/components/DownCardLoadImage.tsx b/apps/web/src/modules/analyze/components/DownCardLoadImage.tsx
index 14e10d35..402bbdd2 100644
--- a/apps/web/src/modules/analyze/components/DownCardLoadImage.tsx
+++ b/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(
diff --git a/apps/web/src/modules/analyze/components/DownloadAndShare.tsx b/apps/web/src/modules/analyze/components/DownloadAndShare.tsx
index 91d15159..12eb8626 100644
--- a/apps/web/src/modules/analyze/components/DownloadAndShare.tsx
+++ b/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);
             }}