From d82945123a67ed258de9d414d826b80c3c5564f0 Mon Sep 17 00:00:00 2001
From: Rafi Arrafif <rafiarrafif05@gmail.com>
Date: Tue, 26 Aug 2025 10:29:48 +0700
Subject: [PATCH] :dizzy: add loading animation

show loading indicator in continue with provider if is pressed and hide indicator if something failed
---
 features/auth/ui/OAuthProviders.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/features/auth/ui/OAuthProviders.tsx b/features/auth/ui/OAuthProviders.tsx
index 02ce4f8..e804d78 100644
--- a/features/auth/ui/OAuthProviders.tsx
+++ b/features/auth/ui/OAuthProviders.tsx
@@ -30,6 +30,8 @@ const OAuthProviders = () => {
     })();
   }, []);
 
+  const [loadingButton, setLoadingButton] = useState(false);
+
   /**
    * Start the authentication process using oAuth by sending the endpoint URL to the backend for processing.
    *
@@ -37,10 +39,13 @@ const OAuthProviders = () => {
    */
   const startOauthProcess = async (providerRequestEndpoint: string) => {
     try {
+      setLoadingButton(true);
+
       (await requestOauthUrl(
         providerRequestEndpoint
       )) as ResponseRequestOauthUrl;
     } catch (err) {
+      setLoadingButton(false);
       console.error(err);
     }
   };
@@ -57,6 +62,7 @@ const OAuthProviders = () => {
               variant="bordered"
               startContent={<Icon icon={provider.icon} />}
               onPress={() => startOauthProcess(provider.req_endpoint)}
+              isLoading={loadingButton}
             >
               Continue with {provider.name}
             </Button>