From a7224cc4aaf0aa4a583370a61c1b96f0544e9403 Mon Sep 17 00:00:00 2001 From: omosvico Date: Wed, 29 Jul 2026 06:29:51 +0100 Subject: [PATCH] feat: add loading.tsx skeleton states for all dashboard routes (#227) --- .../src/app/dashboard/api-keys/loading.tsx | 56 ++++++++++ .../src/app/dashboard/audit-logs/loading.tsx | 61 +++++++++++ .../src/app/dashboard/compliance/loading.tsx | 70 ++++++++++++ .../src/app/dashboard/escrow/loading.tsx | 55 ++++++++++ apps/frontend/src/app/dashboard/loading.tsx | 103 ++++++++++++++++++ .../src/app/dashboard/payments/loading.tsx | 57 ++++++++++ .../app/dashboard/subscriptions/loading.tsx | 55 ++++++++++ .../src/app/dashboard/tokens/loading.tsx | 43 ++++++++ .../src/app/dashboard/treasury/loading.tsx | 91 ++++++++++++++++ .../src/app/dashboard/webhooks/loading.tsx | 55 ++++++++++ 10 files changed, 646 insertions(+) create mode 100644 apps/frontend/src/app/dashboard/api-keys/loading.tsx create mode 100644 apps/frontend/src/app/dashboard/audit-logs/loading.tsx create mode 100644 apps/frontend/src/app/dashboard/compliance/loading.tsx create mode 100644 apps/frontend/src/app/dashboard/escrow/loading.tsx create mode 100644 apps/frontend/src/app/dashboard/loading.tsx create mode 100644 apps/frontend/src/app/dashboard/payments/loading.tsx create mode 100644 apps/frontend/src/app/dashboard/subscriptions/loading.tsx create mode 100644 apps/frontend/src/app/dashboard/tokens/loading.tsx create mode 100644 apps/frontend/src/app/dashboard/treasury/loading.tsx create mode 100644 apps/frontend/src/app/dashboard/webhooks/loading.tsx diff --git a/apps/frontend/src/app/dashboard/api-keys/loading.tsx b/apps/frontend/src/app/dashboard/api-keys/loading.tsx new file mode 100644 index 0000000..c5b72cd --- /dev/null +++ b/apps/frontend/src/app/dashboard/api-keys/loading.tsx @@ -0,0 +1,56 @@ +import { Skeleton } from '@/app/components/ui/skeleton'; + +export default function ApiKeysLoading() { + return ( +
+
+ + +
+ +
+
+ +
+ + +
+
+
+ +
+ +
+ +
+
+ {Array.from({ length: 2 }).map((_, i) => ( +
+
+
+
+ + +
+
+ + + +
+
+ + +
+
+
+ + +
+
+
+ ))} +
+
+
+ ); +} diff --git a/apps/frontend/src/app/dashboard/audit-logs/loading.tsx b/apps/frontend/src/app/dashboard/audit-logs/loading.tsx new file mode 100644 index 0000000..9c1d90c --- /dev/null +++ b/apps/frontend/src/app/dashboard/audit-logs/loading.tsx @@ -0,0 +1,61 @@ +import { Skeleton } from '@/app/components/ui/skeleton'; + +export default function AuditLogsLoading() { + return ( +
+
+ + +
+ +
+ {Array.from({ length: 4 }).map((_, i) => ( +
+ + +
+ ))} +
+ +
+
+ + +
+
+ + +
+ +
+
+ + + + {Array.from({ length: 6 }).map((_, i) => ( + + ))} + + + + {Array.from({ length: 8 }).map((_, i) => ( + + {Array.from({ length: 6 }).map((_, j) => ( + + ))} + + ))} + +
+ +
+ +
+
+
+
+ ); +} diff --git a/apps/frontend/src/app/dashboard/compliance/loading.tsx b/apps/frontend/src/app/dashboard/compliance/loading.tsx new file mode 100644 index 0000000..b600a7c --- /dev/null +++ b/apps/frontend/src/app/dashboard/compliance/loading.tsx @@ -0,0 +1,70 @@ +import { Skeleton } from '@/app/components/ui/skeleton'; + +export default function ComplianceLoading() { + return ( +
+
+ + +
+ +
+ {Array.from({ length: 4 }).map((_, i) => ( +
+
+ + +
+ +
+ ))} +
+ +
+
+ +
+ {Array.from({ length: 4 }).map((_, i) => ( +
+
+
+ + +
+ +
+
+ ))} +
+ +
+ +
+ +
+ {Array.from({ length: 3 }).map((_, i) => ( +
+
+ + +
+
+ ))} +
+
+
+ +
+ + +
+
+
+
+
+
+ ); +} diff --git a/apps/frontend/src/app/dashboard/escrow/loading.tsx b/apps/frontend/src/app/dashboard/escrow/loading.tsx new file mode 100644 index 0000000..601a52d --- /dev/null +++ b/apps/frontend/src/app/dashboard/escrow/loading.tsx @@ -0,0 +1,55 @@ +import { Skeleton } from '@/app/components/ui/skeleton'; + +export default function EscrowLoading() { + return ( +
+
+ + +
+ +
+ {Array.from({ length: 3 }).map((_, i) => ( +
+ + +
+ ))} +
+ +
+ +
+ +
+
+ + + + {Array.from({ length: 7 }).map((_, i) => ( + + ))} + + + + {Array.from({ length: 3 }).map((_, i) => ( + + {Array.from({ length: 7 }).map((_, j) => ( + + ))} + + ))} + +
+ +
+ +
+
+
+
+ ); +} diff --git a/apps/frontend/src/app/dashboard/loading.tsx b/apps/frontend/src/app/dashboard/loading.tsx new file mode 100644 index 0000000..f56d229 --- /dev/null +++ b/apps/frontend/src/app/dashboard/loading.tsx @@ -0,0 +1,103 @@ +import { Skeleton } from '@/app/components/ui/skeleton'; + +export default function OverviewLoading() { + return ( +
+
+ + +
+ +
+ {Array.from({ length: 4 }).map((_, i) => ( +
+ + + +
+ ))} +
+ +
+
+
+ + +
+
+ {Array.from({ length: 3 }).map((_, i) => ( +
+
+
+ +
+ + +
+
+
+ + +
+
+ +
+ ))} +
+
+ +
+ +
+ +
+
+ {Array.from({ length: 3 }).map((_, i) => ( +
+ + +
+ ))} +
+
+
+ +
+
+
+ + +
+ +
+
+ + + + {Array.from({ length: 7 }).map((_, i) => ( + + ))} + + + + {Array.from({ length: 5 }).map((_, i) => ( + + {Array.from({ length: 7 }).map((_, j) => ( + + ))} + + ))} + +
+ +
+ +
+
+
+
+ ); +} diff --git a/apps/frontend/src/app/dashboard/payments/loading.tsx b/apps/frontend/src/app/dashboard/payments/loading.tsx new file mode 100644 index 0000000..c49342c --- /dev/null +++ b/apps/frontend/src/app/dashboard/payments/loading.tsx @@ -0,0 +1,57 @@ +import { Skeleton } from '@/app/components/ui/skeleton'; + +export default function PaymentsLoading() { + return ( +
+
+ + +
+ +
+ + + +
+ +
+ {Array.from({ length: 4 }).map((_, i) => ( +
+ + +
+ ))} +
+ +
+
+ + + + {Array.from({ length: 7 }).map((_, i) => ( + + ))} + + + + {Array.from({ length: 10 }).map((_, i) => ( + + {Array.from({ length: 7 }).map((_, j) => ( + + ))} + + ))} + +
+ +
+ +
+
+
+
+ ); +} diff --git a/apps/frontend/src/app/dashboard/subscriptions/loading.tsx b/apps/frontend/src/app/dashboard/subscriptions/loading.tsx new file mode 100644 index 0000000..81fd9ec --- /dev/null +++ b/apps/frontend/src/app/dashboard/subscriptions/loading.tsx @@ -0,0 +1,55 @@ +import { Skeleton } from '@/app/components/ui/skeleton'; + +export default function SubscriptionsLoading() { + return ( +
+
+ + +
+ +
+ {Array.from({ length: 3 }).map((_, i) => ( +
+ + +
+ ))} +
+ +
+ +
+ +
+
+ + + + {Array.from({ length: 7 }).map((_, i) => ( + + ))} + + + + {Array.from({ length: 3 }).map((_, i) => ( + + {Array.from({ length: 7 }).map((_, j) => ( + + ))} + + ))} + +
+ +
+ +
+
+
+
+ ); +} diff --git a/apps/frontend/src/app/dashboard/tokens/loading.tsx b/apps/frontend/src/app/dashboard/tokens/loading.tsx new file mode 100644 index 0000000..3b0b5a2 --- /dev/null +++ b/apps/frontend/src/app/dashboard/tokens/loading.tsx @@ -0,0 +1,43 @@ +import { Skeleton } from '@/app/components/ui/skeleton'; + +export default function TokensLoading() { + return ( +
+
+ + +
+ +
+ +
+ +
+
+ + + + {Array.from({ length: 6 }).map((_, i) => ( + + ))} + + + + {Array.from({ length: 4 }).map((_, i) => ( + + {Array.from({ length: 6 }).map((_, j) => ( + + ))} + + ))} + +
+ +
+ +
+
+
+
+ ); +} diff --git a/apps/frontend/src/app/dashboard/treasury/loading.tsx b/apps/frontend/src/app/dashboard/treasury/loading.tsx new file mode 100644 index 0000000..50558d1 --- /dev/null +++ b/apps/frontend/src/app/dashboard/treasury/loading.tsx @@ -0,0 +1,91 @@ +import { Skeleton } from '@/app/components/ui/skeleton'; + +export default function TreasuryLoading() { + return ( +
+
+ + +
+ +
+ {Array.from({ length: 4 }).map((_, i) => ( +
+ + + +
+ ))} +
+ +
+ +
+ {Array.from({ length: 3 }).map((_, i) => ( +
+
+
+ +
+
+ + +
+
+ + + +
+
+ + +
+
+
+ ))} +
+
+ +
+
+ +
+ {Array.from({ length: 4 }).map((_, i) => ( +
+
+ + +
+
+ + +
+
+ ))} +
+
+ +
+ +
+ {Array.from({ length: 3 }).map((_, i) => ( +
+
+ + +
+ +
+ +
+
+ ))} +
+
+
+
+ ); +} diff --git a/apps/frontend/src/app/dashboard/webhooks/loading.tsx b/apps/frontend/src/app/dashboard/webhooks/loading.tsx new file mode 100644 index 0000000..0ac8883 --- /dev/null +++ b/apps/frontend/src/app/dashboard/webhooks/loading.tsx @@ -0,0 +1,55 @@ +import { Skeleton } from '@/app/components/ui/skeleton'; + +export default function WebhooksLoading() { + return ( +
+
+ + +
+ +
+ {Array.from({ length: 3 }).map((_, i) => ( +
+ + +
+ ))} +
+ +
+ +
+ +
+
+ + + + {Array.from({ length: 6 }).map((_, i) => ( + + ))} + + + + {Array.from({ length: 3 }).map((_, i) => ( + + {Array.from({ length: 6 }).map((_, j) => ( + + ))} + + ))} + +
+ +
+ +
+
+
+
+ ); +}