feat: Add spinner to Toggle component (#3803)

Author: spalmurray-codecov

src/ui/Toggle/Toggle.stories.tsx

@@ -46,3 +46,25 @@ export const DisabledToggle: Story = {
     )
   },
 }
+
+export const LoadingToggle: Story = {
+  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}
+        isLoading={isLoading}
+        {...args}
+        onClick={toggler}
+      />
+    )
+  },
+}

src/ui/Toggle/Toggle.test.tsx

@@ -180,4 +180,88 @@ describe('Toggle', () => {
       expect(button).toHaveAttribute('disabled')
     })
   })
+
+  describe('isLoading behavior', () => {
+    describe('when isLoading is true', () => {
+      it('renders spinner', () => {
+        render(
+          <Toggle
+            label="🐕"
+            dataMarketing="marketing"
+            value={true}
+            disabled={false}
+            isLoading={true}
+            onClick={() => {}}
+          />
+        )
+
+        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', () => {
+      it('does not render spinner', () => {
+        render(
+          <Toggle
+            label="🐕"
+            dataMarketing="marketing"
+            value={true}
+            disabled={false}
+            isLoading={false}
+            onClick={() => {}}
+          />
+        )
+
+        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

@@ -8,6 +8,7 @@ interface ToggleProps {
   label: string
   onClick: () => void
   disabled?: boolean
+  isLoading?: boolean
   dataMarketing: string
 }
 
@@ -16,6 +17,7 @@ function Toggle({
   value = false,
   onClick,
   disabled = false,
+  isLoading = false,
   dataMarketing,
 }: ToggleProps) {
   const ID = uniqueId('toggle')
@@ -24,7 +26,7 @@ function Toggle({
     <div
       data-marketing={`${ID}-${dataMarketing}`}
       onClick={() => {
-        if (!disabled) {
+        if (!disabled && !isLoading) {
           onClick()
         }
       }}
@@ -43,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"
@@ -63,18 +65,31 @@ function Toggle({
           )}
         >
           <div
-            className={cn({
+            className={cn('flex size-5 items-center justify-center', {
               'text-toggle-active': value,
               'text-toggle-inactive': !value && !disabled,
               'text-toggle-disabled': disabled,
             })}
           >
-            <Icon
-              name={value ? 'check' : 'x'}
-              label={value ? 'check' : 'x'}
-              variant="solid"
-              size="flex"
-            />
+            {isLoading ? (
+              <div
+                data-testid="toggle-loading-spinner"
+                className={cn(
+                  'size-4 animate-spin rounded-full border-4 border-white',
+                  {
+                    'border-t-toggle-active': value,
+                    'border-t-toggle-inactive': !value && !disabled,
+                  }
+                )}
+              />
+            ) : (
+              <Icon
+                name={value ? 'check' : 'x'}
+                label={value ? 'check' : 'x'}
+                variant="solid"
+                size="flex"
+              />
+            )}
           </div>
         </span>
       </button>