From aa73532e2496d60e6e5649c8101cca49e8d163c6 Mon Sep 17 00:00:00 2001
From: johnsmccain <johnsdanlami@gmail.com>
Date: Thu, 2 Apr 2026 16:31:52 +0100
Subject: [PATCH] feat(design): loading skeletons and async state patterns

- Add MarketCardSkeleton / MarketsListSkeleton for markets widget
- Add EventDetailSkeleton for event detail page
- EventsTableSkeleton already existed; wired via loading.tsx
- Add AsyncButton: inline spinner + loading text, no layout shift
- Add ErrorBanner: destructive alert with optional Retry action
- Wire EventDetailSkeleton + ErrorBanner into event-page/page.tsx
- Wire ErrorBanner + retry into EventsSection (events-store error state)
- Add /loading-patterns demo page covering all 3 core surfaces
---
 app/(dashboard)/events/event-page/page.tsx    | 59 +++++++++----
 app/(dashboard)/loading-patterns/page.tsx     | 88 +++++++++++++++++++
 components/events/events-section.tsx          | 12 ++-
 .../skeletons/event-detail-skeleton.tsx       | 52 +++++++++++
 components/skeletons/markets-skeleton.tsx     | 42 +++++++++
 components/ui/async-button.tsx                | 31 +++++++
 components/ui/error-banner.tsx                | 44 ++++++++++
 7 files changed, 310 insertions(+), 18 deletions(-)
 create mode 100644 app/(dashboard)/loading-patterns/page.tsx
 create mode 100644 components/skeletons/event-detail-skeleton.tsx
 create mode 100644 components/skeletons/markets-skeleton.tsx
 create mode 100644 components/ui/async-button.tsx
 create mode 100644 components/ui/error-banner.tsx

diff --git a/app/(dashboard)/events/event-page/page.tsx b/app/(dashboard)/events/event-page/page.tsx
index 9693f1c..b95e62e 100644
--- a/app/(dashboard)/events/event-page/page.tsx
+++ b/app/(dashboard)/events/event-page/page.tsx
@@ -18,6 +18,9 @@ import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Separator } from "@/components/ui/separator";
 import { Clock, DollarSign, Users, BarChart2, Loader2 } from "lucide-react";
 import { formatDistanceToNowStrict, parseISO, isValid } from "date-fns";
+import { EventDetailSkeleton } from "@/components/skeletons/event-detail-skeleton";
+import { ErrorBanner } from "@/components/ui/error-banner";
+import { AsyncButton } from "@/components/ui/async-button";
 
 interface EventOption {
   id: string;
@@ -104,6 +107,8 @@ export default function EventDetailsPage() {
   const [timeLeft, setTimeLeft] = useState<string>(() =>
     calculateTimeLeft(eventData.deadline)
   );
+  const [isLoading, setIsLoading] = useState(true);
+  const [fetchError, setFetchError] = useState<string | null>(null);
   const [selectedOption, setSelectedOption] = useState<string | null>(null);
   const [betAmount, setBetAmount] = useState<string>("");
   const [isSubmittingBet, setIsSubmittingBet] = useState(false);
@@ -112,6 +117,14 @@ export default function EventDetailsPage() {
     string | null
   >(null);
 
+  // Simulate initial data fetch
+  useEffect(() => {
+    setIsLoading(true);
+    setFetchError(null);
+    const t = setTimeout(() => setIsLoading(false), 800);
+    return () => clearTimeout(t);
+  }, [eventId]);
+
   useEffect(() => {
     if (eventId && eventId !== eventData.id) {
       console.warn(
@@ -216,6 +229,29 @@ export default function EventDetailsPage() {
   const potentialPayout =
     currentOdds && betAmount ? parseFloat(betAmount || "0") * currentOdds : 0;
 
+  if (isLoading) {
+    return (
+      <div className="container mx-auto px-4 py-8 max-w-4xl">
+        <EventDetailSkeleton />
+      </div>
+    );
+  }
+
+  if (fetchError) {
+    return (
+      <div className="container mx-auto px-4 py-8 max-w-4xl">
+        <ErrorBanner
+          message={fetchError}
+          onRetry={() => {
+            setIsLoading(true);
+            setFetchError(null);
+            setTimeout(() => setIsLoading(false), 800);
+          }}
+        />
+      </div>
+    );
+  }
+
   return (
     <div className="container mx-auto px-4 py-8 max-w-4xl">
       <div className="mb-6">
@@ -501,26 +537,15 @@ export default function EventDetailsPage() {
                 )}
               </CardContent>
               <CardFooter>
-                <Button
+                <AsyncButton
                   type="submit"
                   className="w-full"
-                  disabled={
-                    isEventClosed ||
-                    isSubmittingBet ||
-                    !selectedOption ||
-                    !betAmount ||
-                    !!error
-                  }
+                  loading={isSubmittingBet}
+                  loadingText="Placing Bet..."
+                  disabled={isEventClosed || !selectedOption || !betAmount || !!error}
                 >
-                  {isSubmittingBet ? (
-                    <>
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                      Placing Bet...
-                    </>
-                  ) : (
-                    "Place Bet"
-                  )}
-                </Button>
+                  Place Bet
+                </AsyncButton>
               </CardFooter>
             </form>
           </Card>
diff --git a/app/(dashboard)/loading-patterns/page.tsx b/app/(dashboard)/loading-patterns/page.tsx
new file mode 100644
index 0000000..2a0e175
--- /dev/null
+++ b/app/(dashboard)/loading-patterns/page.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { useState } from "react"
+import { MarketsListSkeleton } from "@/components/skeletons/markets-skeleton"
+import { EventDetailSkeleton } from "@/components/skeletons/event-detail-skeleton"
+import { EventsTableSkeleton } from "@/components/events/events-table-skeleton"
+import { ErrorBanner } from "@/components/ui/error-banner"
+import { AsyncButton } from "@/components/ui/async-button"
+import { Separator } from "@/components/ui/separator"
+
+export default function LoadingPatternsPage() {
+  const [btnLoading, setBtnLoading] = useState(false)
+
+  function simulateAction() {
+    setBtnLoading(true)
+    setTimeout(() => setBtnLoading(false), 2000)
+  }
+
+  return (
+    <div className="container mx-auto max-w-4xl px-4 py-10 space-y-12">
+      <div>
+        <h1 className="text-2xl font-bold mb-1">Loading & Async State Patterns</h1>
+        <p className="text-muted-foreground text-sm">Design reference for skeletons, inline loading, and error/retry states.</p>
+      </div>
+
+      <Separator />
+
+      {/* Surface 1 – Markets list skeleton */}
+      <section className="space-y-4">
+        <h2 className="text-lg font-semibold">1. Markets List Skeleton</h2>
+        <p className="text-sm text-muted-foreground">Shown while the markets widget fetches data.</p>
+        <div className="max-w-md">
+          <MarketsListSkeleton count={3} />
+        </div>
+      </section>
+
+      <Separator />
+
+      {/* Surface 2 – Event detail skeleton */}
+      <section className="space-y-4">
+        <h2 className="text-lg font-semibold">2. Event Detail Skeleton</h2>
+        <p className="text-sm text-muted-foreground">Shown while the event detail page loads.</p>
+        <EventDetailSkeleton />
+      </section>
+
+      <Separator />
+
+      {/* Surface 3 – Events table skeleton */}
+      <section className="space-y-4">
+        <h2 className="text-lg font-semibold">3. Events Table Skeleton</h2>
+        <p className="text-sm text-muted-foreground">Shown via Next.js loading.tsx on the events list page.</p>
+        <EventsTableSkeleton />
+      </section>
+
+      <Separator />
+
+      {/* Inline loading button */}
+      <section className="space-y-4">
+        <h2 className="text-lg font-semibold">Inline Loading – AsyncButton</h2>
+        <p className="text-sm text-muted-foreground">Spinner replaces icon; text changes to loading copy.</p>
+        <div className="flex flex-wrap gap-3">
+          <AsyncButton loading={btnLoading} loadingText="Placing Bet..." onClick={simulateAction}>
+            Place Bet
+          </AsyncButton>
+          <AsyncButton loading={btnLoading} loadingText="Submitting..." variant="outline" onClick={simulateAction}>
+            Submit Form
+          </AsyncButton>
+        </div>
+      </section>
+
+      <Separator />
+
+      {/* Error + retry banner */}
+      <section className="space-y-4">
+        <h2 className="text-lg font-semibold">Error + Retry Banner</h2>
+        <p className="text-sm text-muted-foreground">Inline banner with optional retry callback.</p>
+        <ErrorBanner
+          message="Failed to load events. Check your connection and try again."
+          onRetry={() => alert("Retrying…")}
+        />
+        <ErrorBanner
+          title="Bet submission failed"
+          message="Your transaction could not be broadcast to the Stellar network."
+        />
+      </section>
+    </div>
+  )
+}
diff --git a/components/events/events-section.tsx b/components/events/events-section.tsx
index 238390f..4ba7c6a 100644
--- a/components/events/events-section.tsx
+++ b/components/events/events-section.tsx
@@ -15,13 +15,14 @@ import { EventsToolbar } from "./events-toolbar"
 import { EventsTable } from "./events-table"
 import { EventsPagination } from "./pagination"
 import { useEventsStore, getEventCounts } from "@/lib/events-store"
+import { ErrorBanner } from "@/components/ui/error-banner"
 
 interface EventsSectionProps {
   className?: string
 }
 
 export function EventsSection({ className }: EventsSectionProps) {
-  const { events, filters, setStatus, loadEvents } = useEventsStore()
+  const { events, filters, error, setStatus, loadEvents } = useEventsStore()
 
   // Get event counts for each tab
   const eventCounts = React.useMemo(() => getEventCounts(events), [events])
@@ -88,6 +89,15 @@ export function EventsSection({ className }: EventsSectionProps) {
         </Tabs>
       </div>
 
+      {/* Error banner */}
+      {error && (
+        <ErrorBanner
+          message={error}
+          onRetry={loadEvents}
+          className="mb-2"
+        />
+      )}
+
       {/* Tab Content */}
       <Tabs value={filters.status} onValueChange={handleTabChange} className="w-full">
         <TabsContent value="ongoing" className="space-y-6 mt-6">
diff --git a/components/skeletons/event-detail-skeleton.tsx b/components/skeletons/event-detail-skeleton.tsx
new file mode 100644
index 0000000..28330df
--- /dev/null
+++ b/components/skeletons/event-detail-skeleton.tsx
@@ -0,0 +1,52 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+import { Separator } from "@/components/ui/separator"
+
+/** Skeleton for the event detail page */
+export function EventDetailSkeleton() {
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="space-y-3">
+        <div className="flex items-center gap-2">
+          <Skeleton className="h-5 w-16 rounded-full" />
+          <Skeleton className="h-5 w-20 rounded-full" />
+        </div>
+        <Skeleton className="h-8 w-3/4" />
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-5/6" />
+      </div>
+
+      {/* Stats row */}
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <Card key={i} className="p-4 space-y-2">
+            <Skeleton className="h-3 w-16" />
+            <Skeleton className="h-6 w-20" />
+          </Card>
+        ))}
+      </div>
+
+      <Separator />
+
+      {/* Options / bet form */}
+      <div className="space-y-3">
+        <Skeleton className="h-5 w-32" />
+        {Array.from({ length: 3 }).map((_, i) => (
+          <div key={i} className="flex items-center gap-3 rounded-lg border p-4">
+            <Skeleton className="h-4 w-4 rounded-full shrink-0" />
+            <Skeleton className="h-4 flex-1" />
+            <Skeleton className="h-4 w-12" />
+          </div>
+        ))}
+      </div>
+
+      {/* Amount input + submit */}
+      <div className="space-y-3">
+        <Skeleton className="h-4 w-24" />
+        <Skeleton className="h-10 w-full rounded-md" />
+        <Skeleton className="h-10 w-full rounded-md" />
+      </div>
+    </div>
+  )
+}
diff --git a/components/skeletons/markets-skeleton.tsx b/components/skeletons/markets-skeleton.tsx
new file mode 100644
index 0000000..846191a
--- /dev/null
+++ b/components/skeletons/markets-skeleton.tsx
@@ -0,0 +1,42 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+
+/** Skeleton for a single market card (used in the marketing widget and dashboard) */
+export function MarketCardSkeleton() {
+  return (
+    <Card className="border-white/10 bg-[#201F3780] p-4">
+      <div className="mb-3 flex items-start justify-between gap-3">
+        <div className="flex items-start gap-3 flex-1 min-w-0">
+          {/* Icon */}
+          <Skeleton className="h-9 w-9 rounded-lg shrink-0" />
+          <div className="flex-1 min-w-0 space-y-2">
+            <Skeleton className="h-4 w-3/4" />
+            <Skeleton className="h-3 w-1/2" />
+          </div>
+        </div>
+        {/* Odds */}
+        <div className="space-y-1 text-right shrink-0">
+          <Skeleton className="h-3 w-14" />
+          <Skeleton className="h-3 w-10" />
+        </div>
+      </div>
+      {/* Progress bar */}
+      <Skeleton className="h-2 w-full rounded-full" />
+      <div className="mt-2 flex justify-between">
+        <Skeleton className="h-3 w-24" />
+        <Skeleton className="h-3 w-20" />
+      </div>
+    </Card>
+  )
+}
+
+/** Skeleton for the full markets list (3 cards) */
+export function MarketsListSkeleton({ count = 3 }: { count?: number }) {
+  return (
+    <div className="space-y-4">
+      {Array.from({ length: count }).map((_, i) => (
+        <MarketCardSkeleton key={i} />
+      ))}
+    </div>
+  )
+}
diff --git a/components/ui/async-button.tsx b/components/ui/async-button.tsx
new file mode 100644
index 0000000..ad04e43
--- /dev/null
+++ b/components/ui/async-button.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { Loader2 } from "lucide-react"
+import { Button, type ButtonProps } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+interface AsyncButtonProps extends ButtonProps {
+  loading?: boolean
+  loadingText?: string
+}
+
+export function AsyncButton({
+  loading = false,
+  loadingText,
+  disabled,
+  children,
+  className,
+  ...props
+}: AsyncButtonProps) {
+  return (
+    <Button
+      disabled={disabled || loading}
+      className={cn("relative", className)}
+      {...props}
+    >
+      {loading && <Loader2 className="h-4 w-4 animate-spin" />}
+      {loading && loadingText ? loadingText : children}
+    </Button>
+  )
+}
diff --git a/components/ui/error-banner.tsx b/components/ui/error-banner.tsx
new file mode 100644
index 0000000..c39f99c
--- /dev/null
+++ b/components/ui/error-banner.tsx
@@ -0,0 +1,44 @@
+"use client"
+
+import { AlertCircle, RefreshCw } from "lucide-react"
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+interface ErrorBannerProps {
+  title?: string
+  message: string
+  onRetry?: () => void
+  className?: string
+}
+
+export function ErrorBanner({
+  title = "Something went wrong",
+  message,
+  onRetry,
+  className,
+}: ErrorBannerProps) {
+  return (
+    <Alert
+      variant="destructive"
+      className={cn("flex items-start gap-3", className)}
+    >
+      <AlertCircle className="h-4 w-4 mt-0.5 shrink-0" />
+      <div className="flex-1 min-w-0">
+        <AlertTitle>{title}</AlertTitle>
+        <AlertDescription className="mt-1">{message}</AlertDescription>
+      </div>
+      {onRetry && (
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onRetry}
+          className="shrink-0 border-destructive/50 text-destructive hover:bg-destructive/10"
+        >
+          <RefreshCw className="h-3.5 w-3.5 mr-1.5" />
+          Retry
+        </Button>
+      )}
+    </Alert>
+  )
+}