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

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()
+    }
+  }
+}