Mitigate image flickering

src/components/ImageBlurFallback.tsx

@@ -4,7 +4,7 @@
 import { BLUR_ENABLED } from '@/site/config';
 import { clsx}  from 'clsx/lite';
 import Image, { ImageProps } from 'next/image';
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 export default function ImageBlurFallback(props: ImageProps) {
   const {
@@ -18,6 +18,9 @@ export default function ImageBlurFallback(props: ImageProps) {
   const [isLoading, setIsLoading] = useState(true);
   const [didError, setDidError] = useState(false);
 
+  const onLoad = useCallback(() => setIsLoading(false), []);
+  const onError = useCallback(() => setDidError(true), []);
+
   const [hideBlurPlaceholder, setHideBlurPlaceholder] = useState(false);
 
   const imageClassName = 'object-cover h-full';
@@ -80,8 +83,8 @@ export default function ImageBlurFallback(props: ImageProps) {
         ref: imgRef,
         priority,
         className: imageClassName,
-        onLoad: () => setIsLoading(false),
-        onError: () => setDidError(true),
+        onLoad,
+        onError,
       }} />
     </div>
   );