From 821f69187fbdb5189d5fc97217bedb58953b7bb1 Mon Sep 17 00:00:00 2001 From: teodorus-nathaniel Date: Wed, 10 Jul 2024 20:18:11 +0700 Subject: [PATCH] Fix issue with image loaded but send button is still disabled --- src/components/extensions/image/ImageModal.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/extensions/image/ImageModal.tsx b/src/components/extensions/image/ImageModal.tsx index 3963c2141..85632b262 100644 --- a/src/components/extensions/image/ImageModal.tsx +++ b/src/components/extensions/image/ImageModal.tsx @@ -15,7 +15,7 @@ import { getTokenomicsMetadataQuery } from '@/services/datahub/content-staking/q import { useExtensionModalState } from '@/stores/extension' import { cx } from '@/utils/class-names' import { resizeImage } from '@/utils/image' -import React, { useEffect, useState } from 'react' +import React, { useEffect, useRef, useState } from 'react' import Dropzone from 'react-dropzone' import { HiTrash } from 'react-icons/hi2' import { z } from 'zod' @@ -212,9 +212,14 @@ function ImageUpload({ initialImage, setUploadedImageLink }: ImageUploadProps) { saveImage(initialImage) }, [initialImage, saveImage]) + const currentLoadedImage = useRef('') useEffect(() => { const isShowingImage = (!!imageUrl || isLoading) && !isError - setUploadedImageLink({ isShowingImage, loadedLink: null }) + if (currentLoadedImage.current === imageUrl) { + setUploadedImageLink((prev) => ({ ...prev, isShowingImage })) + } else { + setUploadedImageLink({ isShowingImage, loadedLink: null }) + } }, [setUploadedImageLink, imageUrl, isLoading, isError]) if (imageUrl) { @@ -225,6 +230,7 @@ function ImageUpload({ initialImage, setUploadedImageLink }: ImageUploadProps) { onLoad={() => { // To prevent this called first before the useEffect, which causes image rendered, but the link is null setTimeout(() => { + currentLoadedImage.current = imageUrl setUploadedImageLink((prev) => ({ ...prev, loadedLink: imageUrl })) }) }}