Skip to content

Commit 7cbb479

Browse files
floxxihfloxxih
authored
Merge pull request #360 from Mosas2000/fix/frontend-wallet-prefetch-loading-contrast
Fix/frontend wallet prefetch loading contrast
2 parents e055169 + f00257a commit 7cbb479

18 files changed

Lines changed: 516 additions & 30 deletions

File tree

‎frontend/src/app/about/loading.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Skeleton } from "@/components/ui";
2+
3+
export default function AboutLoading() {
4+
return (
5+
<div className="container mx-auto max-w-4xl px-4 py-12 md:py-20">
6+
<div className="text-center mb-16 space-y-4">
7+
<Skeleton className="h-6 w-32 mx-auto rounded-full" />
8+
<Skeleton className="h-12 w-96 max-w-full mx-auto" />
9+
<Skeleton className="h-6 w-full max-w-2xl mx-auto" />
10+
</div>
11+
<div className="grid gap-8 md:grid-cols-2">
12+
<Skeleton className="h-96 rounded-2xl" />
13+
<Skeleton className="h-96 rounded-2xl" />
14+
</div>
15+
</div>
16+
);
17+
}

‎frontend/src/app/admin/loading.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Skeleton } from "@/components/ui";
2+
3+
export default function AdminLoading() {
4+
return (
5+
<div className="container mx-auto max-w-7xl px-4 py-12 md:py-20">
6+
<Skeleton className="h-12 w-48 mb-10" />
7+
<div className="grid gap-6 md:grid-cols-4 mb-8">
8+
{Array.from({ length: 4 }).map((_, i) => (
9+
<Skeleton key={i} className="h-32 rounded-2xl" />
10+
))}
11+
</div>
12+
<Skeleton className="h-96 rounded-2xl" />
13+
</div>
14+
);
15+
}

‎frontend/src/app/browse/loading.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { Skeleton } from "@/components/ui";
2+
3+
export default function BrowseLoading() {
4+
return (
5+
<div className="container mx-auto max-w-7xl px-4 py-12 md:py-20">
6+
<div className="mb-10 flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
7+
<div className="space-y-3">
8+
<Skeleton className="h-5 w-36 rounded-full" />
9+
<Skeleton className="h-12 w-56" />
10+
<Skeleton className="h-6 w-96 max-w-full" />
11+
</div>
12+
<Skeleton className="h-10 w-44 rounded-xl" />
13+
</div>
14+
15+
<div className="space-y-8">
16+
<div className="rounded-2xl border border-border bg-surface-raised p-4">
17+
<div className="flex flex-wrap gap-4">
18+
<Skeleton className="h-10 w-64 rounded-xl" />
19+
<Skeleton className="h-10 w-32 rounded-xl" />
20+
<Skeleton className="h-10 w-32 rounded-xl" />
21+
<Skeleton className="h-10 w-32 rounded-xl" />
22+
<Skeleton className="h-10 w-32 rounded-xl" />
23+
</div>
24+
</div>
25+
26+
<div className="space-y-4">
27+
<div className="flex items-center gap-3 px-2">
28+
<Skeleton className="h-4 w-4 rounded-full" />
29+
<Skeleton className="h-5 w-40" />
30+
</div>
31+
32+
{Array.from({ length: 6 }).map((_, i) => (
33+
<div key={i} className="rounded-2xl border border-border bg-surface-raised p-4">
34+
<div className="grid grid-cols-6 gap-4 items-center">
35+
<Skeleton className="h-5 rounded" />
36+
<Skeleton className="h-5 rounded" />
37+
<Skeleton className="h-5 rounded" />
38+
<Skeleton className="h-5 rounded" />
39+
<Skeleton className="h-5 rounded" />
40+
<Skeleton className="h-9 w-20 rounded-xl ml-auto" />
41+
</div>
42+
</div>
43+
))}
44+
45+
<div className="mt-6 flex items-center justify-between">
46+
<Skeleton className="h-5 w-40" />
47+
<div className="flex gap-2">
48+
<Skeleton className="h-9 w-9 rounded-lg" />
49+
<Skeleton className="h-9 w-9 rounded-lg" />
50+
</div>
51+
</div>
52+
</div>
53+
</div>
54+
</div>
55+
);
56+
}

‎frontend/src/app/dashboard/loading.tsx‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,33 @@
1-
import { DashboardSkeleton } from "@/components/dashboard/DashboardSkeleton";
1+
import { Skeleton } from "@/components/ui";
22

33
export default function DashboardLoading() {
4-
return <DashboardSkeleton />;
4+
return (
5+
<div className="container mx-auto px-4 py-8 max-w-4xl space-y-8">
6+
<Skeleton className="h-10 w-48" />
7+
8+
<div className="rounded-xl border border-border bg-surface-overlay p-6 space-y-6">
9+
<Skeleton className="h-7 w-32" />
10+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
11+
<Skeleton className="h-14 rounded-xl" />
12+
<Skeleton className="h-14 rounded-xl" />
13+
<Skeleton className="h-14 rounded-xl" />
14+
</div>
15+
</div>
16+
17+
<div className="rounded-xl border border-border bg-surface-overlay p-6 space-y-6">
18+
<Skeleton className="h-7 w-32" />
19+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
20+
<Skeleton className="h-14 rounded-xl" />
21+
<Skeleton className="h-14 rounded-xl" />
22+
</div>
23+
</div>
24+
25+
<Skeleton className="h-11 w-36 rounded-xl" />
26+
27+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
28+
<Skeleton className="h-28 rounded-xl" />
29+
<Skeleton className="h-28 rounded-xl" />
30+
</div>
31+
</div>
32+
);
533
}

‎frontend/src/app/htlcs/loading.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Skeleton } from "@/components/ui";
2+
3+
export default function HtlcsLoading() {
4+
return (
5+
<div className="container mx-auto max-w-6xl px-4 py-12 md:py-20">
6+
<div className="mb-10 space-y-4">
7+
<Skeleton className="h-12 w-64" />
8+
<Skeleton className="h-6 w-96 max-w-full" />
9+
</div>
10+
<div className="space-y-4">
11+
{Array.from({ length: 4 }).map((_, i) => (
12+
<Skeleton key={i} className="h-32 rounded-2xl" />
13+
))}
14+
</div>
15+
</div>
16+
);
17+
}

‎frontend/src/app/marketplace/loading.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { Skeleton } from "@/components/ui";
2+
3+
export default function MarketplaceLoading() {
4+
return (
5+
<div className="container mx-auto max-w-7xl px-4 py-12 md:py-20">
6+
<div className="mb-12 flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
7+
<div className="max-w-3xl space-y-4">
8+
<Skeleton className="h-6 w-32 rounded-full" />
9+
<Skeleton className="h-14 w-64" />
10+
<Skeleton className="h-8 w-full max-w-xl" />
11+
</div>
12+
<div className="flex gap-4">
13+
<Skeleton className="h-12 w-28 rounded-xl" />
14+
<Skeleton className="h-12 w-36 rounded-xl" />
15+
</div>
16+
</div>
17+
18+
<div className="grid grid-cols-1 gap-8 lg:grid-cols-4">
19+
<div className="lg:col-span-3 space-y-4">
20+
{Array.from({ length: 5 }).map((_, i) => (
21+
<div key={i} className="rounded-2xl border border-border bg-surface-raised p-4">
22+
<div className="flex items-center justify-between">
23+
<div className="space-y-2">
24+
<Skeleton className="h-5 w-24" />
25+
<Skeleton className="h-4 w-32" />
26+
</div>
27+
<div className="space-y-2 text-right">
28+
<Skeleton className="h-5 w-20 ml-auto" />
29+
<Skeleton className="h-4 w-16 ml-auto" />
30+
</div>
31+
<Skeleton className="h-9 w-20 rounded-xl" />
32+
</div>
33+
</div>
34+
))}
35+
</div>
36+
37+
<div className="space-y-6">
38+
<div className="rounded-2xl border border-border bg-surface-overlay/30 p-6">
39+
<Skeleton className="h-5 w-32 mb-4" />
40+
<Skeleton className="h-40 w-full rounded-xl" />
41+
<div className="mt-4 grid grid-cols-2 gap-4">
42+
<div className="text-center">
43+
<Skeleton className="h-4 w-12 mx-auto" />
44+
<Skeleton className="h-7 w-16 mx-auto mt-2" />
45+
</div>
46+
<div className="text-center">
47+
<Skeleton className="h-4 w-12 mx-auto" />
48+
<Skeleton className="h-7 w-16 mx-auto mt-2" />
49+
</div>
50+
</div>
51+
</div>
52+
<Skeleton className="h-48 rounded-2xl" />
53+
</div>
54+
</div>
55+
</div>
56+
);
57+
}

‎frontend/src/app/page.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import {
1111
Lock,
1212
} from "lucide-react";
1313

14+
export const experimental_ppr = true;
15+
1416
export default function Home() {
1517
return (
1618
<div className="flex flex-col">
@@ -41,18 +43,18 @@ export default function Home() {
4143
</p>
4244

4345
<div className="mt-10 flex animate-fade-in flex-wrap items-center justify-center gap-4 [animation-delay:400ms]">
44-
<Link href="/swap">
46+
<Link href="/swap" prefetch={true}>
4547
<Button size="lg" className="rounded-2xl px-8 shadow-glow-md">
4648
Launch Swap Wizard
4749
<ArrowRight className="ml-2 h-5 w-5" />
4850
</Button>
4951
</Link>
50-
<Link href="/protocol">
52+
<Link href="/protocol" prefetch={true}>
5153
<Button variant="outline" size="lg" className="rounded-2xl px-8">
5254
Explore Protocol
5355
</Button>
5456
</Link>
55-
<Link href="/about">
57+
<Link href="/about" prefetch={true}>
5658
<Button variant="secondary" size="lg" className="rounded-2xl px-8">
5759
How it Works
5860
</Button>
@@ -121,7 +123,7 @@ export default function Home() {
121123
networks.
122124
</p>
123125
<div className="mt-8">
124-
<Link href="/swap">
126+
<Link href="/swap" prefetch={true}>
125127
<Button variant="primary" size="lg" className="rounded-xl">
126128
Connect and Swap <ChevronRight className="ml-2 h-4 w-4" />
127129
</Button>

‎frontend/src/app/protocol/loading.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Skeleton } from "@/components/ui";
2+
3+
export default function ProtocolLoading() {
4+
return (
5+
<div className="container mx-auto max-w-6xl px-4 py-12 md:py-20">
6+
<Skeleton className="h-12 w-64 mb-8" />
7+
<div className="grid gap-6 md:grid-cols-3">
8+
{Array.from({ length: 6 }).map((_, i) => (
9+
<Skeleton key={i} className="h-48 rounded-2xl" />
10+
))}
11+
</div>
12+
</div>
13+
);
14+
}

‎frontend/src/app/settings/loading.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { Skeleton } from "@/components/ui";
2+
3+
export default function SettingsLoading() {
4+
return (
5+
<div className="container mx-auto max-w-5xl px-4 py-12 md:py-20">
6+
<div className="mb-10 flex flex-col gap-5 md:flex-row md:items-end md:justify-between">
7+
<div className="space-y-4">
8+
<Skeleton className="h-8 w-32 rounded-full" />
9+
<Skeleton className="h-12 w-40" />
10+
<Skeleton className="h-6 w-96 max-w-full" />
11+
</div>
12+
<Skeleton className="h-10 w-40 rounded-xl" />
13+
</div>
14+
15+
<div className="space-y-5">
16+
{[1, 2, 3].map((i) => (
17+
<div key={i} className="rounded-2xl border border-border bg-surface-raised p-6">
18+
<div className="flex items-start gap-3">
19+
<Skeleton className="h-8 w-8 rounded-lg" />
20+
<div className="space-y-2 flex-1">
21+
<Skeleton className="h-6 w-32" />
22+
<Skeleton className="h-5 w-64" />
23+
</div>
24+
</div>
25+
<div className="mt-5 grid gap-4 md:grid-cols-2">
26+
<Skeleton className="h-20 rounded-xl" />
27+
<Skeleton className="h-20 rounded-xl" />
28+
</div>
29+
</div>
30+
))}
31+
</div>
32+
33+
<Skeleton className="mt-6 h-16 w-full rounded-2xl" />
34+
</div>
35+
);
36+
}

‎frontend/src/app/swaps/loading.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { Skeleton } from "@/components/ui";
2+
3+
export default function SwapsLoading() {
4+
return (
5+
<div className="container mx-auto max-w-6xl px-4 py-12 md:py-20">
6+
<div className="mb-8 flex flex-wrap items-center justify-between gap-4">
7+
<div className="flex items-center gap-3">
8+
<Skeleton className="h-10 w-10 rounded-xl" />
9+
<div className="space-y-2">
10+
<Skeleton className="h-8 w-36" />
11+
<Skeleton className="h-5 w-64" />
12+
</div>
13+
</div>
14+
<Skeleton className="h-9 w-24 rounded-xl" />
15+
</div>
16+
17+
<div className="grid gap-6 lg:grid-cols-[1.6fr_1fr]">
18+
<section className="space-y-6">
19+
<div className="rounded-2xl border border-border bg-surface-raised p-5">
20+
<Skeleton className="h-4 w-24 mb-2" />
21+
<Skeleton className="h-10 w-full rounded-xl" />
22+
</div>
23+
24+
<div className="grid gap-4 sm:grid-cols-2">
25+
<div className="rounded-2xl border border-border bg-surface-raised p-5">
26+
<Skeleton className="h-4 w-28 mb-3" />
27+
<Skeleton className="h-6 w-32" />
28+
</div>
29+
<div className="rounded-2xl border border-border bg-surface-raised p-5">
30+
<Skeleton className="h-4 w-20 mb-3" />
31+
<Skeleton className="h-6 w-40" />
32+
</div>
33+
</div>
34+
35+
<div className="rounded-2xl border border-border bg-surface-raised p-5">
36+
<Skeleton className="h-5 w-32 mb-4" />
37+
<div className="space-y-3">
38+
{Array.from({ length: 4 }).map((_, i) => (
39+
<div key={i} className="flex items-center justify-between p-3 rounded-xl border border-border bg-surface-overlay">
40+
<Skeleton className="h-5 w-40" />
41+
<Skeleton className="h-5 w-20 rounded-full" />
42+
</div>
43+
))}
44+
</div>
45+
</div>
46+
</section>
47+
48+
<aside className="space-y-6">
49+
<div className="rounded-2xl border border-border bg-surface-raised p-5">
50+
<Skeleton className="h-4 w-28 mb-4" />
51+
<div className="space-y-3">
52+
{Array.from({ length: 4 }).map((_, i) => (
53+
<div key={i} className="rounded-xl border border-border bg-surface-overlay p-3">
54+
<div className="flex items-center justify-between">
55+
<Skeleton className="h-5 w-32" />
56+
<Skeleton className="h-5 w-16 rounded-full" />
57+
</div>
58+
<Skeleton className="h-4 w-24 mt-2" />
59+
</div>
60+
))}
61+
</div>
62+
</div>
63+
64+
<div className="rounded-2xl border border-border bg-surface-raised p-5">
65+
<Skeleton className="h-4 w-32 mb-4" />
66+
<Skeleton className="h-12 w-full rounded-xl" />
67+
</div>
68+
69+
<div className="rounded-2xl border border-border bg-surface-raised p-5">
70+
<Skeleton className="h-4 w-28 mb-3" />
71+
<Skeleton className="h-5 w-48" />
72+
<Skeleton className="h-5 w-32 mt-2" />
73+
</div>
74+
</aside>
75+
</div>
76+
</div>
77+
);
78+
}

0 commit comments

Comments
 (0)