fix: Loading state and mobile view

src/components/dashboard/Overview/Overview.tsx

@@ -10,7 +10,6 @@ import type { ReactElement } from 'react'
 import { useContext, useMemo } from 'react'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
-import styled from '@emotion/styled'
 import { Box, Button, Divider, Grid, Skeleton, Typography } from '@mui/material'
 import { Card, WidgetBody, WidgetContainer } from '../styled'
 import useSafeInfo from '@/hooks/useSafeInfo'
@@ -24,42 +23,22 @@ import AddIcon from '@mui/icons-material/Add'
 import ArrowIconNW from '@/public/images/common/arrow-top-right.svg'
 import ArrowIconSE from '@/public/images/common/arrow-se.svg'
 
-const IdenticonContainer = styled.div`
-  position: relative;
-  margin-bottom: var(--space-2);
-`
-
-const StyledText = styled(Typography)`
-  margin-top: 8px;
-  font-size: 24px;
-  font-weight: bold;
-`
-
-const NetworkLabelContainer = styled.div`
-  position: absolute;
-  top: var(--space-3);
-  right: var(--space-3);
-
-  & span {
-    bottom: auto;
-  }
-`
-
 const ValueSkeleton = () => <Skeleton variant="text" width={20} />
 
 const SkeletonOverview = (
   <Card>
     <Grid container>
       <Grid item xs={12}>
-        <IdenticonContainer>
+        <Box mb={2}>
           <Skeleton variant="text" width={100} height={21} />
-          <Skeleton variant="text" width={120} height={30} />
-        </IdenticonContainer>
-        <Divider sx={{ mb: 1 }} />
+          <Skeleton variant="text" width={120} height={40} />
+        </Box>
 
-        <NetworkLabelContainer>
+        <Box position="absolute" right="24px" top="24px">
           <Skeleton variant="text" width="80px" />
-        </NetworkLabelContainer>
+        </Box>
+
+        <Divider sx={{ mb: '12px' }} />
       </Grid>
     </Grid>
     <Grid container>
@@ -87,8 +66,8 @@ const SkeletonOverview = (
       </Grid>
     </Grid>
     <Grid container mt={3} gap={1}>
-      <Skeleton variant="rounded" width="100px" height="35px" />
-      <Skeleton variant="rounded" width="100px" height="35px" />
+      <Skeleton variant="rounded" width="115px" height="40px" />
+      <Skeleton variant="rounded" width="115px" height="40px" />
     </Grid>
   </Card>
 )
@@ -98,7 +77,7 @@ const Overview = (): ReactElement => {
   const router = useRouter()
   const { safeLoading, safeLoaded } = useSafeInfo()
   const { balances, loading: balancesLoading } = useVisibleBalances()
-  const [nfts] = useCollectibles()
+  const [nfts, , nftsLoading] = useCollectibles()
   const chain = useCurrentChain()
   const { chainId } = chain || {}
   const { setTxFlow } = useContext(TxModalContext)
@@ -125,6 +104,7 @@ const Overview = (): ReactElement => {
   const nftsCount = useMemo(() => (nfts ? `${nfts.next ? '>' : ''}${nfts.results.length}` : ''), [nfts])
 
   const isInitialState = !safeLoaded && !safeLoading
+  const isLoading = safeLoading || balancesLoading || nftsLoading || isInitialState
 
   const handleOnSend = () => {
     setTxFlow(<NewTxMenu />, undefined, false)
@@ -138,10 +118,10 @@ const Overview = (): ReactElement => {
       </Typography>
 
       <WidgetBody>
-        {safeLoading || isInitialState ? (
+        {isLoading ? (
           SkeletonOverview
         ) : (
-          <Card>
+          <Card style={{ display: 'flex', flexDirection: 'column' }}>
             <Grid container pb={2}>
               <Grid item>
                 <Typography variant="body2" color="primary.light">
@@ -203,8 +183,8 @@ const Overview = (): ReactElement => {
                 </Link>
               </Grid>
             </Grid>
-            <Grid item>
-              <Box display="flex" mt={3} gap={1}>
+            <Grid item mt="auto">
+              <Box display="flex" mt={3} gap={1} flexWrap="wrap">
                 {rampSafeApp && (
                   <Link
                     href={{