Reload frames with morphing to pervent blink when re-rendering columns

app/helpers/columns_helper.rb

@@ -8,4 +8,13 @@ module ColumnsHelper
       form_class: "flex align-center gap-half",
       data: { turbo_frame: "_top" }
   end
+
+  def column_frame_tag(id, src: nil, data: {}, **options, &block)
+    data = data.reverse_merge \
+      "drag-and-drop-refresh": true,
+      controller: "frame",
+      action: "turbo:before-frame-render->frame#morphRender turbo:before-morph-element->frame#morphReload"
+
+    turbo_frame_tag(id, src: src, data: data, **options, &block)
+  end
 end

app/javascript/controllers/drag_and_drop_controller.js

@@ -78,15 +78,7 @@ export default class extends Controller {
 
   #reloadSourceFrame(sourceContainer) {
     const frame = sourceContainer.querySelector("[data-drag-and-drop-refresh]")
-    if (frame) {
-      frame.addEventListener("turbo:before-frame-render", ({ detail }) => {
-        detail.render = function (currentElement, newElement) {
-          Turbo.morphChildren(currentElement, newElement)
-        }
-      }, { once: true })
-
-      frame.reload()
-    }
+    if (frame) frame.reload()
   }
 
   #decreaseCounter(sourceContainer) {

app/javascript/controllers/frame_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from "@hotwired/stimulus"
+import { Turbo } from "@hotwired/turbo-rails"
+
+export default class extends Controller {
+  morphRender({ detail }) {
+    detail.render = function (currentElement, newElement) {
+      Turbo.morphChildren(currentElement, newElement)
+    }
+  }
+
+  morphReload(event) {
+    const newElement = event.detail.newElement
+    if (newElement && newElement.tagName === "TURBO-FRAME") {
+      event.preventDefault()
+      this.element.reload()
+    }
+  }
+}

app/views/collections/show/_closed.html.erb

@@ -7,5 +7,5 @@
 
   <%= cards_expander "Done", collection.cards.closed.count %>
 
-  <%= turbo_frame_tag :closed_column, src: collection_columns_closed_path(collection), "data-drag-and-drop-refresh": true, refresh: :morph %>
+  <%= column_frame_tag :closed_column, src: collection_columns_closed_path(collection) %>
 </section>

app/views/collections/show/_column.html.erb

@@ -7,5 +7,5 @@
 >
   <%= cards_expander column.name, column.cards.active.count %>
 
-  <%= turbo_frame_tag dom_id(column, :cards), src: collection_column_path(column.collection, column), "data-drag-and-drop-refresh": true, refresh: :morph %>
+  <%= column_frame_tag dom_id(column, :cards), src: collection_column_path(column.collection, column) %>
 </section>

app/views/collections/show/_not_now.html.erb

@@ -7,5 +7,5 @@
 
   <%= cards_expander "Not Now", collection.cards.postponed.count %>
 
-  <%= turbo_frame_tag :not_now_column, src: collection_columns_not_now_path(collection), "data-drag-and-drop-refresh": true, refresh: :morph %>
+  <%= column_frame_tag :not_now_column, src: collection_columns_not_now_path(collection) %>
 </section>