From 89dd46272035bc3dc4086b410bc80676b532dd4b Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 2 Jan 2025 10:02:10 -0500
Subject: [PATCH] backport SL-2318

---
 docs/docs/resources/changelog.md |  1 +
 src/components/option/option.ts  | 19 ++++++++++++-------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md
index 21f637e6e..68f6f8ce8 100644
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -14,6 +14,7 @@ During the alpha period, things might break! We take breaking changes very serio
 
 # Next
 
+- Improved performance of `<wa-select>` when using a large number of options
 - Updated the Japanese translation
 
 ## 3.0.0-alpha.7
diff --git a/src/components/option/option.ts b/src/components/option/option.ts
index d1872e386..8f7cdca11 100644
--- a/src/components/option/option.ts
+++ b/src/components/option/option.ts
@@ -36,6 +36,7 @@ export default class WaOption extends WebAwesomeElement {
 
   // @ts-expect-error - Controller is currently unused
   private readonly localize = new LocalizeController(this);
+  private isInitialized = false;
 
   @query('.label') defaultSlot: HTMLSlotElement;
 
@@ -60,13 +61,17 @@ export default class WaOption extends WebAwesomeElement {
   }
 
   private handleDefaultSlotChange() {
-    // When the label changes, tell the controller to update
-    customElements.whenDefined('wa-select').then(() => {
-      const controller = this.closest('wa-select');
-      if (controller) {
-        controller.handleDefaultSlotChange();
-      }
-    });
+    if (this.isInitialized) {
+      // When the label changes, tell the controller to update
+      customElements.whenDefined('wa-select').then(() => {
+        const controller = this.closest('wa-select');
+        if (controller) {
+          controller.handleDefaultSlotChange();
+        }
+      });
+    } else {
+      this.isInitialized = true;
+    }
   }
 
   private handleMouseEnter() {