From 66d397fa802bee124f5754bd83468ba3bfe9fde5 Mon Sep 17 00:00:00 2001
From: David Heinemeier Hansson <david@hey.com>
Date: Tue, 18 Nov 2025 21:31:50 +0100
Subject: [PATCH] Eager load lazy frames inside dialogs on hover

---
 app/javascript/controllers/dialog_controller.js    | 4 ++--
 app/views/cards/display/common/_assignees.html.erb | 4 +++-
 app/views/cards/display/perma/_board.html.erb      | 4 +++-
 app/views/cards/display/perma/_tags.html.erb       | 2 +-
 app/views/my/_menu.html.erb                        | 4 +++-
 5 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/app/javascript/controllers/dialog_controller.js b/app/javascript/controllers/dialog_controller.js
index b2b8cb6fa..b024bce2b 100644
--- a/app/javascript/controllers/dialog_controller.js
+++ b/app/javascript/controllers/dialog_controller.js
@@ -25,7 +25,7 @@ export default class extends Controller {
 
     limitHeightToViewport(this.dialogTarget, this.sizingValue)
 
-    this.#loadLazyFrames()
+    this.loadLazyFrames()
     this.dialogTarget.setAttribute("aria-hidden", "false")
     this.dispatch("show")
   }
@@ -58,7 +58,7 @@ export default class extends Controller {
     }
   }
 
-  #loadLazyFrames() {
+  loadLazyFrames() {
     Array.from(this.dialogTarget.querySelectorAll("turbo-frame")).forEach(frame => { frame.loading = "eager" })
   }
 }
diff --git a/app/views/cards/display/common/_assignees.html.erb b/app/views/cards/display/common/_assignees.html.erb
index 489721726..24346a6e7 100644
--- a/app/views/cards/display/common/_assignees.html.erb
+++ b/app/views/cards/display/common/_assignees.html.erb
@@ -1,4 +1,6 @@
-<div id="<%= dom_id(card, :assignees) %>" class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>
+<div id="<%= dom_id(card, :assignees) %>" class="position-relative"
+    data-controller="dialog"
+    data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside mouseenter->dialog#loadLazyFrames" <%= "hidden" if card.closed? %>>
   <button class="card__assignees-trigger" data-action="click->dialog#open:stop keydown.a@document->hotkey#click" data-controller="tooltip hotkey" tabindex=<%= (local_assigns.key?(:preview) && local_assigns[:preview]) ? -1 : 0 %>>
     <% card.assignees.each do |assignee| %>
       <%= avatar_preview_tag assignee, tabindex: (local_assigns.key?(:preview) && local_assigns[:preview]) ? -1 : 0 %>
diff --git a/app/views/cards/display/perma/_board.html.erb b/app/views/cards/display/perma/_board.html.erb
index e78a33579..4814aa797 100644
--- a/app/views/cards/display/perma/_board.html.erb
+++ b/app/views/cards/display/perma/_board.html.erb
@@ -1,5 +1,7 @@
 <%= render "cards/display/common/board", card: card do %>
-  <div class="align-self-center position-relative txt-small" data-controller="dialog" data-action="keydown.esc->dialog#close:stop click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>
+  <div class="align-self-center position-relative txt-small"
+      data-controller="dialog"
+      data-action="keydown.esc->dialog#close:stop click@document->dialog#closeOnClickOutside mouseenter->dialog#loadLazyFrames" <%= "hidden" if card.closed? %>>
     <button class="board-picker__button btn btn--reversed card__hide-on-index fill-transparent" data-action="click->dialog#open:stop">
       <%= icon_tag "caret-down" %>
       <span class="for-screen-reader">Choose a board for this card</span>
diff --git a/app/views/cards/display/perma/_tags.html.erb b/app/views/cards/display/perma/_tags.html.erb
index 0a5bbb1bf..2fb747d27 100644
--- a/app/views/cards/display/perma/_tags.html.erb
+++ b/app/views/cards/display/perma/_tags.html.erb
@@ -1,6 +1,6 @@
 <div id="<%= dom_id(card, :tags) %>" class="card__tags">
   <div class="position-relative" data-controller="dialog"
-        data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>
+        data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside mouseenter->dialog#loadLazyFrames" <%= "hidden" if card.closed? %>>
     <button class="tag-picker__button btn card__hide-on-index" style="--btn-background: var(--card-bg-color);"
         data-controller="tooltip hotkey" data-action="click->dialog#open:stop keydown.t@document->hotkey#click">
       <%= icon_tag "tag" %>
diff --git a/app/views/my/_menu.html.erb b/app/views/my/_menu.html.erb
index 383b029e5..fe4336fec 100644
--- a/app/views/my/_menu.html.erb
+++ b/app/views/my/_menu.html.erb
@@ -1,4 +1,6 @@
-<nav class="nav" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
+<nav class="nav"
+    data-controller="dialog"
+    data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside mouseenter->dialog#loadLazyFrames">
   <%= tag.button class:"nav__trigger input input--select center flex-inline align-center txt-normal", data: {
         action: "click->dialog#open:stop keydown.j@document->hotkey#click keydown.meta+j@document->hotkey#click keydown.ctrl+j@document->hotkey#click",
         controller: "hotkey" } do %>