Eager load lazy frames inside dialogs on hover

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" })
   }
 }

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 %>

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>

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" %>

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 %>