W-21190081 Add spinner during OTP verification (#3643)

Author: syadupathi-sf

packages/template-retail-react-app/app/components/otp-auth/index.jsx

@@ -12,6 +12,7 @@ import {
     Button,
     Input,
     SimpleGrid,
+    Spinner,
     Stack,
     Text,
     HStack,
@@ -271,6 +272,17 @@ const OtpAuth = ({
                                 ))}
                             </SimpleGrid>
 
+                            {/* Loading spinner during verification */}
+                            {isVerifying && (
+                                <Spinner
+                                    size="sm"
+                                    color="blue.500"
+                                    role="status"
+                                    aria-live="polite"
+                                    data-testid="otp-verifying-spinner"
+                                />
+                            )}
+
                             {/* Error message */}
                             {error && (
                                 <Text fontSize="sm" color="red.500" textAlign="center">

packages/template-retail-react-app/app/components/otp-auth/index.test.js

@@ -246,6 +246,41 @@ describe('OtpAuth', () => {
             await user.type(otpInputs[7], '8')
             expect(otpInputs[7]).toHaveFocus()
         })
+
+        test('shows spinner while OTP is being verified', async () => {
+            const deferred = {}
+            const verifyingPromise = new Promise((resolve) => {
+                deferred.resolve = resolve
+            })
+            const mockVerify = jest.fn().mockReturnValue(verifyingPromise)
+
+            const user = userEvent.setup()
+            renderWithProviders(
+                <OtpAuth
+                    isOpen={true}
+                    onClose={mockOnClose}
+                    form={mockForm}
+                    handleOtpVerification={mockVerify}
+                    handleSendEmailOtp={mockHandleSendEmailOtp}
+                />
+            )
+
+            expect(screen.queryByTestId('otp-verifying-spinner')).not.toBeInTheDocument()
+
+            const otpInputs = screen.getAllByRole('textbox')
+            fireEvent.paste(otpInputs[0], {
+                clipboardData: {getData: () => '12345678'}
+            })
+
+            await waitFor(() => {
+                expect(screen.getByTestId('otp-verifying-spinner')).toBeInTheDocument()
+            })
+
+            deferred.resolve({success: true})
+            await waitFor(() => {
+                expect(screen.queryByTestId('otp-verifying-spinner')).not.toBeInTheDocument()
+            })
+        })
     })
 
     describe('Keyboard Navigation', () => {