perf: lazy load faucet demos

src/components/guides/AddFundsAddressDemo.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import Providers from '../Providers'
+import * as Demo from './Demo'
+import { AddFundsToOthers } from './steps/payments/AddFundsToOthers.tsx'
+
+export function AddFundsAddressDemo() {
+  return (
+    <Providers>
+      <Demo.Container footerVariant={undefined} name="Fund an address">
+        <AddFundsToOthers stepNumber={1} last />
+      </Demo.Container>
+    </Providers>
+  )
+}

src/components/guides/AddFundsDemoLoader.tsx

@@ -0,0 +1,90 @@
+'use client'
+
+import * as React from 'react'
+
+const loadAddressDemo = () =>
+  import('./AddFundsAddressDemo').then((mod) => ({ default: mod.AddFundsAddressDemo }))
+
+const loadWalletDemo = () =>
+  import('./AddFundsWalletDemo').then((mod) => ({ default: mod.AddFundsWalletDemo }))
+
+const AddressDemo = React.lazy(loadAddressDemo)
+const WalletDemo = React.lazy(loadWalletDemo)
+
+function LoadDemoCard(props: {
+  description: string
+  load: () => Promise<unknown>
+  loadLabel: string
+  title: string
+  Demo: React.ComponentType
+}) {
+  const { Demo, description, load, loadLabel, title } = props
+  const [isLoaded, setIsLoaded] = React.useState(false)
+
+  return (
+    <div className="divide-y divide-gray4 rounded border border-gray4">
+      <header className="flex h-[44px] items-center px-4">
+        <div className="flex items-center gap-1.5">
+          <h4 className="font-normal text-[14px] text-gray12 leading-none -tracking-[1%]">
+            {title}
+          </h4>
+          <span className="flex h-[19px] items-center justify-center rounded-[30px] bg-accentTint px-1.5 text-center font-medium text-[9px] text-accent uppercase leading-none tracking-[2%]">
+            demo
+          </span>
+        </div>
+      </header>
+      <div className="p-4">
+        {isLoaded ? (
+          <React.Suspense
+            fallback={<p className="text-[14px] text-gray10 -tracking-[2%]">Loading demo...</p>}
+          >
+            <Demo />
+          </React.Suspense>
+        ) : (
+          <div className="space-y-4">
+            <p className="text-[14px] text-gray11 -tracking-[2%]">
+              {description} Load the interactive demo only when you want to use it.
+            </p>
+            <button
+              className="rounded-full bg-accent px-4 py-2 font-medium text-[14px] text-white -tracking-[2%]"
+              type="button"
+              onClick={() => setIsLoaded(true)}
+              onFocus={() => {
+                void load()
+              }}
+              onMouseEnter={() => {
+                void load()
+              }}
+            >
+              {loadLabel}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export function AddFundsAddressDemoLoader() {
+  return (
+    <LoadDemoCard
+      Demo={AddressDemo}
+      description="Fund any address from this page without paying the wallet setup cost up front."
+      load={loadAddressDemo}
+      loadLabel="Load address demo"
+      title="Fund an address"
+    />
+  )
+}
+
+export function AddFundsWalletDemoLoader() {
+  return (
+    <LoadDemoCard
+      Demo={WalletDemo}
+      description="Connect a browser wallet and request test stablecoins when you are ready to interact."
+      load={loadWalletDemo}
+      loadLabel="Load wallet demo"
+      title="Connect and fund your wallet"
+    />
+  )
+}

src/components/guides/AddFundsWalletDemo.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import Providers from '../Providers'
+import * as Demo from './Demo'
+import { AddFundsToWallet } from './steps/wallet/AddFundsToWallet.tsx'
+import { AddTokensToWallet } from './steps/wallet/AddTokensToWallet.tsx'
+import { ConnectWallet } from './steps/wallet/ConnectWallet.tsx'
+import { SetFeeToken } from './steps/wallet/SetFeeToken.tsx'
+import * as Token from './tokens'
+
+export function AddFundsWalletDemo() {
+  return (
+    <Providers mipd>
+      <Demo.Container
+        name="Connect and fund your wallet"
+        footerVariant="balances"
+        tokens={[Token.pathUsd, Token.alphaUsd, Token.betaUsd, Token.thetaUsd]}
+        balanceSource="wallet"
+      >
+        <ConnectWallet stepNumber={1} />
+        <AddFundsToWallet stepNumber={2} />
+        <AddTokensToWallet stepNumber={3} />
+        <SetFeeToken stepNumber={4} last />
+      </Demo.Container>
+    </Providers>
+  )
+}

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

@@ -1,12 +1,8 @@
 ---
 description: Get test stablecoins on Tempo Testnet using the faucet. Request pathUSD, AlphaUSD, BetaUSD, and ThetaUSD tokens for development and testing.
-mipd: true
-interactive: true
 ---
 
-import * as Demo from '../../../components/guides/Demo.tsx'
-import * as Step from '../../../components/guides/steps'
-import * as Token from '../../../components/guides/tokens'
+import { AddFundsAddressDemoLoader, AddFundsWalletDemoLoader } from '../../../components/guides/AddFundsDemoLoader.tsx'
 import { Tabs, Tab } from 'vocs'
 
 # Add Funds to Your Balance
@@ -21,12 +17,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>
+<AddFundsWalletDemoLoader />
 
   </Tab>
   <Tab title="Fund an address">
@@ -35,9 +26,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>
+<AddFundsAddressDemoLoader />
 
   </Tab>
   <Tab title="cURL request">

src/pages/quickstart/faucet.mdx

@@ -1,12 +1,8 @@
 ---
 description: Get free test stablecoins on Tempo Testnet. Connect your wallet or enter any address to receive pathUSD, AlphaUSD, BetaUSD, and ThetaUSD.
-mipd: true
-interactive: true
 ---
 
-import * as Demo from '../../components/guides/Demo.tsx'
-import * as Step from '../../components/guides/steps'
-import * as Token from '../../components/guides/tokens'
+import { AddFundsAddressDemoLoader, AddFundsWalletDemoLoader } from '../../components/guides/AddFundsDemoLoader.tsx'
 import { Tabs, Tab } from 'vocs'
 
 
@@ -22,12 +18,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>
+<AddFundsWalletDemoLoader />
 
   </Tab>
   <Tab title="Fund an address">
@@ -36,9 +27,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>
+<AddFundsAddressDemoLoader />
 
   </Tab>
   <Tab title="cURL request">