From a9fc3182c4ccd5aa23338f3c90ab584eadf1a4b3 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 30 Mar 2024 23:16:02 -0500
Subject: [PATCH] Improve ai/blur capture and loading status

---
 src/photo/form/PhotoForm.tsx | 16 +++++++++++-----
 src/utility/useDelay.ts      | 12 ++++++++++++
 2 files changed, 23 insertions(+), 5 deletions(-)
 create mode 100644 src/utility/useDelay.ts

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<string>();
   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({
           </div>
         </div>
         <CanvasBlurCapture
-          imageUrl={url}
+          imageUrl={getNextImageUrlForRequest(url, 640)}
           width={width}
           height={height}
           onLoad={aiContent?.setImageData}
diff --git a/src/utility/useDelay.ts b/src/utility/useDelay.ts
new file mode 100644
index 00000000..f8cf215e
--- /dev/null
+++ b/src/utility/useDelay.ts
@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+
+export default function useDelay(delay = 0) {
+  const [didLoad, setDidLoad] = useState(false);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => setDidLoad(true), delay);
+    return () => clearTimeout(timeout);
+  }, [delay]);
+
+  return didLoad;
+};