From 2591f1966461a815bf1d9375aaa4a9f8d7cfa5f4 Mon Sep 17 00:00:00 2001
From: Rajdeep Chandra <rajdeepchandra@Rajdeeps-MacBook-Pro-2.local>
Date: Tue, 17 Sep 2024 12:05:45 +0530
Subject: [PATCH 1/2] chore: fix for flakyness in ci

---
 packages/overlay/stories/index.ts | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/overlay/stories/index.ts b/packages/overlay/stories/index.ts
index e843d1543c..c6b0eb8e7b 100644
--- a/packages/overlay/stories/index.ts
+++ b/packages/overlay/stories/index.ts
@@ -14,7 +14,7 @@ import { html, TemplateResult } from '@spectrum-web-components/base';
 import type { Overlay } from '@spectrum-web-components/overlay';
 
 function nextFrame(): Promise<void> {
-    return new Promise((res) => requestAnimationFrame(() => res()));
+    return new Promise((resolve) => requestAnimationFrame(() => resolve()));
 }
 
 class IsOverlayOpen extends HTMLElement {
@@ -22,28 +22,25 @@ class IsOverlayOpen extends HTMLElement {
 
     constructor() {
         super();
-        this.readyPromise = new Promise((res) => {
-            this.ready = res;
+        this.readyPromise = new Promise((resolve) => {
+            this.ready = resolve;
             this.setup();
         });
     }
 
     async setup(): Promise<void> {
-        await nextFrame();
-
+        await nextFrame(); // Ensure we wait for the first frame
         document.addEventListener('sp-opened', this.handleOpened);
     }
 
     handleOpened = async (event: Event): Promise<void> => {
         const overlay = event.target as Overlay;
-        const actions = [nextFrame(), overlay.updateComplete];
 
-        await Promise.all(actions);
-        // Focus happens _after_ `sp-opened` by at least two frames.
-        await nextFrame();
-        await nextFrame();
-        await nextFrame();
-        await nextFrame();
+        // Ensure that the overlay has updated
+        await overlay.updateComplete;
+
+        // Use a small delay to ensure stability after the update
+        await new Promise((resolve) => setTimeout(resolve, 100)); // 100ms delay
 
         this.ready(true);
     };

From 617f62c2cc17fcb084e795e3aa64392dc9630060 Mon Sep 17 00:00:00 2001
From: Rajdeep Chandra <rajdeepchandra@Rajdeeps-MacBook-Pro-2.local>
Date: Tue, 17 Sep 2024 12:32:49 +0530
Subject: [PATCH 2/2] chore: fix for flakyness in ci

---
 packages/overlay/stories/index.ts | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/packages/overlay/stories/index.ts b/packages/overlay/stories/index.ts
index c6b0eb8e7b..f93fbdc073 100644
--- a/packages/overlay/stories/index.ts
+++ b/packages/overlay/stories/index.ts
@@ -13,10 +13,6 @@ governing permissions and limitations under the License.
 import { html, TemplateResult } from '@spectrum-web-components/base';
 import type { Overlay } from '@spectrum-web-components/overlay';
 
-function nextFrame(): Promise<void> {
-    return new Promise((resolve) => requestAnimationFrame(() => resolve()));
-}
-
 class IsOverlayOpen extends HTMLElement {
     ready!: (value: boolean | PromiseLike<boolean>) => void;
 
@@ -29,19 +25,17 @@ class IsOverlayOpen extends HTMLElement {
     }
 
     async setup(): Promise<void> {
-        await nextFrame(); // Ensure we wait for the first frame
+        // Add a listener for the 'sp-opened' event, which opens the overlay
         document.addEventListener('sp-opened', this.handleOpened);
     }
 
     handleOpened = async (event: Event): Promise<void> => {
         const overlay = event.target as Overlay;
 
-        // Ensure that the overlay has updated
+        // Wait for the overlay to fully finish updating
         await overlay.updateComplete;
 
-        // Use a small delay to ensure stability after the update
-        await new Promise((resolve) => setTimeout(resolve, 100)); // 100ms delay
-
+        // Resolve the ready promise
         this.ready(true);
     };