fix: Add skeleton for socialSigner loading state

safe-global · Nov 14, 2023 · b21bf1a · b21bf1a
1 parent c0f05eb
commit b21bf1a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git 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: () => <Skeleton variant="rounded" height={42} width="100%" />,
+})
+
 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
@@ -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: () => <Skeleton variant="rounded" height={42} width="100%" />,
+})
 
 const WelcomeLogin = () => {
   const router = useRouter()