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 (
@@ -172,24 +173,29 @@ const DownloadAndShare = (props: {
-
{ - 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 ? ( - - ) : ( - t('analyze:download') - )} -
+ {loadingPrviewImg && ( +
{ + 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 ? ( + + ) : ( + t('analyze:download') + )} +
+ )} { + setLoadingPrviewImg(true); + }} onComplete={() => { setLoadingDownLoadImg(false); }}