From b21bf1ad543a8ee4e8a96384a9a636fe4c2a09ef Mon Sep 17 00:00:00 2001 From: Usame Algan Date: Tue, 14 Nov 2023 16:12:35 +0100 Subject: [PATCH] fix: Add skeleton for socialSigner loading state --- src/components/common/ConnectWallet/WalletDetails.tsx | 7 +++++-- src/components/welcome/WelcomeLogin/index.tsx | 6 ++++-- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/common/ConnectWallet/WalletDetails.tsx b/src/components/common/ConnectWallet/WalletDetails.tsx index ca8627db8d..6a2ad4caf7 100644 --- a/src/components/common/ConnectWallet/WalletDetails.tsx +++ b/src/components/common/ConnectWallet/WalletDetails.tsx @@ -1,10 +1,13 @@ -import { Box, Divider, SvgIcon, Typography } from '@mui/material' +import { Box, Divider, Skeleton, SvgIcon, Typography } from '@mui/material' import dynamic from 'next/dynamic' import type { ReactElement } from 'react' import LockIcon from '@/public/images/common/lock.svg' -const SocialSigner = dynamic(() => import('@/components/common/SocialSigner')) +const SocialSigner = dynamic(() => import('@/components/common/SocialSigner'), { + loading: () => , +}) + import WalletLogin from '@/components/welcome/WelcomeLogin/WalletLogin' const WalletDetails = ({ onConnect }: { onConnect: () => void }): ReactElement => { diff --git a/src/components/welcome/WelcomeLogin/index.tsx b/src/components/welcome/WelcomeLogin/index.tsx index 8163d2436a..9fcc869f44 100644 --- a/src/components/welcome/WelcomeLogin/index.tsx +++ b/src/components/welcome/WelcomeLogin/index.tsx @@ -1,7 +1,7 @@ import { AppRoutes } from '@/config/routes' import { useHasFeature } from '@/hooks/useChains' import { FEATURES } from '@/utils/chains' -import { Paper, SvgIcon, Typography, Divider, Link, Box } from '@mui/material' +import { Paper, SvgIcon, Typography, Divider, Link, Box, Skeleton } from '@mui/material' import SafeLogo from '@/public/images/logo-text.svg' import dynamic from 'next/dynamic' import css from './styles.module.css' @@ -11,7 +11,9 @@ import { LOAD_SAFE_EVENTS, CREATE_SAFE_EVENTS } from '@/services/analytics/event import Track from '@/components/common/Track' import { trackEvent } from '@/services/analytics' -const SocialSigner = dynamic(() => import('@/components/common/SocialSigner')) +const SocialSigner = dynamic(() => import('@/components/common/SocialSigner'), { + loading: () => , +}) const WelcomeLogin = () => { const router = useRouter()