Prevent clicking toggle while isLoading is true

Author: spalmurray-codecov

src/ui/Toggle/Toggle.stories.tsx

@@ -48,13 +48,23 @@ export const DisabledToggle: Story = {
 }
 
 export const LoadingToggle: Story = {
-  args: {
-    isLoading: true,
-  },
   render: (args) => {
     const [toggle, setToggle] = useState(false)
+    const [isLoading, setIsLoading] = useState(false)
+    const toggler = async () => {
+      setIsLoading(true)
+      setTimeout(() => {
+        setToggle(!toggle)
+        setIsLoading(false)
+      }, 2000)
+    }
     return (
-      <Toggle value={toggle} {...args} onClick={() => setToggle(!toggle)} />
+      <Toggle
+        value={toggle}
+        isLoading={isLoading}
+        {...args}
+        onClick={toggler}
+      />
     )
   },
 }

src/ui/Toggle/Toggle.test.tsx

@@ -198,6 +198,29 @@ describe('Toggle', () => {
         const spinner = screen.getByTestId('toggle-loading-spinner')
         expect(spinner).toBeInTheDocument()
       })
+
+      describe('and is clicked', () => {
+        it('does not fire onClick', async () => {
+          const { user } = setup()
+          const mockFn = vi.fn()
+          render(
+            <Toggle
+              label="🐕"
+              dataMarketing="marketing"
+              value={false}
+              disabled={false}
+              onClick={mockFn}
+              isLoading={true}
+            />
+          )
+
+          const button = screen.getByRole('button')
+
+          await user.click(button)
+
+          expect(mockFn).not.toHaveBeenCalled()
+        })
+      })
     })
 
     describe('when isLoading is false', () => {
@@ -216,6 +239,29 @@ describe('Toggle', () => {
         const spinner = screen.queryByTestId('toggle-loading-spinner')
         expect(spinner).not.toBeInTheDocument()
       })
+
+      describe('and is clicked', () => {
+        it('does fire onClick', async () => {
+          const { user } = setup()
+          const mockFn = vi.fn()
+          render(
+            <Toggle
+              label="🐕"
+              dataMarketing="marketing"
+              value={false}
+              disabled={false}
+              onClick={mockFn}
+              isLoading={false}
+            />
+          )
+
+          const button = screen.getByRole('button')
+
+          await user.click(button)
+
+          expect(mockFn).toHaveBeenCalled()
+        })
+      })
     })
   })
 })

src/ui/Toggle/Toggle.tsx

@@ -26,7 +26,7 @@ function Toggle({
     <div
       data-marketing={`${ID}-${dataMarketing}`}
       onClick={() => {
-        if (!disabled) {
+        if (!disabled && !isLoading) {
           onClick()
         }
       }}
@@ -45,7 +45,7 @@ function Toggle({
             'bg-toggle-active': value,
             'bg-toggle-inactive': !value && !disabled,
             'bg-toggle-disabled': disabled,
-            'cursor-not-allowed': disabled,
+            'cursor-not-allowed': disabled || isLoading,
           }
         )}
         aria-pressed="false"