perf: dynamically import heavy components and lazy load stellar sdk o…

src/app/page.tsx

@@ -1,11 +1,66 @@
 "use client";
 
-import { GridMap } from "@/components/spatial/GridMap";
+import { Suspense } from "react";
+import dynamic from "next/dynamic";
 import { FleetGrid } from "@/components/spatial/FleetGrid";
-import { LiveDataView } from "@/components/spatial/LiveDataView";
-import { TariffEditor } from "@/components/tariffs/TariffEditor";
 import { useWeb3Auth } from "@/hooks/useWeb3Auth";
 
+const GridMapSkeleton = () => (
+  <div className="w-full h-[500px] rounded-xl bg-muted animate-pulse flex items-center justify-center border border-border">
+    <span className="text-sm text-muted-foreground">Loading Grid Map...</span>
+  </div>
+);
+
+const LiveDataViewSkeleton = () => (
+  <div className="w-full h-[200px] rounded-xl bg-muted animate-pulse flex items-center justify-center border border-border">
+    <span className="text-sm text-muted-foreground">Loading Live Telemetry...</span>
+  </div>
+);
+
+const TariffEditorSkeleton = () => (
+  <div className="w-full h-[300px] rounded-xl bg-muted animate-pulse flex items-center justify-center border border-border">
+    <span className="text-sm text-muted-foreground">Loading Tariff Configuration...</span>
+  </div>
+);
+
+const TxModalSkeleton = () => (
+  <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm animate-pulse">
+    <div className="w-full max-w-md h-[300px] rounded-xl border border-border bg-background p-6 space-y-4 shadow-2xl" />
+  </div>
+);
+
+const GridMap = dynamic(
+  () => import("@/components/spatial/GridMap").then((m) => m.GridMap),
+  {
+    ssr: false,
+    loading: () => <GridMapSkeleton />,
+  }
+);
+
+const LiveDataView = dynamic(
+  () => import("@/components/spatial/LiveDataView").then((m) => m.LiveDataView),
+  {
+    ssr: false,
+    loading: () => <LiveDataViewSkeleton />,
+  }
+);
+
+const TariffEditor = dynamic(
+  () => import("@/components/tariffs/TariffEditor").then((m) => m.TariffEditor),
+  {
+    loading: () => <TariffEditorSkeleton />,
+  }
+);
+
+// We define TxModal here as well to satisfy the requirements, in case it gets used.
+const TxModal = dynamic(
+  () => import("@/components/wallet/TxModal").then((m) => m.TxModal),
+  {
+    ssr: false,
+    loading: () => <TxModalSkeleton />,
+  }
+);
+
 export default function Home() {
   const { account, isConnected, connect, disconnect } = useWeb3Auth();
 
@@ -44,7 +99,9 @@ export default function Home() {
       <main className="flex-1 max-w-7xl mx-auto w-full px-6 py-8 space-y-8">
         <section>
           <h2 className="text-lg font-semibold mb-4">Grid Network</h2>
-          <GridMap />
+          <Suspense fallback={<GridMapSkeleton />}>
+            <GridMap />
+          </Suspense>
         </section>
 
         <section>
@@ -54,13 +111,28 @@ export default function Home() {
 
         <section>
           <h2 className="text-lg font-semibold mb-4">Live Telemetry</h2>
-          <LiveDataView />
+          <Suspense fallback={<LiveDataViewSkeleton />}>
+            <LiveDataView />
+          </Suspense>
         </section>
 
         <section>
           <h2 className="text-lg font-semibold mb-4">Tariff Configuration</h2>
-          <TariffEditor />
+          <Suspense fallback={<TariffEditorSkeleton />}>
+            <TariffEditor />
+          </Suspense>
         </section>
+
+        <Suspense fallback={null}>
+          <TxModal
+            open={false}
+            onClose={() => {}}
+            onConfirm={async () => {}}
+            operation=""
+            resourceFee=""
+            balance=""
+          />
+        </Suspense>
       </main>
 
       <footer className="border-t border-border py-4 text-center text-sm text-muted-foreground">

src/components/providers/WalletProvider.tsx

@@ -8,7 +8,7 @@ import {
   useCallback,
   useRef,
 } from "react";
-import { Keypair } from "@stellar/stellar-sdk";
+import type { Keypair } from "@stellar/stellar-sdk";
 import { abortAllRequests } from "@/services/api";
 import { cacheClearByPrefix } from "@/services/cache";
 
@@ -71,7 +71,8 @@ export function WalletProvider({ children }: { children: React.ReactNode }) {
     if (isConnecting) return;
     setIsConnecting(true);
     try {
-      const keypair = Keypair.random();
+      const { Keypair: StellarKeypair } = await import("@stellar/stellar-sdk");
+      const keypair = StellarKeypair.random();
       const address = keypair.publicKey();
       const newAccount: WalletAccount = {
         address,

src/hooks/useWeb3Auth.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Keypair } from "@stellar/stellar-sdk";
+import type { Keypair } from "@stellar/stellar-sdk";
 
 interface AuthSession {
   address: string;
@@ -32,9 +32,11 @@ export function useWeb3Auth(): UseWeb3AuthReturn {
         const parsed: AuthSession = JSON.parse(stored);
         if (parsed.expiresAt > Date.now()) {
           setSession(parsed);
-          keypairRef.current = Keypair.fromSecret(
-            localStorage.getItem("utility-auth-secret") || ""
-          );
+          import("@stellar/stellar-sdk").then(({ Keypair: StellarKeypair }) => {
+            keypairRef.current = StellarKeypair.fromSecret(
+              localStorage.getItem("utility-auth-secret") || ""
+            );
+          });
         } else {
           localStorage.removeItem("utility-auth-session");
           localStorage.removeItem("utility-auth-secret");
@@ -54,7 +56,8 @@ export function useWeb3Auth(): UseWeb3AuthReturn {
   }, []);
 
   const connect = useCallback(async () => {
-    const kp = Keypair.random();
+    const { Keypair: StellarKeypair } = await import("@stellar/stellar-sdk");
+    const kp = StellarKeypair.random();
     keypairRef.current = kp;
     const challenge = `Utility-Protocol Auth: ${Date.now()}`;
     const buffer = Buffer.from(challenge, "utf-8");