diff --git a/packages/ccip-react-components/lib/components/Loader.tsx b/packages/ccip-react-components/lib/components/Loader.tsx
new file mode 100644
index 0000000..fc92096
--- /dev/null
+++ b/packages/ccip-react-components/lib/components/Loader.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const Loader: React.FC = () => {
+  return (
+    <div className="flex justify-center items-center p-2">
+      <div className="h-5 w-5 animate-spin rounded-full border-2 border-t-transparent border-white" />
+    </div>
+  );
+};
diff --git a/packages/ccip-react-components/lib/components/SendButton.tsx b/packages/ccip-react-components/lib/components/SendButton.tsx
index 657b4d8..31dc672 100644
--- a/packages/ccip-react-components/lib/components/SendButton.tsx
+++ b/packages/ccip-react-components/lib/components/SendButton.tsx
@@ -13,6 +13,7 @@ import {
   useWriteContract,
 } from 'wagmi';
 import { Button } from '@/components/ui/button';
+import { Loader } from '@/components/Loader';
 import { cn } from '@/utils';
 import { Error } from '@/components/Error';
 import { useRouters } from '@/hooks/useRouters';
@@ -43,7 +44,6 @@ export function SendButton({
     feeAmount,
     feeTokenBalance,
   } = useAppContext();
-
   const { data: walletClient } = useWalletClient();
   const { address, chain } = useAccount();
 
@@ -198,7 +198,7 @@ export function SendButton({
             })
           }
         >
-          Approve LINK
+          {approveFeeIsPending || waitForFeeAllowanceIsLoading ? <Loader /> : 'Approve LINK'}
         </Button>
       </>
     );
@@ -233,7 +233,7 @@ export function SendButton({
             })
           }
         >
-          Approve
+          {approveTokenIsPending ? <Loader /> : 'Approve'}
         </Button>
       </>
     );
@@ -273,7 +273,7 @@ export function SendButton({
           })
         }
       >
-        Send
+        {transferIsPending ? <Loader /> : 'Send'}
       </Button>
     </>
   );