From d08a2e215bff8a005a8504b2233c90417de7f23d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 27 Mar 2023 16:45:41 -0500
Subject: [PATCH] AuthorizeRejectButtons: add a loading animation

---
 .../components/authorize-reject-buttons.tsx   | 42 ++++++++++++-------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/app/soapbox/components/authorize-reject-buttons.tsx b/app/soapbox/components/authorize-reject-buttons.tsx
index 10ab2bbf2..81d25a63d 100644
--- a/app/soapbox/components/authorize-reject-buttons.tsx
+++ b/app/soapbox/components/authorize-reject-buttons.tsx
@@ -68,22 +68,32 @@ const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize
     default:
       return (
         <HStack space={3} alignItems='center'>
-          <IconButton
-            src={state === 'rejecting' ? require('@tabler/icons/player-stop-filled.svg') : require('@tabler/icons/x.svg')}
-            onClick={handleReject}
-            theme='seamless'
-            className='h-10 w-10 items-center justify-center border-2 border-danger-600/10 hover:border-danger-600'
-            iconClassName='h-6 w-6 text-danger-600'
-            disabled={state === 'authorizing'}
-          />
-          <IconButton
-            src={state === 'authorizing' ? require('@tabler/icons/player-stop-filled.svg') : require('@tabler/icons/check.svg')}
-            onClick={handleAuthorize}
-            theme='seamless'
-            className='h-10 w-10 items-center justify-center border-2 border-primary-500/10 hover:border-primary-500'
-            iconClassName='h-6 w-6 text-primary-500'
-            disabled={state === 'rejecting'}
-          />
+          <div className='relative'>
+            <IconButton
+              src={state === 'rejecting' ? require('@tabler/icons/player-stop-filled.svg') : require('@tabler/icons/x.svg')}
+              onClick={handleReject}
+              theme='seamless'
+              className='h-10 w-10 items-center justify-center border-2 border-danger-600/10 hover:border-danger-600'
+              iconClassName='h-6 w-6 text-danger-600'
+              disabled={state === 'authorizing'}
+            />
+            {(state === 'rejecting') && (
+              <div className='pointer-events-none absolute inset-0 h-10 w-10 animate-spin rounded-full border-2 border-transparent border-t-danger-600' />
+            )}
+          </div>
+          <div className='relative'>
+            <IconButton
+              src={state === 'authorizing' ? require('@tabler/icons/player-stop-filled.svg') : require('@tabler/icons/check.svg')}
+              onClick={handleAuthorize}
+              theme='seamless'
+              className='h-10 w-10 items-center justify-center border-2 border-primary-500/10 hover:border-primary-500'
+              iconClassName='h-6 w-6 text-primary-500'
+              disabled={state === 'rejecting'}
+            />
+            {(state === 'authorizing') && (
+              <div className='pointer-events-none absolute inset-0 h-10 w-10 animate-spin rounded-full border-2 border-transparent border-t-primary-500' />
+            )}
+          </div>
         </HStack>
       );
   }