From 3777405f0b755187373bd03f5e79f206cfbff431 Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Fri, 7 Mar 2025 17:40:19 +0000
Subject: [PATCH] DEV: Use resize observer (#25)

---
 .../components/experimental-screen.gjs        | 42 +++++++------------
 1 file changed, 16 insertions(+), 26 deletions(-)

diff --git a/javascripts/discourse/components/experimental-screen.gjs b/javascripts/discourse/components/experimental-screen.gjs
index 4cb5dbd..f61f671 100644
--- a/javascripts/discourse/components/experimental-screen.gjs
+++ b/javascripts/discourse/components/experimental-screen.gjs
@@ -2,41 +2,24 @@ import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
-import { cancel, throttle } from "@ember/runloop";
 import { htmlSafe } from "@ember/template";
 import { bind } from "discourse/lib/decorators";
 
 export default class ExperimentalScreen extends Component {
   @tracked left = 0;
   @tracked right = 0;
+  resizeObserver;
 
   willDestroy() {
     super.willDestroy(...arguments);
-    cancel(this._throttledCalculateDistanceHandler);
-  }
-
-  getDistance(element) {
-    const rect = element.getBoundingClientRect();
-    return rect;
+    this.resizeObserver.disconnect();
   }
 
   @bind
-  calculateDistance() {
-    this._throttledCalculateDistanceHandler = throttle(
-      this,
-      this._throttledCalculateDistance,
-      50
-    );
-  }
-
-  _throttledCalculateDistance() {
-    const element = document.getElementById("main-outlet");
-
-    if (element) {
-      const distance = this.getDistance(element);
-      this.left = distance.left;
-      this.right = distance.right;
-    }
+  calculateDistance(element) {
+    const distance = element.getBoundingClientRect();
+    this.left = distance.left;
+    this.right = distance.right;
   }
 
   get distanceStyles() {
@@ -46,9 +29,16 @@ export default class ExperimentalScreen extends Component {
   }
 
   @action
-  onInsert() {
-    this.calculateDistance();
-    window.addEventListener("resize", this.calculateDistance);
+  onInsert(element) {
+    this.calculateDistance(element);
+
+    this.resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        this.calculateDistance(entry.target);
+      }
+    });
+
+    this.resizeObserver.observe(element);
   }
 
   <template>