From ee2c8d098aefc7b839812f8e7f1c251487a4529d Mon Sep 17 00:00:00 2001
From: IshaVenikar <ishavenikar7@gmail.com>
Date: Tue, 8 Oct 2024 12:36:09 +0530
Subject: [PATCH] Display loader for deploy button

---
 .../src/components/projects/create/Configure.tsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/frontend/src/components/projects/create/Configure.tsx b/packages/frontend/src/components/projects/create/Configure.tsx
index 8fa2e049..602ac5ee 100644
--- a/packages/frontend/src/components/projects/create/Configure.tsx
+++ b/packages/frontend/src/components/projects/create/Configure.tsx
@@ -1,8 +1,13 @@
 import { useCallback, useState } from 'react';
 import { useForm, Controller, SubmitHandler } from 'react-hook-form';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+import { useMediaQuery } from 'usehooks-ts';
 import { AuctionData } from 'gql-client';
 
+import {
+  ArrowRightCircleFilledIcon,
+  LoadingIcon,
+} from 'components/shared/CustomIcon';
 import { Heading } from '../../shared/Heading';
 import { Button } from '../../shared/Button';
 import { Select, SelectOption } from 'components/shared/Select';
@@ -34,6 +39,9 @@ const Configure = () => {
 
   const selectedOption = watch('option');
 
+  const isTabletView = useMediaQuery('(min-width: 720px)'); // md:
+  const buttonSize = isTabletView ? { size: 'lg' as const } : {};
+
   const onSubmit: SubmitHandler<ConfigureFormValues> = useCallback(
     async (data) => {
       setIsLoading(true);
@@ -154,8 +162,16 @@ const Configure = () => {
 
         <div>
           <Button
+            {...buttonSize}
             type="submit"
             disabled={isLoading}
+            rightIcon={
+              isLoading ? (
+                <LoadingIcon className="animate-spin" />
+              ) : (
+                <ArrowRightCircleFilledIcon />
+              )
+            }
           >
             {isLoading? 'Deploying' : 'Deploy' }
           </Button>