🐛 Fix loading

apps/embedded-catalog/react/src/lib/index.tsx

@@ -1,9 +1,10 @@
 import config from '@/helpers/config';
-import { getDescription } from '@/helpers/utils';
+import {  getDescription } from '@/helpers/utils';
 import useLinkedUserMutation from '@/hooks/mutations/useLinkedUserMutation';
 import useLinkedUser from '@/hooks/queries/useLinkedUserId';
 import useOAuth from '@/hooks/useOAuth';
 import { useEffect, useState } from 'react';
+import { TailSpin } from  'react-loader-spinner'
 
 
 interface RemoteUserInfo {
@@ -20,7 +21,8 @@ interface ProviderCardProp {
 const ProviderCard = ({name, projectId, linkedUserIdOrRemoteUserInfo}: ProviderCardProp) => {
   const [providerClicked, setProviderClicked] = useState(false);
   const [originId, setOriginId] = useState("")
-
+  const [loading, setLoading] = useState(false)
+
   const { mutate } = useLinkedUserMutation();
   const {data: linkedUser} = useLinkedUser(originId);
 
@@ -49,40 +51,67 @@ const ProviderCard = ({name, projectId, linkedUserIdOrRemoteUserInfo}: ProviderC
   });
 
   const onWindowClose = () => {
+    setLoading(false);
+    return;
   }
 
   useEffect(() => {
-    if (providerClicked && isReady) {
+    if (loading && providerClicked && isReady) {
       open(onWindowClose);
+      return;
     }
-  }, [providerClicked, isReady, open]);
+  }, [providerClicked, isReady, open, loading]);
 
 
   const handleClick = () => {    
+    setLoading(true);
     setProviderClicked(true);
+    return;
   };
 
   return (
       <div 
       className="max-w-sm p-6 bg-white border-[0.007em] border-gray-200 rounded-lg shadow dark:bg-zinc-800 hover:border-zinc-900 hover:border-[0.1em] transition-colors duration-200"
       >
+
           <div className="text-center flex items-center">
-            <img src={`public/assets/crm/${name}_logo.png`} width={"35px"} className="pb-5 mr-3 rounded-sm"/>
+            <img src={`public/assets/crm/${name}_logo.png`} width={"30px"} className="mx-auto mb-4 w-12 h-12 rounded-xl"/>
             <a href="#">
-              <h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-900 dark:text-white">Integrate with {name}</h5>
+              <h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-900 dark:text-white pl-4">Integrate with {name}</h5>
           </a>
           </div>
 
+        {!loading ? 
+          <>
           <p className="mb-3 font-normal text-gray-500 dark:text-gray-400">{getDescription(name.toLowerCase())}</p>
           <a 
             href="#" className="inline-flex items-center text-indigo-600 hover:underline"
             onClick={handleClick}
           >
-              Integrate in one click
+              Connect in one click
               <svg className="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
                   <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"/>
               </svg>
           </a>
+          </> 
+        : 
+         <>
+          <p className="mb-3 font-normal text-gray-500 dark:text-gray-400">Continue in {name} </p>
+          <div className='flex justify-center items-center'>
+          <TailSpin
+            height="40"
+            width="70"
+            color="white"
+            ariaLabel="tail-spin-loading"
+            radius="1"
+            wrapperStyle={{}}
+            wrapperClass=""
+            visible={true}
+          />
+          </div>
+          </>
+
+        }
       </div> 
   )
 };