From 6fbf71dfe6c50c2bb3914bb4697f2055de4c91ea Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Fri, 7 Mar 2025 06:51:58 +0000
Subject: [PATCH] Add opt-in client-side observer for LiveView updates

---
 assets/js/app.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/assets/js/app.js b/assets/js/app.js
index 232efcf0..b09651a9 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -62,3 +62,27 @@ liveSocket.connect();
 // >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
 // >> liveSocket.disableLatencySim()
 window.liveSocket = liveSocket;
+
+// Credit: https://andrewtimberlake.com/blog/2025/03/see-what-liveview-changes-are-being-made
+window.enableLiveViewChangeObserver = () => {
+  // Mutation observer to highlight changed elements
+  return new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.type === "childList") {
+        mutation.addedNodes.forEach((node) => {
+          if (node.nodeType === Node.ELEMENT_NODE) {
+            node.style.transition = "outline 0.3s ease-in-out";
+            node.style.outline = "2px solid red";
+            setTimeout(() => {
+              node.style.outline = "none";
+              node.style.transition = "";
+            }, 1000);
+          }
+        });
+      }
+    });
+  }).observe(document.body, {
+    childList: true,
+    subtree: true,
+  });
+};