fix: avoid resizeObserver loop warning

sbb-design-systems · Jul 2, 2024 · 6599544 · 6599544
1 parent 0bdfd92
commit 6599544
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 38 deletions.
diff --git 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
@@ -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 })}`,
+            )}
+          `);
+        }),
+      );
     });
-  }
+  });
 });