Merge branch 'add-animation-to-auth-rej-buttons' into 'develop'

Add animation to AuthorizeRejectButton comp

See merge request soapbox-pub/soapbox!2396

app/soapbox/components/authorize-reject-buttons.tsx

@@ -14,6 +14,23 @@ interface IAuthorizeRejectButtons {
 const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize, onReject, countdown }) => {
   const [state, setState] = useState<'authorizing' | 'rejecting' | 'authorized' | 'rejected' | 'pending'>('pending');
   const timeout = useRef<NodeJS.Timeout>();
+  const interval = useRef<ReturnType<typeof setInterval>>();
+
+  const [progress, setProgress] = useState<number>(0);
+
+  const startProgressInterval = () => {
+    let startValue = 1;
+    interval.current = setInterval(() => {
+      startValue++;
+      const newValue = startValue * 3.6; // get to 360 (deg)
+      setProgress(newValue);
+
+      if (newValue >= 360) {
+        clearInterval(interval.current as NodeJS.Timeout);
+        setProgress(0);
+      }
+    }, (countdown as number) / 100);
+  };
 
   function handleAction(
     present: 'authorizing' | 'rejecting',
@@ -21,6 +38,9 @@ const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize
     action: () => Promise<unknown> | unknown,
   ): void {
     if (state === present) {
+      if (interval.current) {
+        clearInterval(interval.current);
+      }
       if (timeout.current) {
         clearTimeout(timeout.current);
       }
@@ -37,6 +57,7 @@ const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize
       if (typeof countdown === 'number') {
         setState(present);
         timeout.current = setTimeout(doAction, countdown);
+        startProgressInterval();
       } else {
         doAction();
       }
@@ -46,11 +67,28 @@ const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize
   const handleAuthorize = async () => handleAction('authorizing', 'authorized', onAuthorize);
   const handleReject = async () => handleAction('rejecting', 'rejected', onReject);
 
+  const renderStyle = (selectedState: typeof state) => {
+    if (state === 'authorizing' && selectedState === 'authorizing') {
+      return {
+        background: `conic-gradient(rgb(var(--color-primary-500)) ${progress}deg, rgb(var(--color-primary-500) / 0.1) 0deg)`,
+      };
+    } else if (state === 'rejecting' && selectedState === 'rejecting') {
+      return {
+        background: `conic-gradient(rgb(var(--color-danger-600)) ${progress}deg, rgb(var(--color-danger-600) / 0.1) 0deg)`,
+      };
+    }
+
+    return {};
+  };
+
   useEffect(() => {
     return () => {
       if (timeout.current) {
         clearTimeout(timeout.current);
       }
+      if (interval.current) {
+        clearInterval(interval.current);
+      }
     };
   }, []);
 
@@ -72,6 +110,7 @@ const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize
             action={handleReject}
             isLoading={state === 'rejecting'}
             disabled={state === 'authorizing'}
+            style={renderStyle('rejecting')}
           />
           <AuthorizeRejectButton
             theme='primary'
@@ -79,6 +118,7 @@ const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize
             action={handleAuthorize}
             isLoading={state === 'authorizing'}
             disabled={state === 'rejecting'}
+            style={renderStyle('authorizing')}
           />
         </HStack>
       );
@@ -105,33 +145,34 @@ interface IAuthorizeRejectButton {
   action(): void
   isLoading?: boolean
   disabled?: boolean
+  style: React.CSSProperties
 }
 
-const AuthorizeRejectButton: React.FC<IAuthorizeRejectButton> = ({ theme, icon, action, isLoading, disabled }) => {
+const AuthorizeRejectButton: React.FC<IAuthorizeRejectButton> = ({ theme, icon, action, isLoading, style, disabled }) => {
   return (
     <div className='relative'>
+      <div
+        style={style}
+        className={
+          clsx({
+            'flex h-11 w-11 items-center justify-center rounded-full': true,
+            'bg-danger-600/10': theme === 'danger',
+            'bg-primary-500/10': theme === 'primary',
+          })
+        }
+      >
         <IconButton
           src={isLoading ? require('@tabler/icons/player-stop-filled.svg') : icon}
           onClick={action}
           theme='seamless'
-        className={clsx('h-10 w-10 items-center justify-center border-2', {
-          'border-primary-500/10 hover:border-primary-500': theme === 'primary',
-          'border-danger-600/10 hover:border-danger-600': theme === 'danger',
-        })}
+          className='h-10 w-10 items-center justify-center bg-gray-900'
           iconClassName={clsx('h-6 w-6', {
             'text-primary-500': theme === 'primary',
             'text-danger-600': theme === 'danger',
           })}
           disabled={disabled}
         />
-      {(isLoading) && (
-        <div
-          className={clsx('pointer-events-none absolute inset-0 h-10 w-10 animate-spin rounded-full border-2 border-transparent', {
-            'border-t-primary-500': theme === 'primary',
-            'border-t-danger-600': theme === 'danger',
-          })}
-        />
-      )}
+      </div>
     </div>
   );
 };