Исправлен загрузчик на всем экране приложения

cere-io · Jan 13, 2025 · 8e43cc7 · 8e43cc7
1 parent 3d92edf
commit 8e43cc7
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 27 deletions.
diff --git a/src/components/Login/LoginPage.tsx b/src/components/Login/LoginPage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   LoadingButton,
   Stack,
@@ -14,6 +14,8 @@ import {
   Divider,
   styled,
   useTheme,
+  Loading,
+  Logo,
 } from '@cere-wallet/ui';
 import { getGlobalStorage } from '@cere-wallet/storage';
 import * as yup from 'yup';
@@ -30,6 +32,7 @@ import { getTokenWithFacebook, getTokenWithGoogle } from './auth.service';
 import { AppContextBanner } from '../AppContextBanner';
 import { PoweredBy } from './PoweredBy';
 import { TelegramLoginButton } from '~/components';
+import { Box } from '@mui/material';
 
 interface LogInProps {
   variant?: 'signin' | 'signup';
@@ -60,6 +63,7 @@ export const LoginPage = ({ variant = 'signin', loginHint, onRequestLogin }: Log
   const { isGame } = useTheme();
   const contextStore = useAppContextStore();
   const store = useOutletContext<AuthorizePopupStore>();
+  const [loadingTelegram, setLoadingTelegram] = useState(false);
 
   const emailHint = loginHint || searchParams.get('emailHint') || '';
   const skipLoginIntro = Boolean(contextStore.whiteLabel?.skipLoginIntro);
@@ -160,6 +164,11 @@ export const LoginPage = ({ variant = 'signin', loginHint, onRequestLogin }: Log
       console.error('Telegram authorization error');
     }
   };
+
+  const handleOnTelegramLogin = useCallback((val: boolean) => {
+    setLoadingTelegram(val);
+  }, []);
+
   return (
     <Stack
       direction="column"
@@ -170,6 +179,26 @@ export const LoginPage = ({ variant = 'signin', loginHint, onRequestLogin }: Log
       autoComplete="off"
       onSubmit={handleSubmit(onSubmit)}
     >
+      {loadingTelegram && (
+        <Box
+          sx={{
+            zIndex: 3,
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: '#FFF',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          <Loading fullScreen>
+            <Logo />
+          </Loading>
+        </Box>
+      )}
       <Stack direction="row" spacing={1} alignItems="center">
         <Typography variant="h2" flex={1} color={isGame ? '#FFF' : 'text.primary'}>
           {connectScreenMainTitle}
@@ -234,7 +263,7 @@ export const LoginPage = ({ variant = 'signin', loginHint, onRequestLogin }: Log
 
             {SUPPORTED_SOCIAL_LOGINS.includes('telegram') && (
               <div>
-                <TelegramLoginButton dataOnauth={onTelegramAuth} />
+                <TelegramLoginButton dataOnauth={onTelegramAuth} onTelegramLogin={handleOnTelegramLogin} />
               </div>
             )}
           </Stack>

diff --git a/src/components/TelegramLoginButton/TelegramLoginButton.tsx b/src/components/TelegramLoginButton/TelegramLoginButton.tsx
@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types';
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect } from 'react';
 import { IconButton, TelegramIcon } from '@cere/ui';
 import { TELEGRAM_BOT_ID, TELEGRAM_BOT_USERNAME } from '~/constants';
-import CircularProgress from '@mui/material/CircularProgress';
-import { Box } from '@mui/material';
 
 export interface TelegramUser {
   id: number;
@@ -23,6 +21,7 @@ interface Props {
   dataOnauth?: (x: any) => void;
   buttonSize?: 'large' | 'medium' | 'small';
   wrapperProps?: React.HTMLProps<HTMLDivElement>;
+  onTelegramLogin?: (val: boolean) => void;
 }
 
 export interface Options {
@@ -51,8 +50,8 @@ export const TelegramLoginButton: React.FC<Props> = ({
   dataOnauth,
   cornerRadius,
   requestAccess = true,
+  onTelegramLogin,
 }) => {
-  const [loading, setLoading] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -100,39 +99,22 @@ export const TelegramLoginButton: React.FC<Props> = ({
     <div className="mainclass">
       <div className="tg-main">
         <div ref={ref} style={{ display: 'none' }} />
-        <div className="tg-logo1" style={{ position: 'relative' }}>
+        <div className="tg-logo1">
           <IconButton
             size="large"
             variant="outlined"
             onClick={() => {
               window.Telegram.Login.auth({ bot_id: TELEGRAM_BOT_ID }, dataOnauth);
-              setLoading(true);
+              if (onTelegramLogin) {
+                onTelegramLogin(true);
+              }
             }}
-            disabled={loading}
             sx={{
               position: 'relative',
             }}
             type="submit"
           >
             <TelegramIcon />
-            {loading && (
-              <Box
-                sx={{
-                  position: 'absolute',
-                  top: 0,
-                  left: 0,
-                  right: 0,
-                  bottom: 0,
-                  backgroundColor: 'rgba(0, 0, 0, 0.2)',
-                  display: 'flex',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  borderRadius: '50%',
-                }}
-              >
-                <CircularProgress color="inherit" />
-              </Box>
-            )}
           </IconButton>
         </div>
       </div>