Fix blurrable image visibility init

Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>

Author: cursoragent

app/components/blurrable-image.tsx

@@ -2,6 +2,9 @@ import { clsx } from 'clsx'
 import * as React from 'react'
 
 const isServer = typeof document === 'undefined'
+const useIsomorphicLayoutEffect = isServer
+	? React.useEffect
+	: React.useLayoutEffect
 
 function BlurrableImage({
 	img,
@@ -12,37 +15,40 @@ function BlurrableImage({
 	blurDataUrl?: string
 } & React.HTMLAttributes<HTMLDivElement>) {
 	const id = React.useId()
-	const [visible, setVisible] = React.useState(() => {
-		if (isServer) return false
-
-		// on the client, it's possible the images has already finished loading.
-		// we've got the data-evt-onload attribute on the image
-		// (which our entry.server replaces with simply "onload") which will remove
-		// the class "opacity-0" from the image once it's loaded. So we'll check
-		// if the image is already loaded and if so, we know that visible should
-		// initialize to true.
-		const el = document.getElementById(id)
-		return el instanceof HTMLImageElement && !el.classList.contains('opacity-0')
-	})
+	const [visible, setVisible] = React.useState(false)
 	const jsImgElRef = React.useRef<HTMLImageElement>(null)
 
+	useIsomorphicLayoutEffect(() => {
+		const imageEl = jsImgElRef.current
+		if (!imageEl) return
+
+		// On the client, the image might have already loaded before hydration,
+		// which removes the opacity class via the server-rendered onload handler.
+		if (imageEl.complete || !imageEl.classList.contains('opacity-0')) {
+			setVisible(true)
+		}
+	}, [])
+
 	React.useEffect(() => {
-		if (!jsImgElRef.current) return
-		if (jsImgElRef.current.complete) {
+		const imageEl = jsImgElRef.current
+		if (!imageEl) return
+		if (imageEl.complete) {
 			setVisible(true)
 			return
 		}
 
 		let current = true
-		jsImgElRef.current.addEventListener('load', () => {
+		const handleLoad = () => {
 			if (!jsImgElRef.current || !current) return
 			setTimeout(() => {
 				setVisible(true)
 			}, 0)
-		})
+		}
+		imageEl.addEventListener('load', handleLoad)
 
 		return () => {
 			current = false
+			imageEl.removeEventListener('load', handleLoad)
 		}
 	}, [])
 

pr-description.md

@@ -0,0 +1,7 @@
+## Summary
+- 
+
+## Testing
+- 
+
+Fixes KCD-NODE-VB