[BACKPORT]: Promote lazily-loaded Turbo Frame navigation

The changed merged into `@hotwired/turbo` as part of
[hotwired/turbo#790][] resolve an important issue around how
`<turbo-frame loading="lazy">` elements treat `[data-turbo-action]`
attributes.

With #790 merged into `main`, it is not yet part of an official
`@hotwired/turbo` or `@hotwired/turbo-rails` release, and is only
available through a manual backport.

Once `@hotwired/[email protected]` is released, this commit can be reverted or
deleted from the history.

[hotwired/turbo#790]: hotwired/turbo#790

app/javascript/application.js

@@ -3,3 +3,31 @@ import "@hotwired/turbo-rails"
 import "controllers"
 import "trix"
 import "@rails/actiontext"
+
+// Delete me when https://github.com/hotwired/turbo/pull/790 is released
+// and we've upgraded to Turbo 7.2.5
+//
+// START BACKPORT
+for (const { delegate } of document.querySelectorAll("turbo-frame")) {
+  backportLazyLoadedFramePromotion(delegate)
+}
+
+new MutationObserver((mutationRecords) => {
+  for (const { addedNodes } of mutationRecords) {
+    for (const addedNode of addedNodes) {
+      if (addedNode.localName == "turbo-frame") {
+        backportLazyLoadedFramePromotion(addedNode.delegate)
+      }
+    }
+  }
+}).observe(document.documentElement, { subtree: true, childList: true })
+
+function backportLazyLoadedFramePromotion(frameController) {
+  function elementAppearedInViewport(element) {
+    this.proposeVisitIfNavigatedWithAction(element, element)
+    this.loadSourceURL()
+  }
+
+  frameController.elementAppearedInViewport = elementAppearedInViewport.bind(frameController)
+}
+// END BACKPORT