feat: dynamically import pages

src/app/PageClient.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import * as React from 'react';
+
+import { DEFAULT_BLOCKS_LIST_LIMIT, DEFAULT_LIST_LIMIT_SMALL } from '../common/constants/constants';
+import { useGlobalContext } from '../common/context/useAppContext';
+import { TxListTabs } from '../features/txs-list/tabs/TxListTabs';
+import { Flex } from '../ui/Flex';
+import { Grid } from '../ui/Grid';
+import { useColorMode } from '../ui/hooks/useColorMode';
+import { SkeletonBlockList } from './_components/BlockList/SkeletonBlockList';
+import { PageTitle } from './_components/PageTitle';
+import { Stats } from './_components/Stats/Stats';
+
+const BlocksList = dynamic(() => import('./_components/BlockList').then(mod => mod.BlocksList), {
+  loading: () => <SkeletonBlockList />,
+  ssr: false,
+});
+
+export default function Home() {
+  const { activeNetwork } = useGlobalContext();
+  return (
+    <>
+      <PageTitle data-test="homepage-title">Stacks Explorer</PageTitle>
+      {!activeNetwork.isSubnet && <Stats />}
+      <Grid
+        gap="7"
+        width="full"
+        gridTemplateColumns={['100%', '100%', 'minmax(0, 0.6fr) minmax(0, 0.4fr)']}
+      >
+        <TxListTabs limit={DEFAULT_LIST_LIMIT_SMALL} />
+        <BlocksList limit={DEFAULT_BLOCKS_LIST_LIMIT} />
+      </Grid>
+    </>
+  );
+}

src/app/address/[principal]/PageClient.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import * as React from 'react';
+
+import { UnlockingScheduleModal } from '../../../common/components/modals/unlocking-schedule';
+import { useSuspenseAccountBalance } from '../../../common/queries/useAccountBalance';
+import { useAddressNonces } from '../../../common/queries/useAddressNonces';
+import { hasTokenBalance } from '../../../common/utils/accounts';
+import { AddressTxListTabs } from '../../../features/txs-list/tabs/AddressTxListTabs';
+import { Stack } from '../../../ui/components';
+import { PageTitle } from '../../_components/PageTitle';
+import { AddressSummary } from './AddressSummary';
+import { StxBalance } from './StxBalance';
+import { TokenBalanceCard } from './TokenBalanceCard';
+import { Wrapper } from './Wrapper';
+
+export default function AddressPage({ params: { principal } }: any) {
+  const { data: balance } = useSuspenseAccountBalance(principal, { refetchOnWindowFocus: true });
+  const { data: nonces } = useAddressNonces({ address: principal });
+
+  const hasTokenBalances = hasTokenBalance(balance);
+
+  return (
+    <>
+      <PageTitle>Address details</PageTitle>
+      <Wrapper>
+        <Stack gap={8}>
+          <AddressSummary
+            principal={principal}
+            hasTokenBalances={hasTokenBalances}
+            balances={balance}
+            lastExecutedTxNonce={nonces?.last_executed_tx_nonce}
+          />
+          <AddressTxListTabs address={principal} />
+        </Stack>
+        {balance && (
+          <Stack gap={8}>
+            <StxBalance address={principal} />
+            <TokenBalanceCard address={principal} />
+          </Stack>
+        )}
+      </Wrapper>
+      <UnlockingScheduleModal balance={balance} />
+    </>
+  );
+}

src/app/address/[principal]/page.tsx

@@ -1,47 +1,13 @@
 'use client';
 
+import dynamic from 'next/dynamic';
 import * as React from 'react';
 
-import { UnlockingScheduleModal } from '../../../common/components/modals/unlocking-schedule';
-import { useSuspenseAccountBalance } from '../../../common/queries/useAccountBalance';
-import { useAddressNonces } from '../../../common/queries/useAddressNonces';
-import { hasTokenBalance } from '../../../common/utils/accounts';
-import { AddressTxListTabs } from '../../../features/txs-list/tabs/AddressTxListTabs';
-import { Flex, Stack } from '../../../ui/components';
-import { PageTitle } from '../../_components/PageTitle';
-import { AddressSummary } from './AddressSummary';
-import { StxBalance } from './StxBalance';
-import { TokenBalanceCard } from './TokenBalanceCard';
-import { Wrapper } from './Wrapper';
-import Loading from './loading';
+import Skeleton from './skeleton';
 
-export default function AddressPage({ params: { principal } }: any) {
-  const { data: balance } = useSuspenseAccountBalance(principal, { refetchOnWindowFocus: true });
-  const { data: nonces } = useAddressNonces({ address: principal });
+const Page = dynamic(() => import('./PageClient'), {
+  loading: () => <Skeleton />,
+  ssr: false,
+});
 
-  const hasTokenBalances = hasTokenBalance(balance);
-
-  return (
-    <>
-      <PageTitle>Address details</PageTitle>
-      <Wrapper>
-        <Stack gap={8}>
-          <AddressSummary
-            principal={principal}
-            hasTokenBalances={hasTokenBalances}
-            balances={balance}
-            lastExecutedTxNonce={nonces?.last_executed_tx_nonce}
-          />
-          <AddressTxListTabs address={principal} />
-        </Stack>
-        {balance && (
-          <Stack gap={8}>
-            <StxBalance address={principal} />
-            <TokenBalanceCard address={principal} />
-          </Stack>
-        )}
-      </Wrapper>
-      <UnlockingScheduleModal balance={balance} />
-    </>
-  );
-}
+export default Page;

src/app/address/[principal]/loading.tsx → src/app/address/[principal]/skeleton.tsx

@@ -1,5 +1,5 @@
 import { SkeletonPageWithTagsAndTwoColumns } from '../../../common/components/loaders/skeleton-transaction';
 
-export default function Loading() {
+export default function Skeleton() {
   return <SkeletonPageWithTagsAndTwoColumns />;
 }

src/app/block/[hash]/PageClient.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import * as React from 'react';
+
+import { BtcStxBlockLinks } from '../../../common/components/BtcStxBlockLinks';
+import { KeyValueHorizontal } from '../../../common/components/KeyValueHorizontal';
+import { Section } from '../../../common/components/Section';
+import { Timestamp } from '../../../common/components/Timestamp';
+import { TwoColumnPage } from '../../../common/components/TwoColumnPage';
+import { Value } from '../../../common/components/Value';
+import '../../../common/components/loaders/skeleton-text';
+import { useSuspenseBlockByHash } from '../../../common/queries/useBlockByHash';
+import { SkeletonTxsList } from '../../../features/txs-list/SkeletonTxsList';
+import { Box, Flex, Grid } from '../../../ui/components';
+import { PageTitle } from '../../_components/PageTitle';
+import { TowColLayout } from '../../_components/TwoColLayout';
+import { BlockBtcAnchorBlockCard } from './BlockBtcAnchorBlockCard';
+
+const BlockTxsList = dynamic(
+  () => import('./tx-lists/BlockTxsList').then(mod => mod.BlockTxsList),
+  {
+    loading: () => (
+      <Section title={'Transactions'}>
+        <SkeletonTxsList />
+      </Section>
+    ),
+    ssr: false,
+  }
+);
+
+export default function BlockPage({ params: { hash } }: any) {
+  const { data: block } = useSuspenseBlockByHash(hash, { refetchOnWindowFocus: true });
+  const title = (block && `Block #${block.height.toLocaleString()}`) || '';
+  return (
+    <>
+      <PageTitle>{title}</PageTitle>
+      <TowColLayout>
+        <Section title="Summary">
+          <KeyValueHorizontal label={'Hash'} value={<Value>{hash}</Value>} copyValue={hash} />
+          {block && (
+            <>
+              <KeyValueHorizontal
+                label={'Block height'}
+                value={
+                  <BtcStxBlockLinks
+                    btcBlockHeight={block.burn_block_height}
+                    stxBlockHeight={block.height}
+                    stxBlockHash={block.hash}
+                  />
+                }
+              />
+              <KeyValueHorizontal
+                label={'Mined'}
+                value={<Timestamp ts={block.burn_block_time} />}
+              />
+              <KeyValueHorizontal
+                label={'Transactions'}
+                value={<Value>{block.txs.length}</Value>}
+              />
+            </>
+          )}
+        </Section>
+        <BlockBtcAnchorBlockCard />
+      </TowColLayout>
+      <BlockTxsList blockHash={hash} />
+    </>
+  );
+}

src/app/block/[hash]/page.tsx

@@ -3,67 +3,11 @@
 import dynamic from 'next/dynamic';
 import * as React from 'react';
 
-import { BtcStxBlockLinks } from '../../../common/components/BtcStxBlockLinks';
-import { KeyValueHorizontal } from '../../../common/components/KeyValueHorizontal';
-import { Section } from '../../../common/components/Section';
-import { Timestamp } from '../../../common/components/Timestamp';
-import { TwoColumnPage } from '../../../common/components/TwoColumnPage';
-import { Value } from '../../../common/components/Value';
-import '../../../common/components/loaders/skeleton-text';
-import { useSuspenseBlockByHash } from '../../../common/queries/useBlockByHash';
-import { SkeletonTxsList } from '../../../features/txs-list/SkeletonTxsList';
-import { Box, Flex, Grid } from '../../../ui/components';
-import { PageTitle } from '../../_components/PageTitle';
-import { TowColLayout } from '../../_components/TwoColLayout';
-import { BlockBtcAnchorBlockCard } from './BlockBtcAnchorBlockCard';
+import Skeleton from './skeleton';
 
-const BlockTxsList = dynamic(
-  () => import('./tx-lists/BlockTxsList').then(mod => mod.BlockTxsList),
-  {
-    loading: () => (
-      <Section title={'Transactions'}>
-        <SkeletonTxsList />
-      </Section>
-    ),
-    ssr: false,
-  }
-);
+const Page = dynamic(() => import('./PageClient'), {
+  loading: () => <Skeleton />,
+  ssr: false,
+});
 
-export default function BlockPage({ params: { hash } }: any) {
-  const { data: block } = useSuspenseBlockByHash(hash, { refetchOnWindowFocus: true });
-  const title = (block && `Block #${block.height.toLocaleString()}`) || '';
-  return (
-    <>
-      <PageTitle>{title}</PageTitle>
-      <TowColLayout>
-        <Section title="Summary">
-          <KeyValueHorizontal label={'Hash'} value={<Value>{hash}</Value>} copyValue={hash} />
-          {block && (
-            <>
-              <KeyValueHorizontal
-                label={'Block height'}
-                value={
-                  <BtcStxBlockLinks
-                    btcBlockHeight={block.burn_block_height}
-                    stxBlockHeight={block.height}
-                    stxBlockHash={block.hash}
-                  />
-                }
-              />
-              <KeyValueHorizontal
-                label={'Mined'}
-                value={<Timestamp ts={block.burn_block_time} />}
-              />
-              <KeyValueHorizontal
-                label={'Transactions'}
-                value={<Value>{block.txs.length}</Value>}
-              />
-            </>
-          )}
-        </Section>
-        <BlockBtcAnchorBlockCard />
-      </TowColLayout>
-      <BlockTxsList blockHash={hash} />
-    </>
-  );
-}
+export default Page;

src/app/block/[hash]/loading.tsx → src/app/block/[hash]/skeleton.tsx

@@ -2,6 +2,6 @@
 
 import { SkeletonPageWithTwoColumns } from '../../../common/components/loaders/skeleton-transaction';
 
-export default function Loading() {
+export default function Skeleton() {
   return <SkeletonPageWithTwoColumns />;
 }

src/app/blocks/PageClient.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import * as React from 'react';
+
+import { SkeletonBlockList } from '../../common/components/loaders/skeleton-text';
+import { PageTitle } from '../_components/PageTitle';
+
+const BlocksList = dynamic(() => import('../_components/BlockList').then(mod => mod.BlocksList), {
+  loading: () => <SkeletonBlockList />,
+  ssr: false,
+});
+
+const BlocksPage: NextPage = () => {
+  return (
+    <>
+      <PageTitle>Blocks</PageTitle>
+      <BlocksList />
+    </>
+  );
+};
+
+export default BlocksPage;

src/app/blocks/page.tsx

@@ -1,26 +1,13 @@
 'use client';
 
-import type { NextPage } from 'next';
 import dynamic from 'next/dynamic';
 import * as React from 'react';
 
-import { SkeletonBlockList } from '../../common/components/loaders/skeleton-text';
-import { Flex } from '../../ui/components';
-import { PageTitle } from '../_components/PageTitle';
-import Loading from './loading';
+import Skeleton from './skeleton';
 
-const BlocksList = dynamic(() => import('../_components/BlockList').then(mod => mod.BlocksList), {
-  loading: () => <SkeletonBlockList />,
+const Page = dynamic(() => import('./PageClient'), {
+  loading: () => <Skeleton />,
   ssr: false,
 });
 
-const BlocksPage: NextPage = () => {
-  return (
-    <>
-      <PageTitle>Blocks</PageTitle>
-      <BlocksList />
-    </>
-  );
-};
-
-export default BlocksPage;
+export default Page;

src/app/blocks/loading.tsx → src/app/blocks/skeleton.tsx

@@ -3,15 +3,14 @@
 import React from 'react';
 
 import { SkeletonBlockList } from '../../common/components/loaders/skeleton-text';
-import { Flex } from '../../ui/Flex';
-import { Skeleton } from '../../ui/Skeleton';
+import { Skeleton as SkeletonElement } from '../../ui/Skeleton';
 import { PageTitle } from '../_components/PageTitle';
 
-export default function Loading() {
+export default function Skeleton() {
   return (
     <>
       <PageTitle>
-        <Skeleton width={'400px'} height={'43px'} />
+        <SkeletonElement width={'400px'} height={'43px'} />
       </PageTitle>
       <SkeletonBlockList />
     </>