From 148d8ee0b749334a11e894de93009721fee5f2af Mon Sep 17 00:00:00 2001
From: Developing-Gamer <maxcodes11110@gmail.com>
Date: Thu, 11 Jun 2026 11:56:44 -0700
Subject: [PATCH] Implement loading state for purchase page and enhance styling

---
 .../app/(main)/purchase/[code]/loading.tsx    | 25 +++++++++++++++++++
 .../(main)/purchase/[code]/page-client.tsx    |  4 +--
 .../(main)/purchase/return/page-client.tsx    |  2 +-
 apps/dashboard/src/app/globals.css            | 14 +++++++++++
 4 files changed, 42 insertions(+), 3 deletions(-)
 create mode 100644 apps/dashboard/src/app/(main)/purchase/[code]/loading.tsx

diff --git a/apps/dashboard/src/app/(main)/purchase/[code]/loading.tsx b/apps/dashboard/src/app/(main)/purchase/[code]/loading.tsx
new file mode 100644
index 000000000..02a4a8525
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/purchase/[code]/loading.tsx
@@ -0,0 +1,25 @@
+export default function Loading() {
+  return (
+    <div data-hexclave-purchase-page className="relative min-h-screen bg-white dark:bg-zinc-950">
+      <div className="relative flex min-h-screen w-full flex-col lg:flex-row">
+        <div className="flex flex-1 flex-col border-b border-border/40 bg-white dark:bg-zinc-950 lg:w-1/2 lg:border-b-0 lg:border-r">
+          <div className="mx-auto w-full max-w-md px-6 pb-12 pt-16 lg:pt-20">
+            <div className="space-y-5">
+              <div className="size-12 animate-pulse rounded-full bg-foreground/10" />
+              <div className="h-10 w-2/3 animate-pulse rounded-lg bg-foreground/10" />
+              <div className="h-5 w-full animate-pulse rounded-md bg-foreground/10" />
+              <div className="mt-8 h-20 w-full animate-pulse rounded-xl bg-foreground/10" />
+              <div className="h-24 w-full animate-pulse rounded-xl bg-foreground/10" />
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-1 flex-col justify-center bg-zinc-200 dark:bg-black lg:w-1/2">
+          <div className="mx-auto w-full max-w-md px-6 py-12">
+            <div className="h-64 w-full animate-pulse rounded-2xl bg-background/70 dark:bg-white/10" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(main)/purchase/[code]/page-client.tsx b/apps/dashboard/src/app/(main)/purchase/[code]/page-client.tsx
index c4301bb91..d3937e69d 100644
--- a/apps/dashboard/src/app/(main)/purchase/[code]/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/purchase/[code]/page-client.tsx
@@ -168,7 +168,7 @@ export default function PageClient({ code }: { code: string }) {
 
   if (showInvalidPurchaseCode) {
     return (
-      <div className="relative flex min-h-screen items-center justify-center bg-white px-6 dark:bg-zinc-950">
+      <div data-hexclave-purchase-page className="relative flex min-h-screen items-center justify-center bg-white px-6 dark:bg-zinc-950">
         <div className="w-full max-w-md text-center">
           <DesignCard glassmorphic contentClassName="flex flex-col items-center gap-4 p-8">
             <div className="flex size-12 items-center justify-center rounded-full bg-destructive/10">
@@ -189,7 +189,7 @@ export default function PageClient({ code }: { code: string }) {
   }
 
   return (
-    <div className="relative min-h-screen bg-white dark:bg-zinc-950">
+    <div data-hexclave-purchase-page className="relative min-h-screen bg-white dark:bg-zinc-950">
       <div className="relative flex min-h-screen w-full flex-col lg:flex-row">
         {/* Left Panel: Product & Pricing Selection */}
         <div className="flex flex-1 flex-col border-b border-border/40 bg-white dark:bg-zinc-950 lg:w-1/2 lg:border-b-0 lg:border-r">
diff --git a/apps/dashboard/src/app/(main)/purchase/return/page-client.tsx b/apps/dashboard/src/app/(main)/purchase/return/page-client.tsx
index e945c8f6c..f67ab67ae 100644
--- a/apps/dashboard/src/app/(main)/purchase/return/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/purchase/return/page-client.tsx
@@ -106,7 +106,7 @@ export default function ReturnClient({ clientSecret, stripeAccountId, purchaseFu
   }, [updateViewState]);
 
   return (
-    <div className="relative flex min-h-screen items-center justify-center bg-white px-4 py-12 dark:bg-black">
+    <div data-hexclave-purchase-page className="relative flex min-h-screen items-center justify-center bg-white px-4 py-12 dark:bg-black">
       <DesignCard glassmorphic className="relative w-full max-w-md" contentClassName="flex flex-col items-center gap-5 p-8 text-center">
         {state.kind === "loading" && (
           <>
diff --git a/apps/dashboard/src/app/globals.css b/apps/dashboard/src/app/globals.css
index 1f044316a..efd172ee4 100644
--- a/apps/dashboard/src/app/globals.css
+++ b/apps/dashboard/src/app/globals.css
@@ -285,6 +285,20 @@
     opacity: 0;
     background-image: none;
   }
+
+  body:has([data-hexclave-purchase-page]) {
+    background-color: white;
+    background-image: none;
+  }
+
+  .dark body:has([data-hexclave-purchase-page]) {
+    background-color: hsl(240 10% 3.9%);
+  }
+
+  body:has([data-hexclave-purchase-page])::before {
+    opacity: 0;
+    background-image: none;
+  }
 }
 
 ::view-transition-old(root),