Toggle switch debounce (#2078)

primer · Jun 16, 2023 · 6bd439d · 6bd439d
1 parent 2d35263
commit 6bd439d
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git a/.changeset/sixty-ears-play.md b/.changeset/sixty-ears-play.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+ToggleSwitch: Remove @debounce annotation in favor of a boolean flag to prevent confusing screen reader output
diff --git a/app/components/primer/alpha/toggle_switch.ts b/app/components/primer/alpha/toggle_switch.ts
@@ -1,12 +1,13 @@
 import {controller, target} from '@github/catalyst'
-import {debounce} from '@github/mini-throttle/decorators'
 
 @controller
 class ToggleSwitchElement extends HTMLElement {
   @target switch: HTMLElement
   @target loadingSpinner: HTMLElement
   @target errorIcon: HTMLElement
 
+  private toggling = false
+
   get src(): string | null {
     const src = this.getAttribute('src')
     if (!src) return null
@@ -31,14 +32,18 @@ class ToggleSwitchElement extends HTMLElement {
     return this.src != null
   }
 
-  @debounce(300)
   async toggle() {
+    if (this.toggling) return
+
+    this.toggling = true
+
     if (this.isDisabled()) {
       return
     }
 
     if (!this.isRemote()) {
       this.performToggle()
+      this.toggling = false
       return
     }
 
@@ -57,6 +62,8 @@ class ToggleSwitchElement extends HTMLElement {
       }
 
       return
+    } finally {
+      this.toggling = false
     }
 
     this.setSuccessState()

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -51,7 +51,6 @@
     "@github/details-menu-element": "^1.0.12",
     "@github/image-crop-element": "^5.0.0",
     "@github/include-fragment-element": "^6.1.1",
-    "@github/mini-throttle": "^2.1.0",
     "@github/relative-time-element": "^4.0.0",
     "@github/tab-container-element": "^3.1.2",
     "@oddbird/popover-polyfill": "^0.2.1",