From 6599544b1d915e0f99ce913718d85c8d9d1e41ff Mon Sep 17 00:00:00 2001
From: Jeremias Peier <jeremias.peier@sbb.ch>
Date: Tue, 2 Jul 2024 15:02:56 +0200
Subject: [PATCH] fix: avoid resizeObserver loop warning

---
 src/elements/notification/notification.ts     |  7 ++-
 .../notification/notification.visual.spec.ts  | 58 ++++++++-----------
 2 files changed, 27 insertions(+), 38 deletions(-)

diff --git a/src/elements/notification/notification.ts b/src/elements/notification/notification.ts
index 944db2d15b..153c6427f0 100644
--- a/src/elements/notification/notification.ts
+++ b/src/elements/notification/notification.ts
@@ -165,14 +165,15 @@ export class SbbNotificationElement extends LitElement {
       clearTimeout(this._resizeObserverTimeout);
     }
 
-    this.toggleAttribute('data-resize-disable-animation', true);
-    this._setNotificationHeight();
-
     // Disable the animation when resizing the notification to avoid strange height transition effects.
+    this.toggleAttribute('data-resize-disable-animation', true);
     this._resizeObserverTimeout = setTimeout(
       () => this.removeAttribute('data-resize-disable-animation'),
       DEBOUNCE_TIME,
     );
+
+    // To avoid ResizeObserver loops, we set the height a tick later.
+    setTimeout(() => this._setNotificationHeight());
   }
 
   private _onNotificationAnimationEnd(event: AnimationEvent): void {
diff --git a/src/elements/notification/notification.visual.spec.ts b/src/elements/notification/notification.visual.spec.ts
index b4bdb2a912..6d5b71dc7e 100644
--- a/src/elements/notification/notification.visual.spec.ts
+++ b/src/elements/notification/notification.visual.spec.ts
@@ -1,5 +1,3 @@
-import { SbbBreakpointSmallMin } from '@sbb-esta/lyne-design-tokens';
-import { setViewport } from '@web/test-runner-commands';
 import { html, nothing, type TemplateResult } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 
@@ -54,39 +52,29 @@ describe(`sbb-notification`, () => {
     size: ['s', 'm'],
   };
 
-  // FIXME setViewports should be called before withFixture to avoid errors generated by the resizeObserver
-  const vps = [
-    { name: 'zero' as const, width: 320 },
-    { name: 'small' as const, width: SbbBreakpointSmallMin },
-  ];
-
-  for (const vp of vps) {
-    describeViewports({ viewports: [vp.name] }, () => {
-      describeEach(states, ({ readonly, slottedTitle }) => {
-        it(
-          visualDiffDefault.name,
-          visualDiffDefault.with(async (setup) => {
-            await setViewport({ width: vp.width, height: 400 });
-            const args = { ...defaultArgs, readonly, title: slottedTitle, slotted: slottedTitle };
-            await setup.withFixture(html`${notificationTemplate(args)}`);
-          }),
-        );
-      });
+  describeViewports({ viewports: ['zero', 'small'] }, () => {
+    describeEach(states, ({ readonly, slottedTitle }) => {
+      it(
+        visualDiffDefault.name,
+        visualDiffDefault.with(async (setup) => {
+          const args = { ...defaultArgs, readonly, title: slottedTitle, slotted: slottedTitle };
+          await setup.withFixture(html`${notificationTemplate(args)}`);
+        }),
+      );
+    });
 
-      describeEach(visualStates, ({ state, size }) => {
-        it(
-          visualDiffDefault.name,
-          visualDiffDefault.with(async (setup) => {
-            await setViewport({ width: vp.width, height: 400 });
-            await setup.withFixture(html`
-              ${repeat(
-                state.multiple ? types : [state.type],
-                (type: string) => html`${notificationTemplate({ ...defaultArgs, type, size })}`,
-              )}
-            `);
-          }),
-        );
-      });
+    describeEach(visualStates, ({ state, size }) => {
+      it(
+        visualDiffDefault.name,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(html`
+            ${repeat(
+              state.multiple ? types : [state.type],
+              (type: string) => html`${notificationTemplate({ ...defaultArgs, type, size })}`,
+            )}
+          `);
+        }),
+      );
     });
-  }
+  });
 });