fix: add missing suspense boundary on page load (#155)

src/pages/AppShell.tsx

@@ -3,6 +3,7 @@ import {
   type NavigationItem,
 } from "@/components/GlobalCommandPalette"
 import { GithubIcon } from "@/components/Icons"
+import { Loading } from "@/components/Loading"
 import SliderToggle from "@/components/Toggle"
 import { Button } from "@/components/ui/button"
 import { Sheet, SheetContent } from "@/components/ui/sheet"
@@ -24,7 +25,7 @@ import {
   SquareFunction,
   UserRound,
 } from "lucide-react"
-import { FC, PropsWithChildren, useState } from "react"
+import { FC, PropsWithChildren, Suspense, useState } from "react"
 import { useLocation } from "react-router-dom"
 import { twMerge } from "tailwind-merge"
 import { NetworkSwitcher } from "./Network/Network"
@@ -118,7 +119,9 @@ export const AppShell: FC<PropsWithChildren> = ({ children }) => {
       </Sheet>
       <div className="flex min-w-0 flex-1 flex-col">
         <TopBar onOpenSidebar={() => setSidebarOpen(true)} />
-        {children}
+        <Suspense fallback={<Loading>Loading Section…</Loading>}>
+          {children}
+        </Suspense>
       </div>
       <HistoryDrawer />
     </div>

src/pages/Teleport/Teleport.tsx

@@ -1,3 +1,4 @@
+import { LoadingBlocks } from "@/components/Loading"
 import { withSubscribe } from "@/components/withSuspense"
 import { useStateObservable } from "@react-rxjs/core"
 import { AlertTriangle } from "lucide-react"
@@ -6,58 +7,65 @@ import { RoutePreview } from "./RoutePreview"
 import { origin$, Setup } from "./Setup"
 import { Submit } from "./Submit"
 
-const Teleport = withSubscribe(() => {
-  const origin = useStateObservable(origin$)
+const Teleport = withSubscribe(
+  () => {
+    const origin = useStateObservable(origin$)
+
+    if (!origin) {
+      // TODO explore custom chains
+      return (
+        <CenteredScrollContainer className="p-4">
+          <div className="mx-auto mt-8 max-w-lg rounded-lg border border-amber-500/30 bg-amber-500/5 p-4 text-sm text-amber-800 dark:text-amber-200">
+            <div className="flex items-start gap-3">
+              <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
+              <div>
+                <h1 className="font-semibold">Chain not supported</h1>
+                <p className="mt-1 text-amber-800/80 dark:text-amber-200/80">
+                  Teleport is currently available only for chains supported by
+                  Paraspell.
+                </p>
+              </div>
+            </div>
+          </div>
+        </CenteredScrollContainer>
+      )
+    }
 
-  if (!origin) {
-    // TODO explore custom chains
     return (
-      <CenteredScrollContainer className="p-4">
-        <div className="mx-auto mt-8 max-w-lg rounded-lg border border-amber-500/30 bg-amber-500/5 p-4 text-sm text-amber-800 dark:text-amber-200">
-          <div className="flex items-start gap-3">
-            <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
-            <div>
-              <h1 className="font-semibold">Chain not supported</h1>
-              <p className="mt-1 text-amber-800/80 dark:text-amber-200/80">
-                Teleport is currently available only for chains supported by
-                Paraspell.
+      <CenteredScrollContainer>
+        <div className="flex min-h-full flex-col gap-4 p-4">
+          <header className="flex flex-col gap-3 @lg:flex-row @lg:items-start @lg:justify-between">
+            <div className="space-y-1">
+              <h1 className="text-2xl font-semibold tracking-tight">
+                Teleport
+              </h1>
+              <p className="text-sm text-muted-foreground">
+                Send assets from the connected chain to a supported destination.
               </p>
             </div>
+            <a
+              href="https://paraspell.xyz/"
+              target="_blank"
+              rel="noreferrer"
+              className="w-fit shrink-0 rounded-md border border-border bg-background px-2.5 py-1 text-xs font-medium text-muted-foreground transition-colors hover:border-foreground/20 hover:text-foreground"
+            >
+              Powered by Paraspell ✨
+            </a>
+          </header>
+
+          <div className="grid min-h-0 gap-4 items-start @5xl:grid-cols-[minmax(0,1fr)_minmax(21rem,0.85fr)] @7xl:grid-cols-[minmax(0,1.05fr)_minmax(24rem,0.95fr)]">
+            <Setup />
+            <div className="flex min-w-0 flex-col gap-4">
+              <RoutePreview />
+              <Submit />
+            </div>
           </div>
         </div>
       </CenteredScrollContainer>
     )
-  }
-
-  return (
-    <CenteredScrollContainer>
-      <div className="flex min-h-full flex-col gap-4 p-4">
-        <header className="flex flex-col gap-3 @lg:flex-row @lg:items-start @lg:justify-between">
-          <div className="space-y-1">
-            <h1 className="text-2xl font-semibold tracking-tight">Teleport</h1>
-            <p className="text-sm text-muted-foreground">
-              Send assets from the connected chain to a supported destination.
-            </p>
-          </div>
-          <a
-            href="https://paraspell.xyz/"
-            target="_blank"
-            rel="noreferrer"
-            className="w-fit shrink-0 rounded-md border border-border bg-background px-2.5 py-1 text-xs font-medium text-muted-foreground transition-colors hover:border-foreground/20 hover:text-foreground"
-          >
-            Powered by Paraspell ✨
-          </a>
-        </header>
-
-        <div className="grid min-h-0 gap-4 items-start @5xl:grid-cols-[minmax(0,1fr)_minmax(21rem,0.85fr)] @7xl:grid-cols-[minmax(0,1.05fr)_minmax(24rem,0.95fr)]">
-          <Setup />
-          <div className="flex min-w-0 flex-col gap-4">
-            <RoutePreview />
-            <Submit />
-          </div>
-        </div>
-      </div>
-    </CenteredScrollContainer>
-  )
-})
+  },
+  {
+    fallback: <LoadingBlocks />,
+  },
+)
 export default Teleport