diff --git a/src/components/dashboard/Overview/Overview.tsx b/src/components/dashboard/Overview/Overview.tsx
index dfe7b20b9e..2a2e5caeb4 100644
--- a/src/components/dashboard/Overview/Overview.tsx
+++ b/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 = () =>
const SkeletonOverview = (
-
+
-
-
-
+
+
-
+
-
+
+
+
@@ -87,8 +66,8 @@ const SkeletonOverview = (
-
-
+
+
)
@@ -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(, undefined, false)
@@ -138,10 +118,10 @@ const Overview = (): ReactElement => {
- {safeLoading || isInitialState ? (
+ {isLoading ? (
SkeletonOverview
) : (
-
+
@@ -203,8 +183,8 @@ const Overview = (): ReactElement => {
-
-
+
+
{rampSafeApp && (