feat #692: Add loading spinner to Submit button CreateGroupPage

app/create-group-page/page.test.tsx

@@ -4,6 +4,9 @@
 import { render, screen } from '@testing-library/react';
 import CreateGroupPage from './page';
 import { Calendar } from '@/components/Calendar/calendar';
+import userEvent from '@testing-library/user-event';
+
+window.HTMLElement.prototype.scrollIntoView = jest.fn();
 
 jest.mock('next/navigation', () => ({
   useRouter: () => ({
@@ -21,6 +24,29 @@ class MockResizeObserver {
 global.ResizeObserver = MockResizeObserver;
 
 describe('Create Group Page', () => {
+  const setupFormWithValidData = async (user: ReturnType<typeof userEvent.setup>) => {
+    await user.type(screen.getByLabelText(/group name/i), 'Test Group');
+    await user.type(
+      screen.getByLabelText(/group description/i),
+      'Test Description',
+    );
+    await user.click(screen.getAllByRole('radio')[0]);
+
+    // Budget selection
+    await user.click(screen.getByLabelText(/price range/i));
+    await user.click(screen.getAllByRole('option')[0]);
+
+    // Drawing date selection
+    await user.click(screen.getByLabelText(/drawing date/i));
+    const drawingCalendarDays = screen.getAllByRole('gridcell');
+    await user.click(drawingCalendarDays[drawingCalendarDays.length - 2]);
+
+    // Exchange date selection
+    await user.click(screen.getByLabelText(/exchange date/i));
+    const exchangeCalendarDays = screen.getAllByRole('gridcell');
+    await user.click(exchangeCalendarDays[exchangeCalendarDays.length - 1]);
+  };
+
   it('has the first group image selected by default', () => {
     render(<CreateGroupPage />);
 
@@ -86,4 +112,41 @@ describe('Create Group Page', () => {
       expect(tomorrow).not.toBeDisabled();
     });
   });
+
+  describe('Form submission', () => {
+    let mockFetch: jest.Mock;
+    let resolvePromise: (value: any) => void;
+
+    beforeEach(() => {
+      resolvePromise = jest.fn();
+      const pendingPromise = new Promise((resolve) => {
+        resolvePromise = resolve;
+      });
+
+      mockFetch = jest.fn().mockReturnValue(pendingPromise);
+      global.fetch = mockFetch;
+    });
+
+    afterEach(() => {
+      jest.restoreAllMocks();
+    });
+
+    it('disables submit button and shows loading state while submitting form', async () => {
+      render(<CreateGroupPage />);
+      const user = userEvent.setup();
+
+      await setupFormWithValidData(user);
+
+      const submitButton = screen.getByRole('button', {name: /create group/i});
+      await user.click(submitButton);
+
+      expect(submitButton).toBeDisabled();
+      expect(submitButton).toHaveTextContent(/creating/i);
+
+      resolvePromise({
+        ok: true,
+        json: () => Promise.resolve({ id: '1' }),
+      });
+    });
+  });
 });

app/create-group-page/page.tsx

@@ -40,6 +40,8 @@ import {
 import { useRouter } from 'next/navigation';
 import LinkCustom from '@/components/LinkCustom/LinkCustom';
 import Link from 'next/link';
+import { useState } from 'react';
+import { LoadingSpinner } from '@/components/LoadingSpinner/LoadingSpinner';
 
 const priceRanges = [
   { label: '$10 - $20', value: '10-20' },
@@ -79,6 +81,7 @@ const formSchema = z
 
 export default function CreateGroupPage() {
   const router = useRouter();
+  const [isLoading, setLoading] = useState(false);
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -94,6 +97,7 @@ export default function CreateGroupPage() {
 
   async function onSubmit(values: z.infer<typeof formSchema>) {
     try {
+      setLoading(true);
       console.log(values);
       const response = await fetch('/api/gift-exchanges', {
         method: 'POST',
@@ -107,6 +111,8 @@ export default function CreateGroupPage() {
       router.push(`/gift-exchanges/${data.id}`);
     } catch (error) {
       console.error(error);
+    } finally {
+      setLoading(false);
     }
   }
 
@@ -281,7 +287,7 @@ export default function CreateGroupPage() {
                           mode="single"
                           selected={field.value}
                           onSelect={field.onChange}
-                          disabled={[{ before: new Date() }]} 
+                          disabled={[{ before: new Date() }]}
                           initialFocus
                         />
                       </PopoverContent>
@@ -325,7 +331,9 @@ export default function CreateGroupPage() {
                           mode="single"
                           selected={field.value}
                           onSelect={field.onChange}
-                          disabled={[{ before: addDays(new Date(giftDrawingDate), 1) }]}
+                          disabled={[
+                            { before: addDays(new Date(giftDrawingDate), 1) },
+                          ]}
                           initialFocus
                         />
                       </PopoverContent>
@@ -341,12 +349,21 @@ export default function CreateGroupPage() {
                 <Button variant="secondary" className="bg-slate-300" asChild>
                   <Link href="/dashboard">Cancel</Link>
                 </Button>
-                <Button type="submit">Create Group</Button>
+                <Button type="submit" disabled={isLoading}>
+                  {isLoading ? (
+                    <div className='flex items-center gap-2'>
+                      Creating Group
+                      <LoadingSpinner />
+                    </div>
+                  ) : (
+                    'Create Group'
+                  )}
+                </Button>
               </div>
             </form>
           </Form>
         </div>
       </div>
     </div>
   );
-}
+}