Show blur loading status

src/photo/form/PhotoForm.tsx

@@ -28,6 +28,7 @@ import { Tags, sortTagsObjectWithoutFavs } from '@/tag';
 import { formatCount, formatCountDescriptive } from '@/utility/string';
 import { AiContent } from '../ai/useAiImageQueries';
 import AiButton from '../ai/AiButton';
+import Spinner from '@/components/Spinner';
 
 const THUMBNAIL_SIZE = 300;
 
@@ -59,6 +60,14 @@ export default function PhotoForm({
     useState(getFormErrors(initialPhotoForm));
   const [blurError, setBlurError] =
     useState<string>();
+  const [hasBlurData, setHasBlurData] = useState(false);
+
+  // Show image loading status when necessary for
+  // blur data or AI analysis
+  const showImageLoadingStatus = !hasBlurData && (
+    BLUR_ENABLED ||
+    aiContent !== undefined
+  );
 
   // Update form when EXIF data
   // is refreshed by parent
@@ -122,6 +131,7 @@ export default function PhotoForm({
         blurData,
       }));
     }
+    setHasBlurData(true);
   }, []);
 
   useEffect(() =>
@@ -208,17 +218,41 @@ export default function PhotoForm({
           {blurError}
         </div>}
       <div className="flex gap-2">
-        <ImageBlurFallback
+        <div className="relative">
-          alt="Upload"
+          <ImageBlurFallback
-          src={url}
+            alt="Upload"
-          className={clsx(
+            src={url}
-            'border rounded-md overflow-hidden',
+            className={clsx(
-            'border-gray-200 dark:border-gray-700'
+              'border rounded-md overflow-hidden',
-          )}
+              'border-gray-200 dark:border-gray-700',
-          width={width}
+            )}
-          height={height}
+            width={width}
-          priority
+            height={height}
-        />
+            priority
+          />
+          <div className={clsx(
+            'absolute top-2 left-2 transition-opacity duration-500',
+            showImageLoadingStatus ? 'opacity-100' : 'opacity-0',
+          )}>
+            <div className={clsx(
+              'leading-none text-xs font-medium uppercase tracking-wide',
+              'px-1.5 py-1 rounded-[4px]',
+              'inline-flex items-center gap-2',
+              'bg-white/70 dark:bg-black/60 backdrop-blur-md',
+              'border border-gray-900/10 dark:border-gray-700/70',
+            )}>
+              <Spinner
+                color="text"
+                size={9}
+                className={clsx(
+                  'text-extra-dim',
+                  'translate-x-[1px] translate-y-[0.5px]'
+                )}
+              />
+              Analyzing image
+            </div>
+          </div>
+        </div>
         <CanvasBlurCapture
           imageUrl={url}
           width={width}