From 195569730f781c2f016af87d4f7604ea2f32d623 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Fri, 15 Mar 2024 10:51:42 -0500
Subject: [PATCH] Mitigate image flickering

---
 src/components/ImageBlurFallback.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/ImageBlurFallback.tsx b/src/components/ImageBlurFallback.tsx
index d7bd0fd6..6f5072b7 100644
--- a/src/components/ImageBlurFallback.tsx
+++ b/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>
   );