perf: lazy-load interactive Demo components on faucet page

src/components/ClientOnly.tsx

@@ -0,0 +1,46 @@
+'use client'
+import { Suspense, lazy, type ComponentType } from 'react'
+
+function Placeholder({ minHeight = 200 }: { minHeight?: number }) {
+  return (
+    <div
+      className="flex items-center justify-center rounded-lg border border-gray6 border-dashed text-[14px] text-gray9"
+      style={{ minHeight }}
+    >
+      Loading…
+    </div>
+  )
+}
+
+export function clientOnly<T extends Record<string, unknown>>(
+  load: () => Promise<{ default: ComponentType<T> }>,
+  options?: { minHeight?: number },
+) {
+  const Component = lazy(load)
+
+  return function ClientOnly(props: T) {
+    return (
+      <Suspense fallback={<Placeholder minHeight={options?.minHeight} />}>
+        <Component {...props} />
+      </Suspense>
+    )
+  }
+}
+
+export function clientOnlyNamed<T extends Record<string, unknown>>(
+  load: () => Promise<Record<string, ComponentType<T>>>,
+  name: string,
+  options?: { minHeight?: number },
+) {
+  const Component = lazy(() =>
+    load().then((mod) => ({ default: mod[name] as ComponentType<T> })),
+  )
+
+  return function ClientOnly(props: T) {
+    return (
+      <Suspense fallback={<Placeholder minHeight={options?.minHeight} />}>
+        <Component {...props} />
+      </Suspense>
+    )
+  }
+}

src/components/guides/AccountsDemo.tsx

@@ -0,0 +1,13 @@
+'use client'
+import * as Demo from './Demo'
+import * as Step from './steps'
+
+export default function AccountsDemo() {
+  return (
+    <Demo.Container name="Make a Payment" footerVariant="source" src="tempoxyz/accounts/tree/main/examples/basic">
+      <Step.Connect stepNumber={1} />
+      <Step.AddFunds stepNumber={2} />
+      <Step.SendPayment stepNumber={3} last />
+    </Demo.Container>
+  )
+}

src/components/guides/AccountsSignInDemo.tsx

@@ -0,0 +1,11 @@
+'use client'
+import * as Demo from './Demo'
+import { AccountsSignIn } from './AccountsSignIn'
+
+export default function AccountsSignInDemo() {
+  return (
+    <Demo.Container name="Tempo Wallet" footerVariant="source" src="tempoxyz/accounts/tree/main/examples/basic">
+      <AccountsSignIn />
+    </Demo.Container>
+  )
+}

src/components/guides/ConnectToWalletsDemo.tsx

@@ -0,0 +1,15 @@
+'use client'
+import * as Demo from './Demo'
+import * as Step from './steps'
+
+export default function ConnectToWalletsDemo() {
+  return (
+    <Demo.Container
+      name="Connect to Wallets"
+      footerVariant="source"
+      src="tempoxyz/examples/tree/main/examples/accounts"
+    >
+      <Step.ConnectWallet stepNumber={1} last />
+    </Demo.Container>
+  )
+}

src/components/guides/EmbedPasskeysDemo.tsx

@@ -0,0 +1,11 @@
+'use client'
+import * as Demo from './Demo'
+import { EmbedPasskeys } from './EmbedPasskeys'
+
+export default function EmbedPasskeysDemo() {
+  return (
+    <Demo.Container name="Passkey Accounts" footerVariant="source" src="tempoxyz/accounts/tree/main/examples/domain-bound-webauthn">
+      <EmbedPasskeys />
+    </Demo.Container>
+  )
+}

src/components/guides/FaucetWalletDemo.tsx

@@ -0,0 +1,28 @@
+'use client'
+import * as Demo from './Demo'
+import * as Step from './steps'
+import * as Token from './tokens'
+
+export default function FaucetWalletDemo({ variant }: { variant: 'wallet' | 'address' }) {
+  if (variant === 'address') {
+    return (
+      <Demo.Container name="Fund an address" footerVariant={undefined}>
+        <Step.AddFundsToOthers stepNumber={1} last />
+      </Demo.Container>
+    )
+  }
+
+  return (
+    <Demo.Container
+      name="Connect and fund your wallet"
+      footerVariant="balances"
+      tokens={[Token.pathUsd, Token.alphaUsd, Token.betaUsd, Token.thetaUsd]}
+      balanceSource="wallet"
+    >
+      <Step.ConnectWallet stepNumber={1} />
+      <Step.AddFundsToWallet stepNumber={2} />
+      <Step.AddTokensToWallet stepNumber={3} />
+      <Step.SetFeeToken stepNumber={4} last />
+    </Demo.Container>
+  )
+}

src/pages/accounts/index.mdx

@@ -4,10 +4,14 @@ description: Set up the Tempo Accounts SDK to create, manage, and interact with
 ---
 
 import { Cards, Card } from 'vocs'
-import * as Demo from '../../components/guides/Demo.tsx'
-import * as Step from '../../components/guides/steps'
+import { clientOnly } from '../../components/ClientOnly.tsx'
 import IconGitHub from '~icons/simple-icons/github'
 
+export const AccountsDemo = clientOnly(
+  () => import('../../components/guides/AccountsDemo.tsx'),
+  { minHeight: 180 },
+)
+
 # Getting Started
 
 ## Overview
@@ -18,11 +22,7 @@ The Tempo Accounts SDK is a TypeScript library for applications and wallets to c
 
 Try sign in and make a payment on Tempo using the Accounts SDK.
 
-<Demo.Container name="Make a Payment" footerVariant="source" src="tempoxyz/accounts/tree/main/examples/basic">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.SendPayment stepNumber={3} last />
-</Demo.Container>
+<AccountsDemo />
 
 ### Quick Prompt
 

src/pages/guide/use-accounts/add-funds.mdx

@@ -3,11 +3,14 @@ description: Get test stablecoins on Tempo Testnet using the faucet. Request pat
 mipd: true
 ---
 
-import * as Demo from '../../../components/guides/Demo.tsx'
-import * as Step from '../../../components/guides/steps'
-import * as Token from '../../../components/guides/tokens'
+import { clientOnly } from '../../../components/ClientOnly.tsx'
 import { Tabs, Tab } from 'vocs'
 
+export const FaucetWalletDemo = clientOnly(
+  () => import('../../../components/guides/FaucetWalletDemo.tsx'),
+  { minHeight: 280 },
+)
+
 # Add Funds to Your Balance
 
 Get test tokens to build on Tempo testnet.
@@ -20,12 +23,7 @@ Get test tokens to build on Tempo testnet.
 Connect your wallet to receive test stablecoins directly.
 
 <div className="h-6"/>
-<Demo.Container name="Connect and fund your wallet" footerVariant="balances" tokens={[Token.pathUsd, Token.alphaUsd, Token.betaUsd, Token.thetaUsd]} balanceSource="wallet">
-  <Step.ConnectWallet stepNumber={1} />
-  <Step.AddFundsToWallet stepNumber={2} />
-  <Step.AddTokensToWallet stepNumber={3} />
-  <Step.SetFeeToken stepNumber={4} last />
-</Demo.Container>
+<FaucetWalletDemo variant="wallet" />
 
   </Tab>
   <Tab title="Fund an address">
@@ -34,9 +32,7 @@ Connect your wallet to receive test stablecoins directly.
 Send test stablecoins to any address.
 
 <div className="h-6"/>
-<Demo.Container name="Fund an address">
-  <Step.AddFundsToOthers stepNumber={1} last />
-</Demo.Container>
+<FaucetWalletDemo variant="address" />
 
   </Tab>
   <Tab title="cURL request">

src/pages/guide/use-accounts/connect-to-wallets.mdx

@@ -3,9 +3,18 @@ description: Connect your application to EVM-compatible wallets like MetaMask on
 mipd: true
 ---
 
-import * as Demo from '../../../components/guides/Demo.tsx'
-import * as Step from '../../../components/guides/steps'
-import { ConnectWallet } from '../../../components/ConnectWallet.tsx'
+import { clientOnly, clientOnlyNamed } from '../../../components/ClientOnly.tsx'
+
+export const ConnectWallet = clientOnlyNamed(
+  () => import('../../../components/ConnectWallet.tsx'),
+  'ConnectWallet',
+  { minHeight: 48 },
+)
+
+export const ConnectToWalletsDemo = clientOnly(
+  () => import('../../../components/guides/ConnectToWalletsDemo.tsx'),
+  { minHeight: 120 },
+)
 
 # Connect to Wallets
 
@@ -16,13 +25,7 @@ You can use these wallets when building your application on Tempo.
 
 This guide will walk you through how to set up your application to connect to wallets.
 
-<Demo.Container 
-  name="Connect to Wallets" 
-  footerVariant="source" 
-  src="tempoxyz/examples/tree/main/examples/accounts"
->
-  <Step.ConnectWallet stepNumber={1} last />
-</Demo.Container>
+<ConnectToWalletsDemo />
 
 ## Wagmi Setup
 

src/pages/guide/use-accounts/embed-passkeys.mdx

@@ -3,8 +3,24 @@ description: Create domain-bound passkey accounts on Tempo using WebAuthn for se
 ---
 
 import { Cards, Card } from 'vocs'
-import * as Demo from '../../../components/guides/Demo.tsx'
-import { EmbedPasskeys, SignInButtons } from '../../../components/guides/EmbedPasskeys.tsx'
+import { clientOnly, clientOnlyNamed } from '../../../components/ClientOnly.tsx'
+
+export const EmbedPasskeysDemo = clientOnly(
+  () => import('../../../components/guides/EmbedPasskeysDemo.tsx'),
+  { minHeight: 120 },
+)
+
+export const EmbedPasskeys = clientOnlyNamed(
+  () => import('../../../components/guides/EmbedPasskeys.tsx'),
+  'EmbedPasskeys',
+  { minHeight: 48 },
+)
+
+export const SignInButtons = clientOnlyNamed(
+  () => import('../../../components/guides/EmbedPasskeys.tsx'),
+  'SignInButtons',
+  { minHeight: 48 },
+)
 
 # Embed Passkey Accounts
 
@@ -28,9 +44,7 @@ This means your users won't be able to use the same passkey account on other app
 
 By the end of this guide, you will be able to embed passkey accounts into your application.
 
-<Demo.Container name="Passkey Accounts" footerVariant="source" src="tempoxyz/accounts/tree/main/examples/domain-bound-webauthn">
-  <EmbedPasskeys />
-</Demo.Container>
+<EmbedPasskeysDemo />
 
 ## Steps
 

src/pages/guide/use-accounts/embed-tempo-wallet.mdx

@@ -3,8 +3,18 @@ description: Embed the Tempo Wallet dialog into your application for a universal
 ---
 
 import { Cards, Card } from 'vocs'
-import * as Demo from '../../../components/guides/Demo.tsx'
-import { AccountsSignIn } from '../../../components/guides/AccountsSignIn.tsx'
+import { clientOnly, clientOnlyNamed } from '../../../components/ClientOnly.tsx'
+
+export const AccountsSignInDemo = clientOnly(
+  () => import('../../../components/guides/AccountsSignInDemo.tsx'),
+  { minHeight: 120 },
+)
+
+export const AccountsSignIn = clientOnlyNamed(
+  () => import('../../../components/guides/AccountsSignIn.tsx'),
+  'AccountsSignIn',
+  { minHeight: 48 },
+)
 
 # Embed Tempo Wallet
 
@@ -28,9 +38,7 @@ If you want a quick integration with a full-featured wallet, use the [Tempo Wall
 
 By the end of this guide, you will be able to embed the Tempo Wallet into your application.
 
-<Demo.Container name="Tempo Wallet" footerVariant="source" src="tempoxyz/accounts/tree/main/examples/basic">
-  <AccountsSignIn />
-</Demo.Container>
+<AccountsSignInDemo />
 
 ## Steps
 

src/pages/quickstart/connection-details.mdx

@@ -3,8 +3,13 @@ description: Connect to Tempo using browser wallets, CLI tools, or direct RPC en
 mipd: true
 ---
 
-import * as Demo from '../../components/guides/Demo.tsx'
-import { ConnectWallet } from '../../components/ConnectWallet.tsx'
+import { clientOnlyNamed } from '../../components/ClientOnly.tsx'
+
+export const ConnectWallet = clientOnlyNamed(
+  () => import('../../components/ConnectWallet.tsx'),
+  'ConnectWallet',
+  { minHeight: 48 },
+)
 
 # Connect to the Network
 

src/pages/quickstart/faucet.mdx

@@ -3,11 +3,13 @@ description: Get free test stablecoins on Tempo Testnet. Connect your wallet or
 mipd: true
 ---
 
-import * as Demo from '../../components/guides/Demo.tsx'
-import * as Step from '../../components/guides/steps'
-import * as Token from '../../components/guides/tokens'
+import { clientOnly } from '../../components/ClientOnly.tsx'
 import { Tabs, Tab } from 'vocs'
 
+export const FaucetWalletDemo = clientOnly(
+  () => import('../../components/guides/FaucetWalletDemo.tsx'),
+  { minHeight: 280 },
+)
 
 # Faucet
 
@@ -21,12 +23,7 @@ Get test stablecoins on Tempo testnet.
 Connect your wallet to receive test stablecoins directly.
 
 <div className="h-6"/>
-<Demo.Container name="Connect and fund your wallet" footerVariant="balances" tokens={[Token.pathUsd, Token.alphaUsd, Token.betaUsd, Token.thetaUsd]} balanceSource="wallet">
-  <Step.ConnectWallet stepNumber={1} />
-  <Step.AddFundsToWallet stepNumber={2} />
-  <Step.AddTokensToWallet stepNumber={3} />
-  <Step.SetFeeToken stepNumber={4} last />
-</Demo.Container>
+<FaucetWalletDemo variant="wallet" />
 
   </Tab>
   <Tab title="Fund an address">
@@ -35,9 +32,7 @@ Connect your wallet to receive test stablecoins directly.
 Send test stablecoins to any address.
 
 <div className="h-6"/>
-<Demo.Container name="Fund an address">
-  <Step.AddFundsToOthers stepNumber={1} last />
-</Demo.Container>
+<FaucetWalletDemo variant="address" />
 
   </Tab>
   <Tab title="cURL request">

src/pages/quickstart/integrate-tempo.mdx

@@ -2,8 +2,13 @@
 description: Build on Tempo Testnet. Connect to the network, explore SDKs, and follow guides for accounts, payments, and stablecoin issuance.
 ---
 
-import * as Demo from '../../components/guides/Demo.tsx'
-import { ConnectWallet } from '../../components/ConnectWallet.tsx'
+import { clientOnlyNamed } from '../../components/ClientOnly.tsx'
+
+export const ConnectWallet = clientOnlyNamed(
+  () => import('../../components/ConnectWallet.tsx'),
+  'ConnectWallet',
+  { minHeight: 48 },
+)
 import TempoTxProperties from '../../snippets/tempo-tx-properties.mdx'
 import { Cards, Card } from 'vocs'
 

src/pages/quickstart/tokenlist.mdx

@@ -3,7 +3,13 @@ title: Tempo Token List Registry
 ---
 import { Callout } from 'vocs'
 
-import { TokenListDemo } from '../../components/TokenList.tsx'
+import { clientOnlyNamed } from '../../components/ClientOnly.tsx'
+
+export const TokenListDemo = clientOnlyNamed(
+  () => import('../../components/TokenList.tsx'),
+  'TokenListDemo',
+  { minHeight: 200 },
+)
 
 # Tempo Token List Registry