Skip to content

BlurrableImage state initialization #671

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kentcdodds merged 3 commits into from
Feb 23, 2026
Merged

BlurrableImage state initialization #671

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
df5cdd4
Fix blurrable image visibility init
cursoragent Feb 23, 2026
95f354b
Remove PR description template
cursoragent Feb 23, 2026
bb9bbeb
Guard blurrable image DOM lookup
cursoragent Feb 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions app/components/blurrable-image.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,18 @@ function BlurrableImage({
const [visible, setVisible] = React.useState(() => {
if (isServer) return false

// During hydration the element might not be in the DOM yet, so guard
// against null to avoid crashing and fall back to the blurred state.
const el = document.getElementById(id)
if (!(el instanceof HTMLImageElement)) 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')
return !el.classList.contains('opacity-0')
})
const jsImgElRef = React.useRef<HTMLImageElement>(null)

Expand Down
Loading