Refactor navigation to horizontal top header and improve loading states

src/app/transactions/layout.tsx → src/app/(dashboard)/layout.tsx

@@ -7,5 +7,5 @@ type Props = {
 }
 
 export default function Layout({ children }: Props) {
-    return <DashboardLayout disableTimelines>{children}</DashboardLayout>
+    return <DashboardLayout>{children}</DashboardLayout>
 }

src/app/(dashboard)/page.tsx

@@ -0,0 +1,46 @@
+'use client'
+import { lazy } from 'react'
+import { ChartSkeleton, VisibilityChart } from 'src/components/skeletons'
+import { LatestTransactions } from 'src/components/transactions/latest-transactions'
+import CustomWidgets from 'src/components/widgets/custom-widgets'
+import { DashboardContent } from 'src/layouts/dashboard'
+
+// Lazy load chart components for better performance
+const InflowOutflowCharts = lazy(() => import('src/components/chart/inflow-outflow-charts'))
+const TokenVolumePieChart = lazy(() => import('src/components/chart/pie-charts'))
+const GasUsageChart = lazy(() => import('src/components/chart/gas-usage-chart'))
+import BridgePerformanceChart from 'src/components/chart/bridge-performance-chart'
+import CumulativeNetInflow from 'src/components/chart/cumulative-net-inflow'
+import TopTokens from 'src/components/widgets/top-tokens'
+
+// ----------------------------------------------------------------------
+
+export default function Page() {
+    return (
+        <DashboardContent maxWidth="xl">
+            <CustomWidgets />
+
+            <CumulativeNetInflow />
+            <BridgePerformanceChart />
+            <TopTokens />
+
+            {/* Latest Transactions - also use visibility system */}
+            <VisibilityChart fallback={<ChartSkeleton title="Latest Transactions" />}>
+                <LatestTransactions />
+            </VisibilityChart>
+
+            {/* Bottom charts - render only when visible */}
+            <VisibilityChart fallback={<ChartSkeleton title="Inflow/Outflow Charts" />}>
+                <InflowOutflowCharts />
+            </VisibilityChart>
+
+            <VisibilityChart fallback={<ChartSkeleton title="Gas Usage" />}>
+                <GasUsageChart />
+            </VisibilityChart>
+
+            {/* <VisibilityChart fallback={<ChartSkeleton title="Token Volume" />}> */}
+            <TokenVolumePieChart />
+            {/* </VisibilityChart> */}
+        </DashboardContent>
+    )
+}

src/app/profile/page.tsx → src/app/(dashboard)/profile/page.tsx

@@ -1,4 +1,6 @@
 'use client'
+
+import { Suspense } from 'react'
 import {
     Box,
     Button,
@@ -28,6 +30,7 @@ import {
 import '@mysten/dapp-kit/dist/index.css'
 import '@rainbow-me/rainbowkit/styles.css'
 import { useState as useReactState } from 'react'
+import { SplashScreen } from 'src/components/loading-screen'
 
 type WalletActionButtonProps = {
     label: string
@@ -93,7 +96,7 @@ function WalletActionButton({
 const SUI_LOGO_PATH = '/assets/icons/brands/sui.svg'
 const ETH_LOGO_PATH = '/assets/icons/brands/eth.svg'
 
-export default function Page() {
+function ProfileContent() {
     const searchParams = useSearchParams()
 
     const [suiAddress, setSuiAddress] = useState(searchParams?.get('suiAddress') || '')
@@ -335,3 +338,11 @@ export default function Page() {
         </DashboardContent>
     )
 }
+
+export default function Page() {
+    return (
+        <Suspense fallback={<SplashScreen />}>
+            <ProfileContent />
+        </Suspense>
+    )
+}

src/auth/guard/auth-guard.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect, useCallback } from 'react'
+import { useState, useEffect, useCallback, Suspense } from 'react'
 
 import { paths } from 'src/routes/paths'
 import { useRouter, usePathname, useSearchParams } from 'src/routes/hooks'
@@ -17,7 +17,7 @@ type Props = {
     children: React.ReactNode
 }
 
-export function AuthGuard({ children }: Props) {
+function AuthGuardContent({ children }: Props) {
     const router = useRouter()
 
     const pathname = usePathname()
@@ -74,3 +74,11 @@ export function AuthGuard({ children }: Props) {
 
     return <>{children}</>
 }
+
+export function AuthGuard({ children }: Props) {
+    return (
+        <Suspense fallback={<SplashScreen />}>
+            <AuthGuardContent>{children}</AuthGuardContent>
+        </Suspense>
+    )
+}

src/auth/guard/guest-guard.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, Suspense } from 'react'
 
 import { useRouter, useSearchParams } from 'src/routes/hooks'
 
@@ -16,7 +16,7 @@ type Props = {
     children: React.ReactNode
 }
 
-export function GuestGuard({ children }: Props) {
+function GuestGuardContent({ children }: Props) {
     const router = useRouter()
 
     const searchParams = useSearchParams()
@@ -51,3 +51,11 @@ export function GuestGuard({ children }: Props) {
 
     return <>{children}</>
 }
+
+export function GuestGuard({ children }: Props) {
+    return (
+        <Suspense fallback={<SplashScreen />}>
+            <GuestGuardContent>{children}</GuestGuardContent>
+        </Suspense>
+    )
+}

src/components/loading-screen/index.ts

@@ -1,3 +1 @@
 export * from './splash-screen'
-
-export * from './loading-screen'

src/components/logo/logo.tsx

@@ -5,7 +5,6 @@ import type { BoxProps } from '@mui/material/Box'
 import { forwardRef } from 'react'
 
 import Box from '@mui/material/Box'
-import { useTheme } from '@mui/material/styles'
 
 import { RouterLink } from 'src/routes/components'
 
@@ -16,68 +15,41 @@ import { CONFIG } from 'src/config-global'
 
 export type LogoProps = BoxProps & {
     href?: string
-    isSingle?: boolean
     disableLink?: boolean
-    isLarge?: boolean
+    single?: boolean // Use small/single logo
 }
 
 export const Logo = forwardRef<HTMLDivElement, LogoProps>(
-    (
-        {
-            isLarge,
-            width,
-            href = '/',
-            height,
-            isSingle = true,
-            disableLink = false,
-            className,
-            sx,
-            ...other
-        },
-        ref,
-    ) => {
-        const theme = useTheme()
-
-        const fullLogo = (
-            <Box
-                alt="Full logo"
-                component="img"
-                src={`${CONFIG.assetsDir}/sui.svg`}
-                sx={{
-                    alignSelf: 'center',
-                    placeSelf: 'center',
-                }}
-            />
-        )
-
-        const singleLogo = (
-            <img
-                alt="Single logo"
-                src={`/assets/icons/brands/single-logo.svg`}
-                style={{ width: 200, height: 35, marginTop: 55 }}
-            />
-        )
+    ({ href = '/', disableLink = false, single = false, className, sx, ...other }, ref) => {
+        const logoSrc = single
+            ? '/assets/icons/brands/single-logo.svg'
+            : `${CONFIG.assetsDir}/sui.svg`
 
         return (
             <Box
                 ref={ref}
-                component={RouterLink}
-                href={href}
+                component={disableLink ? 'div' : RouterLink}
+                href={disableLink ? undefined : href}
                 className={logoClasses.root.concat(className ? ` ${className}` : '')}
                 aria-label="Logo"
                 sx={{
-                    // ...baseSize,
                     flexShrink: 0,
                     display: 'inline-flex',
-                    verticalAlign: 'middle',
+                    alignItems: 'center',
                     ...(disableLink && { pointerEvents: 'none' }),
                     ...sx,
-                    width: '150px',
-                    height: '150px',
                 }}
                 {...other}
             >
-                {isLarge ? fullLogo : singleLogo}
+                <Box
+                    alt="Sui Bridge Analytics"
+                    component="img"
+                    src={logoSrc}
+                    sx={{
+                        height: single ? 28 : 32,
+                        width: 'auto',
+                    }}
+                />
             </Box>
         )
     },

src/components/skeletons/index.ts

@@ -1,3 +1,4 @@
 export { default as ChartSkeleton } from './chart-skeleton'
 export { default as VisibilityChart } from './visibility-chart'
 export { BridgePerformanceChartLoading } from './bridge-performance-chart-loading'
+export { TransactionDetailSkeleton } from './transaction-detail-skeleton'