fix: ui bugs

src/features/authentication/components/AuthenticationSteps/GoogleAuthenticationV2.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import type {
   LoginOrSignUpWithGoogleRequest,
   LoginResult,
@@ -12,7 +12,7 @@ import { loginOrSignUpWithGoogle } from '../../api/authorizationAPI';
 import { useApi } from '@/hooks/useApi';
 import { useToast } from '@rkheftan/harmony-ui';
 import { useTranslation } from 'react-i18next';
-import { Box } from '@mui/material';
+import { Box, Button } from '@mui/material';
 
 interface GoogleAuthenticationV2Props {
   authFactory: AuthFactory;
@@ -29,6 +29,7 @@ export const GoogleAuthenticationV2 = ({
   const toast = useToast();
   const { t } = useTranslation('authentication');
   const { execute: loginWithGoogleCall } = useApi(loginOrSignUpWithGoogle);
+  const [isGoogleLoaded, setIsGoogleLoaded] = useState(false);
 
   const googleBtnRef = useRef<HTMLDivElement>(null);
   const renderedRef = useRef(false);
@@ -74,6 +75,8 @@ export const GoogleAuthenticationV2 = ({
     const initializeGoogle = () => {
       if (!window.google) return;
 
+      setIsGoogleLoaded(true);
+
       google.accounts.id.initialize({
         client_id: import.meta.env.VITE_GOOGLE_CLIENT_ID,
         callback: handleCredentialResponse,
@@ -85,8 +88,9 @@ export const GoogleAuthenticationV2 = ({
         type: 'standard', // The standard "Sign in with Google" button
         text: 'signin_with', // Text: "Sign in with Google"
         shape: 'rectangular', // Matches your MUI button shape
-        width: '456', // Set a width (Google caps this at 400px)
+        width: '400', // Set a width (Google caps this at 400px)
         logo_alignment: 'left',
+
         height: '44',
       });
 
@@ -116,6 +120,7 @@ export const GoogleAuthenticationV2 = ({
           minHeight: 44,
         }}
       >
+        {!isGoogleLoaded && <Button variant="outlined" loading />}
         <div ref={googleBtnRef} id="google-signin-button"></div>
       </Box>
     </>