diff --git a/src/photo/form/PhotoForm.tsx b/src/photo/form/PhotoForm.tsx index e11d0c29..5311d9cc 100644 --- a/src/photo/form/PhotoForm.tsx +++ b/src/photo/form/PhotoForm.tsx @@ -29,6 +29,8 @@ import { formatCount, formatCountDescriptive } from '@/utility/string'; import { AiContent } from '../ai/useAiImageQueries'; import AiButton from '../ai/AiButton'; import Spinner from '@/components/Spinner'; +import { getNextImageUrlForRequest } from '@/services/next-image'; +import useDelay from '@/utility/useDelay'; const THUMBNAIL_SIZE = 300; @@ -61,13 +63,17 @@ export default function PhotoForm({ const [blurError, setBlurError] = useState(); const [hasBlurData, setHasBlurData] = useState(false); + + const didLoad1000msAgo = useDelay(1000); // Show image loading status when necessary for // blur data or AI analysis - const showImageLoadingStatus = !hasBlurData && ( - BLUR_ENABLED || - aiContent !== undefined - ); + const showImageLoadingStatus = + !hasBlurData && + didLoad1000msAgo && ( + (BLUR_ENABLED && !formData.blurData) || + aiContent !== undefined + ); // Update form when EXIF data // is refreshed by parent @@ -254,7 +260,7 @@ export default function PhotoForm({ { + const timeout = setTimeout(() => setDidLoad(true), delay); + return () => clearTimeout(timeout); + }, [delay]); + + return didLoad; +};