CodeCow/stack
1
0
Fork 0
mirror of https://github.com/stack-auth/stack.git synced 2026-06-19 21:00:40 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Implement loading state for purchase page and enhance styling

Browse Source
This commit is contained in:
Developing-Gamer 2026-06-11 11:56:44 -07:00
parent a092be6dc3
commit 148d8ee0b7
4 changed files with 42 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
apps/dashboard/src/app/(main)/purchase/[code]/loading.tsx Normal file
View File

@ -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>
);
}

4
apps/dashboard/src/app/(main)/purchase/[code]/page-client.tsx
View File

@ -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">

2
apps/dashboard/src/app/(main)/purchase/return/page-client.tsx
View File

@ -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" && (
<>

14
apps/dashboard/src/app/globals.css
View File

@ -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),