Skip to content

Commit d8aca8d

Browse files
committed
[Bug Fix] Avatar: stop lazy-loading image so it is never stuck hidden
An uncached AvatarImage could get permanently stuck on the fallback. The avatar controller hides a still-loading image with display:none (the `hidden` class) so the fallback shows, but the image was rendered with loading="lazy". Browsers never fetch a loading="lazy" image that generates no box, so its `load` event never fired and showImage() was never called — the image stayed hidden indefinitely. Cached images were unaffected because they are already complete at connect(). Remove loading="lazy" so the image loads eagerly even while hidden; the load/error handlers then reveal it. This matches shadcn/radix, which do not lazy-load the avatar image. Fixes #415
1 parent d799b7a commit d8aca8d

2 files changed

Lines changed: 19 additions & 1 deletion

File tree

gem/lib/ruby_ui/avatar/avatar_image.rb

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,11 @@ def view_template
1616

1717
def default_attrs
1818
{
19-
loading: "lazy",
19+
# NB: do not set loading: "lazy" here. avatar_controller hides a not-yet-loaded
20+
# image with `display:none` (the `hidden` class) so the fallback shows. The
21+
# browser never fetches a `loading="lazy"` image that generates no box, so its
22+
# `load` event never fires and the image stays hidden forever (#415). shadcn/radix
23+
# do not lazy-load the avatar image either.
2024
data: {
2125
ruby_ui__avatar_target: "image",
2226
action: "load->ruby-ui--avatar#showImage error->ruby-ui--avatar#showFallback"

gem/test/ruby_ui/avatar_test.rb

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,18 @@ def test_render_with_all_items
1919
assert_match(/class="aspect-square h-full w-full"/, output)
2020
refute_match(/class="[^"]*\bhidden\b[^"]*aspect-square/, output)
2121
end
22+
23+
def test_image_is_not_lazy_loaded
24+
# Regression for #415: the controller hides a still-loading image with
25+
# display:none, and a loading="lazy" image with no box is never fetched, so
26+
# it would stay hidden forever. The avatar image must load eagerly.
27+
output = phlex do
28+
RubyUI.Avatar do
29+
RubyUI.AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
30+
RubyUI.AvatarFallback { "JD" }
31+
end
32+
end
33+
34+
refute_match(/loading="lazy"/, output)
35+
end
2236
end

0 commit comments

Comments
 (0)