From 1dd0063cd97b9fc2d0b7221e70397cb85e315b0d Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Fri, 6 Feb 2026 21:00:01 +0800 Subject: [PATCH 01/38] added .gitignore --- .gitignore | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.gitignore b/.gitignore index 22c86b3..0a2ef9f 100644 --- a/.gitignore +++ b/.gitignore @@ -25,3 +25,6 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts + + +.vscode/ \ No newline at end of file From 32fb672eec02c1b25f414edc85cd6add90785c1a Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Fri, 6 Feb 2026 21:00:01 +0800 Subject: [PATCH 02/38] feat: added Skeleton for the bullion-card --- client/components/ui/bullion-card.tsx | 68 +++++++++++++++++++-------- 1 file changed, 49 insertions(+), 19 deletions(-) diff --git a/client/components/ui/bullion-card.tsx b/client/components/ui/bullion-card.tsx index 474cc73..256a8e4 100644 --- a/client/components/ui/bullion-card.tsx +++ b/client/components/ui/bullion-card.tsx @@ -1,5 +1,6 @@ import React from "react"; import { cn } from "@/lib/utils"; +import { Skeleton } from "@/components/ui/skeleton"; interface BullionCardProps { type: "gold" | "silver" | "platinum"; @@ -51,25 +52,20 @@ const BullionCard: React.FC = ({ const theme = metalStyles[type]; - return ( +return ( <> - {/* Animation Style Block */}
{/* MAIN CARD SLAB */} @@ -91,18 +87,17 @@ const BullionCard: React.FC = ({ style={{ backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.5'/%3E%3C/svg%3E")` }} /> - {/* Layer B: Glass Reflection (Static) */} + {/* Layer B: Glass Reflection */}
- {/* Layer C: Moving Sheen (Holographic Loop) */} + {/* Layer C: Moving Sheen */}
+ className={cn( + "shimmer-effect absolute inset-0 z-20 -translate-x-[140%] skew-x-[-45deg]", + "bg-gradient-to-r from-transparent via-white/10 via-30% via-white/70 via-50% to-transparent", + "mix-blend-overlay" + )} + /> {/* Layer D: Sharp Edge Highlights */}
@@ -126,7 +121,7 @@ const BullionCard: React.FC = ({

@@ -166,4 +161,39 @@ const BullionCard: React.FC = ({ ); }; +export function BullionCardSkeleton({ className }: { className?: string }) { + return ( +
+
+ {/*Purity Mark */} +
+ + +
+ + {/* Circle & Text */} +
+ + +
+ + {/* Price Tag*/ } +
+
+ + +
+ +
+
+ +
+
+ ) +} export default BullionCard; \ No newline at end of file From 088b61456c95a3e37428683147f1652eaf9c47b0 Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Fri, 6 Feb 2026 21:00:01 +0800 Subject: [PATCH 03/38] feat: implemented matching skeleton loader --- client/components/ui/card.tsx | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/client/components/ui/card.tsx b/client/components/ui/card.tsx index 25d6d61..43e2cb6 100644 --- a/client/components/ui/card.tsx +++ b/client/components/ui/card.tsx @@ -1,6 +1,7 @@ import * as React from 'react' import { cn } from '@/lib/utils' +import { Skeleton } from '@/components/ui/skeleton' function Card({ className, ...props }: React.ComponentProps<'div'>) { return ( @@ -81,6 +82,35 @@ function CardFooter({ className, ...props }: React.ComponentProps<'div'>) { ) } + +function CardSkeleton ({ className, ...props}: React.ComponentProps<'div'>) { + return ( + +
+
+ + +
+ +
+ +
+ +
+ +
+
+ + ) +} + export { Card, CardHeader, @@ -89,4 +119,5 @@ export { CardAction, CardDescription, CardContent, + CardSkeleton } From 3cd6f5839b0d3a6e2add81df5f3e410bbb4e0ced Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Fri, 6 Feb 2026 21:00:01 +0800 Subject: [PATCH 04/38] feat: added HoverCardSkeleton matching the hover-card --- client/components/ui/hover-card.tsx | 33 ++++++++++++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/client/components/ui/hover-card.tsx b/client/components/ui/hover-card.tsx index 55d6f76..3ee300f 100644 --- a/client/components/ui/hover-card.tsx +++ b/client/components/ui/hover-card.tsx @@ -3,6 +3,8 @@ import * as React from 'react' import * as HoverCardPrimitive from '@radix-ui/react-hover-card' +import { Skeleton } from '@/components/ui/skeleton' + import { cn } from '@/lib/utils' function HoverCard({ @@ -41,4 +43,33 @@ function HoverCardContent({ ) } -export { HoverCard, HoverCardTrigger, HoverCardContent } +function HoverCardSkeleton({ className, ...props }: React.ComponentProps<'div'>) { + return ( +
+ {/* Avatar Placeholder */} + + +
+ {/* Title / Username */} + + + {/* Bio / Details */} +
+ + +
+ + {/* Optional: Meta row (e.g., 'Joined Dec 2023') */} +
+ + +
+
+
+ ) +} + +export { HoverCard, HoverCardTrigger, HoverCardContent, HoverCardSkeleton} From 52b7a6c373e2173137ccedc3f18f1969f0537550 Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Fri, 6 Feb 2026 21:00:03 +0800 Subject: [PATCH 05/38] feat: added HoverCardSkeleton matching the hover-card --- client/components/ui/skeleton.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/components/ui/skeleton.tsx b/client/components/ui/skeleton.tsx index e3beb90..61ddd48 100644 --- a/client/components/ui/skeleton.tsx +++ b/client/components/ui/skeleton.tsx @@ -11,3 +11,4 @@ function Skeleton({ className, ...props }: React.ComponentProps<'div'>) { } export { Skeleton } + \ No newline at end of file From 730a8ccb0e37d7c37abd898a6d1a84f47618e253 Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Fri, 6 Feb 2026 21:15:10 +0800 Subject: [PATCH 06/38] feat: implemented Skeleton on BulltionCard --- client/components/views/dashboard-view.tsx | 104 ++++++++++++++++----- 1 file changed, 82 insertions(+), 22 deletions(-) diff --git a/client/components/views/dashboard-view.tsx b/client/components/views/dashboard-view.tsx index ee1ed0d..6f192fa 100644 --- a/client/components/views/dashboard-view.tsx +++ b/client/components/views/dashboard-view.tsx @@ -1,10 +1,18 @@ 'use client' +import { useState, useEffect } from 'react' import Image from 'next/image' import { PortfolioOverview } from '@/components/portfolio-overview' import { AssetAllocationChart } from '@/components/asset-allocation-chart' import { ShariaCertificationHub } from '@/components/sharia-certification-hub' -import BullionCard from '@/components/ui/bullion-card' +import BullionCard, { BullionCardSkeleton } from '@/components/ui/bullion-card' + +// 1. ADD NEW IMPORTS HERE +import { + HoverCard, + HoverCardContent, + HoverCardTrigger, +} from "@/components/ui/hover-card" export function DashboardView() { const showroomItems = [ @@ -13,20 +21,55 @@ export function DashboardView() { { type: "platinum" as const, weight: "500 g", purity: "999.5", price: "$14,800.00" }, { type: "gold" as const, weight: "100 g", purity: "999.9", price: "$7,450.00" }, ]; + + const [isLoading, setIsLoading] = useState(true) + + useEffect(() => { + const timer = setTimeout(() => setIsLoading(false), 2000) + return () => clearTimeout(timer) + }, []) return ( -
+
+ {/* Live Ledger Ticker */} -
-
+
+
{[...Array(2)].map((_, i) => (
Network Connectivity: 100%
+ Latest Block: #8,421,093 - Vault A1-X: Re-verified by Lead Auditor + + + + Vault A1-X: Re-verified by Lead Auditor + + + +
+

Audit Certificate #8921

+

+ Verified by Deloitte on Oct 14, 2024. + Gold purity confirmed via ultrasonic testing (ASTM E114). +

+
+
+ + + + + Verification Passed +
+
+
+ + + + Last Synced: 2s ago
))} @@ -59,34 +102,51 @@ export function DashboardView() { {/* Asset Allocation Charts */} - {/* Sharia Certification Hub - Moved inside grid for better density */} + {/* Sharia Certification Hub */}
-
+ + {/* Bullion Showroom & Testing Area */} +
-

- Bullion Showroom -

+
+

+ Bullion Showroom +

+ {/* Toggle Button for Skeleton Test */} + +
+
- {showroomItems.map((item, idx) => ( - - ))} + {isLoading ? ( + Array.from({ length: 4 }).map((_, idx) => ( + + )) + ) : ( + showroomItems.map((item, idx) => ( + + )) + )}
-
) -} +} \ No newline at end of file From dbda4fe0c095564845e4677734b13cc0de7e892f Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Fri, 6 Feb 2026 21:15:10 +0800 Subject: [PATCH 07/38] feat: implemented skeleton loader that matches with the hover card --- client/components/ui/hover-card.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/components/ui/hover-card.tsx b/client/components/ui/hover-card.tsx index 3ee300f..aea936d 100644 --- a/client/components/ui/hover-card.tsx +++ b/client/components/ui/hover-card.tsx @@ -56,7 +56,7 @@ function HoverCardSkeleton({ className, ...props }: React.ComponentProps<'div'>) {/* Title / Username */} - {/* Bio / Details */} + {/* Bio / Details */}
From 5637999affef96cf3a65ff245ebac29e1dd43c65 Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Fri, 6 Feb 2026 21:15:10 +0800 Subject: [PATCH 08/38] refactor: added CardSkeleton from the import --- client/components/views/por-view.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/components/views/por-view.tsx b/client/components/views/por-view.tsx index 27140c3..10874ed 100644 --- a/client/components/views/por-view.tsx +++ b/client/components/views/por-view.tsx @@ -2,7 +2,7 @@ import { useState, useEffect } from 'react' import { ShieldCheck, CheckCircle, ArrowsClockwise, ArrowSquareOut, Clock, Database, Coins, WarningCircle } from '@phosphor-icons/react' -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' +import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardSkeleton } from '@/components/ui/card' import { Button } from '@/components/ui/button' import { Badge } from '@/components/ui/badge' import { Progress } from '@/components/ui/progress' From d7314f3b3f67ed1691cfb6cc0089c267f00a0a56 Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Sun, 15 Feb 2026 01:39:52 +0800 Subject: [PATCH 09/38] feat: imported Skeleton Component --- client/components/views/por-view.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/components/views/por-view.tsx b/client/components/views/por-view.tsx index d22c3f7..a4511a2 100644 --- a/client/components/views/por-view.tsx +++ b/client/components/views/por-view.tsx @@ -9,6 +9,7 @@ import { Progress } from '@/components/ui/progress' import { ScrollArea } from '@/components/ui/scroll-area' import { useAPAXStore, formatWeight } from '@/lib/store' import { LiveSecurityTerminal } from '@/components/shared/live-security-terminal' +import { Skeleton } from '@/components/ui/skeleton' export function PorView() { const { vaultData, auditLogs } = useAPAXStore() From aa410d37b3db5d77cdf850401e26a3ee620f059b Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Sun, 15 Feb 2026 01:42:11 +0800 Subject: [PATCH 10/38] feat: added useState and useEffect from for skeletong loading --- client/components/views/por-view.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/client/components/views/por-view.tsx b/client/components/views/por-view.tsx index a4511a2..5f796ce 100644 --- a/client/components/views/por-view.tsx +++ b/client/components/views/por-view.tsx @@ -15,6 +15,13 @@ export function PorView() { const { vaultData, auditLogs } = useAPAXStore() const [isRefreshing, setIsRefreshing] = useState(false) + const [isLoading, setIsLoading ] = useState(true) + + useEffect(() => { + const timer = setTimeout(() => setIsLoading(false), 2000) + return() => clearTimeout(timer) + }, []) + // Calculate reserve ratio const totalMetalGrams = vaultData.totalGoldGrams + vaultData.totalSilverGrams + vaultData.totalPlatinumGrams const reserveRatio = (totalMetalGrams / vaultData.totalTokensMinted) * 100 From d6e6bee5b6f784180e696c598fa5b8be0547b19c Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Sun, 15 Feb 2026 01:47:55 +0800 Subject: [PATCH 11/38] feat: aadded matching skeleton loader for Main grid --- client/components/views/por-view.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/client/components/views/por-view.tsx b/client/components/views/por-view.tsx index 5f796ce..fb59979 100644 --- a/client/components/views/por-view.tsx +++ b/client/components/views/por-view.tsx @@ -43,6 +43,10 @@ export function PorView() { return `${Math.floor(diffMins / 1440)}d ago` } + if(isLoading) { + return + } + return (
{/* Page Header */} @@ -302,3 +306,15 @@ export function PorView() {
) } + +function PorViewSkeleton() { + return ( +
+
+ + +
+ +
+ ) +} From 65639fd1bb0996d703da3992b4be366bd8ef02e2 Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Sun, 15 Feb 2026 01:56:14 +0800 Subject: [PATCH 12/38] feat: Implemented skeleton loader for the main grid --- client/components/views/por-view.tsx | 35 +++++++++++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/client/components/views/por-view.tsx b/client/components/views/por-view.tsx index fb59979..e1adcaa 100644 --- a/client/components/views/por-view.tsx +++ b/client/components/views/por-view.tsx @@ -309,12 +309,45 @@ export function PorView() { function PorViewSkeleton() { return ( -
+ +
+
+ + + +
+ + + + +
+ + +
+ + + + + + + +
+ + +
+ + + + + +
+
+ ) } From bebf2488487f46b3f0be1989746f7f50850f9423 Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Sun, 15 Feb 2026 01:59:26 +0800 Subject: [PATCH 13/38] feat: added Skeleton for the right Card (tokens) --- client/components/views/por-view.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/client/components/views/por-view.tsx b/client/components/views/por-view.tsx index e1adcaa..83435fa 100644 --- a/client/components/views/por-view.tsx +++ b/client/components/views/por-view.tsx @@ -344,7 +344,21 @@ function PorViewSkeleton() { + + + + +
+ + +
+ + + + + +
From 071dabada904fa3e8a570373c31339cf6dab830c Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Sun, 15 Feb 2026 02:09:19 +0800 Subject: [PATCH 14/38] feat: implemented skeleton loader for Main content area --- client/components/views/por-view.tsx | 69 +++++++++++++++------------- 1 file changed, 38 insertions(+), 31 deletions(-) diff --git a/client/components/views/por-view.tsx b/client/components/views/por-view.tsx index 83435fa..4ce2940 100644 --- a/client/components/views/por-view.tsx +++ b/client/components/views/por-view.tsx @@ -322,44 +322,51 @@ function PorViewSkeleton() {
- - - + + + -
- - -
- +
+ + +
+ + + + + + + +
+ + +
+ + - - - - + + + -
- - +
+ +
- - - - - - - -
- - -
- - - + - - + + +
+ + + +
+ + + +
From d0c6ba00b1eed34b19429a64b8d3752dd3d8c423 Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Sun, 15 Feb 2026 02:10:04 +0800 Subject: [PATCH 15/38] feat: implemented skeleton loader in Live Security Field --- client/components/views/por-view.tsx | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/client/components/views/por-view.tsx b/client/components/views/por-view.tsx index 4ce2940..6dc0154 100644 --- a/client/components/views/por-view.tsx +++ b/client/components/views/por-view.tsx @@ -366,7 +366,30 @@ function PorViewSkeleton() { - + {/* Live Security Feed skeleton*/} + + + +
+ +
+ + +
+
+ + + +
+ + + + + +
+ + +
From 54a7bfb21411b88138438d7f50320bcea5aa3762 Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Sun, 15 Feb 2026 02:36:45 +0800 Subject: [PATCH 16/38] refactor: added skeleton loader to the content --- client/components/views/por-view.tsx | 64 +++++++++++++++++++--------- 1 file changed, 43 insertions(+), 21 deletions(-) diff --git a/client/components/views/por-view.tsx b/client/components/views/por-view.tsx index 6dc0154..d9a1c23 100644 --- a/client/components/views/por-view.tsx +++ b/client/components/views/por-view.tsx @@ -310,40 +310,62 @@ export function PorView() { function PorViewSkeleton() { return ( -
+
+ {/* Header Skeleton */}
-
- - +
+ + +
+
- -
+ {/* Banner Skeleton */} + - + {/* Main Grid Skeleton */}
- + {/* Left Card Skeleton */} + - + +
+ + +
+ + +
+
+ + +
+ +
-
- - +
+
+ + +
+ +
+
+
+ + +
+
- - - - - - -
- - +
+ +
+ {/* Right Card Skeleton (Tokens) */} From d2bd5d864a95d11941eb86fd408b4b9d75633b4a Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Sun, 15 Feb 2026 02:38:32 +0800 Subject: [PATCH 17/38] refactor: added skeleton loader for the right grid --- client/components/views/por-view.tsx | 57 +++++++++++++++++++--------- 1 file changed, 39 insertions(+), 18 deletions(-) diff --git a/client/components/views/por-view.tsx b/client/components/views/por-view.tsx index d9a1c23..0eebfeb 100644 --- a/client/components/views/por-view.tsx +++ b/client/components/views/por-view.tsx @@ -366,26 +366,47 @@ function PorViewSkeleton() { {/* Right Card Skeleton (Tokens) */} - - - - -
- - -
+ + + +
+ + +
+ + + {/* Big Token Number Block */} +
+ + + +
- + {/* 3 Small Grids Breakdown */} +
+
+ + +
+
+ + +
+
+ + +
+
- - -
- - - -
- - + {/* Reserve Ratio Bottom Block */} +
+
+ + +
+ +
+ {/* Live Security Feed skeleton*/} From a4a2a4769ab758ccce2895c170ef5ee9a6bbcc1b Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Sun, 15 Feb 2026 02:38:43 +0800 Subject: [PATCH 18/38] refactor: added HoverSkeleton on the import --- client/components/views/dashboard-view.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/client/components/views/dashboard-view.tsx b/client/components/views/dashboard-view.tsx index 81f6ee2..504de0a 100644 --- a/client/components/views/dashboard-view.tsx +++ b/client/components/views/dashboard-view.tsx @@ -7,13 +7,7 @@ import { AssetAllocationChart } from '@/components/asset-allocation-chart' import { ShariaCertificationHub } from '@/components/sharia-certification-hub' import { MetalPriceHistoryChart } from '@/components/charts/metal-price-history' import BullionCard, { BullionCardSkeleton } from '@/components/ui/bullion-card' - - -import { - HoverCard, - HoverCardContent, - HoverCardTrigger, -} from "@/components/ui/hover-card" +import { HoverCard, HoverCardContent, HoverCardTrigger, HoverCardSkeleton} from "@/components/ui/hover-card" export function DashboardView() { const showroomItems = [ From 35d085cdba2f1bf02590d4cde4d1565f01d07121 Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Sun, 15 Feb 2026 02:42:07 +0800 Subject: [PATCH 19/38] refactor: nested div container separately for both left and right cards on grid --- client/components/views/por-view.tsx | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/client/components/views/por-view.tsx b/client/components/views/por-view.tsx index 0eebfeb..d6e1980 100644 --- a/client/components/views/por-view.tsx +++ b/client/components/views/por-view.tsx @@ -324,8 +324,9 @@ function PorViewSkeleton() { {/* Main Grid Skeleton */} -
- {/* Left Card Skeleton */} +
+ + {/* LEFT CARD: Vault Holdings Panel */} @@ -335,14 +336,16 @@ function PorViewSkeleton() {
+ {/* Row 1: Gold Mimic */}
- - + {/* Label */} + {/* Value */}
- + {/* Progress Bar */}
+ {/* Row 2: Silver Mimic */}
@@ -350,6 +353,8 @@ function PorViewSkeleton() {
+ + {/* Row 3: Platinum Mimic */}
@@ -358,6 +363,7 @@ function PorViewSkeleton() {
+ {/* Bottom Total Row */}
@@ -365,7 +371,7 @@ function PorViewSkeleton() { - {/* Right Card Skeleton (Tokens) */} + {/* RIGHT CARD: Token Supply Panel */} @@ -408,7 +414,7 @@ function PorViewSkeleton() {
- +
{/* Live Security Feed skeleton*/} @@ -434,7 +440,7 @@ function PorViewSkeleton() {
-
+ ) } From 38b2be5059c7270d714c6554c366a735174b4a33 Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Sun, 15 Feb 2026 02:43:41 +0800 Subject: [PATCH 20/38] refactor: use of skeleton for the content of live security field --- client/components/views/por-view.tsx | 36 +++++++++++++--------------- 1 file changed, 17 insertions(+), 19 deletions(-) diff --git a/client/components/views/por-view.tsx b/client/components/views/por-view.tsx index d6e1980..cc4e9ae 100644 --- a/client/components/views/por-view.tsx +++ b/client/components/views/por-view.tsx @@ -418,27 +418,25 @@ function PorViewSkeleton() { {/* Live Security Feed skeleton*/} - +
- -
- - -
+ +
+ + +
- - - -
- - - - - -
- - - + + + +
+ + + + +
+ +
From b34a21463295eaa75e4848c0d0c967b2f76884a8 Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Sun, 15 Feb 2026 02:44:50 +0800 Subject: [PATCH 21/38] docs: renamed commentsfor ease of understanding --- client/components/views/por-view.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/components/views/por-view.tsx b/client/components/views/por-view.tsx index cc4e9ae..555cdd7 100644 --- a/client/components/views/por-view.tsx +++ b/client/components/views/por-view.tsx @@ -339,10 +339,10 @@ function PorViewSkeleton() { {/* Row 1: Gold Mimic */}
- {/* Label */} - {/* Value */} + +
- {/* Progress Bar */} +
{/* Row 2: Silver Mimic */} From dea71538d12f62c7f099d9c98975efb84c00fe05 Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Fri, 6 Feb 2026 22:05:24 +0800 Subject: [PATCH 22/38] feat: utilized importing Skeleton --- client/components/views/zakat-view.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/client/components/views/zakat-view.tsx b/client/components/views/zakat-view.tsx index 3e65226..f4925b6 100644 --- a/client/components/views/zakat-view.tsx +++ b/client/components/views/zakat-view.tsx @@ -9,6 +9,7 @@ import { Label } from '@/components/ui/label' import { Badge } from '@/components/ui/badge' import { Separator } from '@/components/ui/separator' import { useAPAXStore, formatCurrency } from '@/lib/store' +import { Skeleton } from '@/components/ui/skeleton' import { Tooltip, TooltipContent, @@ -16,6 +17,7 @@ import { TooltipTrigger } from '@/components/ui/tooltip' + export function ZakatView() { const { userHoldings, metalPrices, zakatCalculation, calculateZakat } = useAPAXStore() const [additionalCash, setAdditionalCash] = useState(0) From 74f29a7f851b7e029991bec79fe6bf4be35e5465 Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Fri, 6 Feb 2026 23:30:00 +0800 Subject: [PATCH 23/38] feat: added skeleton loader on CardHeader --- client/components/views/zakat-view.tsx | 31 ++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/client/components/views/zakat-view.tsx b/client/components/views/zakat-view.tsx index f4925b6..0115cf1 100644 --- a/client/components/views/zakat-view.tsx +++ b/client/components/views/zakat-view.tsx @@ -43,6 +43,20 @@ export function ZakatView() { setHasCalculated(true) } + // useState and useEffect for testing + const [isLoading, setIsLoading] = useState(true) + + useEffect(() => { + setTimeout(() => { + setIsLoading(false) + }, 2000) + }, []) + + if(isLoading) { + return + } + + return (
{/* Page Header */} @@ -313,3 +327,20 @@ export function ZakatView() {
) } + +function ZakatViewSkeleton() { + return ( +
+ {/* 1. Page Header Skeleton */} +
+
+ + +
+ +
+ + +
+ ) +} \ No newline at end of file From bd919dcccec9130d52b26aeeb44f15c3cdf96f6f Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Fri, 6 Feb 2026 23:30:00 +0800 Subject: [PATCH 24/38] feat: added skeleton loader on MainContent of the Card --- client/components/views/zakat-view.tsx | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/client/components/views/zakat-view.tsx b/client/components/views/zakat-view.tsx index 0115cf1..9de4f63 100644 --- a/client/components/views/zakat-view.tsx +++ b/client/components/views/zakat-view.tsx @@ -331,7 +331,7 @@ export function ZakatView() { function ZakatViewSkeleton() { return (
- {/* 1. Page Header Skeleton */} + {/* Page Header Skeleton */}
@@ -340,6 +340,29 @@ function ZakatViewSkeleton() {
+ {/* 2. Main Grid Skeleton */} +
+ + {/* LEFT COLUMN (Assets) */} +
+ + {/* APAX Holdings Card Skeleton */} + + + +
+ + +
+ + + + + +
+ + +
) From 76e808504589171bb663805a53b6d9e918fb35c7 Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Fri, 6 Feb 2026 23:35:00 +0800 Subject: [PATCH 25/38] feat: added skeleton loader on MainContent of the Card --- client/components/views/zakat-view.tsx | 41 +++++++++++++++++++++++++- 1 file changed, 40 insertions(+), 1 deletion(-) diff --git a/client/components/views/zakat-view.tsx b/client/components/views/zakat-view.tsx index 9de4f63..cfe15a9 100644 --- a/client/components/views/zakat-view.tsx +++ b/client/components/views/zakat-view.tsx @@ -355,7 +355,46 @@ function ZakatViewSkeleton() {
- + + {/* 3-Col Asset Grid */} +
+ {/* Item 1 */} +
+
+ + +
+ + +
+ {/* Item 2 */} +
+
+ + +
+ + +
+ {/* Item 3 */} +
+
+ + +
+ + +
+
+ +
+ + {/* Total Row */} +
+ + +
+ From 068178e85dd0457bcb084c5f93d0b9c9bfa9efab Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Fri, 6 Feb 2026 23:35:00 +0800 Subject: [PATCH 26/38] feat: added for addional assets --- client/components/views/zakat-view.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/client/components/views/zakat-view.tsx b/client/components/views/zakat-view.tsx index cfe15a9..7b5ea8a 100644 --- a/client/components/views/zakat-view.tsx +++ b/client/components/views/zakat-view.tsx @@ -397,7 +397,19 @@ function ZakatViewSkeleton() { - + {/* Additional Assets Card Skeleton */} + + + + + + +
+ + +
+ +
From 970fa9af808bddbfbf3ea56218399e07cb3de9ed Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Fri, 6 Feb 2026 23:35:00 +0800 Subject: [PATCH 27/38] feat: Added skeleton loader for the left column --- client/components/views/por-view.tsx | 6 +-- client/components/views/zakat-view.tsx | 69 ++++++++++++++++++++++++++ 2 files changed, 72 insertions(+), 3 deletions(-) diff --git a/client/components/views/por-view.tsx b/client/components/views/por-view.tsx index 555cdd7..3facdc2 100644 --- a/client/components/views/por-view.tsx +++ b/client/components/views/por-view.tsx @@ -336,7 +336,7 @@ function PorViewSkeleton() {
- {/* Row 1: Gold Mimic */} + {/* Gold Mimic */}
@@ -345,7 +345,7 @@ function PorViewSkeleton() {
- {/* Row 2: Silver Mimic */} + {/* Silver Mimic */}
@@ -354,7 +354,7 @@ function PorViewSkeleton() {
- {/* Row 3: Platinum Mimic */} + {/* Platinum Mimic */}
diff --git a/client/components/views/zakat-view.tsx b/client/components/views/zakat-view.tsx index 7b5ea8a..93d3fcb 100644 --- a/client/components/views/zakat-view.tsx +++ b/client/components/views/zakat-view.tsx @@ -412,8 +412,77 @@ function ZakatViewSkeleton() {
+ {/* RIGHT COLUMN (Summary) */} +
+ + {/* Nisab Status Skeleton */} + + + + + +
+ + +
+
+ + +
+
+
+ + +
+ + + + {/* Zakat Due Calculation Skeleton */} + + + + + + +
+ + + +
+ + + + + {/* Live Prices Skeleton */} + + +
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + + +
+
+ +
) From 4a17d7a9cf724dfb64977e94d4393f5109fc5346 Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Tue, 10 Feb 2026 19:00:02 +0800 Subject: [PATCH 28/38] feat: added Skeleton for Page Header --- client/components/views/redemption-view.tsx | 36 ++++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/client/components/views/redemption-view.tsx b/client/components/views/redemption-view.tsx index bd8880e..515bece 100644 --- a/client/components/views/redemption-view.tsx +++ b/client/components/views/redemption-view.tsx @@ -1,12 +1,13 @@ 'use client' -import { useState } from 'react' +import { useEffect, useState } from 'react' import Image from 'next/image' import { Flame, Package, Truck, Clock, Info, AlertTriangle } from 'lucide-react' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Button } from '@/components/ui/button' import { Badge } from '@/components/ui/badge' import { useAPAXStore, formatCurrency } from '@/lib/store' +import { Skeleton } from '@/components/ui/skeleton' const bullionOptions = [ { @@ -65,10 +66,21 @@ const bullionOptions = [ } ] +// For simultion of Loading. Will remove it once data fetching is implemented + + export function RedemptionView() { const { userHoldings, metalPrices } = useAPAXStore() const [selectedOption, setSelectedOption] = useState(null) + + const [ isLoading, setIsLoading ] = useState(true) + +useEffect(() => { + const timer = setTimeout(() => setIsLoading(false), 2000) + return() => clearTimeout(timer) + }, []) + const calculatePrice = (metal: string, grams: number) => { const pricePerGram = metal === 'Gold' ? metalPrices.gold / 31.1035 @@ -84,6 +96,10 @@ export function RedemptionView() { return userHoldings.platinumGrams >= grams } + if(isLoading) { + return + } + return (
{/* Page Header */} @@ -284,3 +300,21 @@ export function RedemptionView() {
) } + + +function RedemptionViewSkeleton() { + return ( +
+ {/* 1. Page Header Skeleton */} +
+
+ + +
+ +
+ + +
+ ) +} \ No newline at end of file From 9f8f6458ae9dfbae137973a381d63f60e6fb306e Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Tue, 10 Feb 2026 19:00:15 +0800 Subject: [PATCH 29/38] feat: added Skeleton for Coming Soon Banner --- client/components/views/redemption-view.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/client/components/views/redemption-view.tsx b/client/components/views/redemption-view.tsx index 515bece..2f4420a 100644 --- a/client/components/views/redemption-view.tsx +++ b/client/components/views/redemption-view.tsx @@ -305,7 +305,7 @@ useEffect(() => { function RedemptionViewSkeleton() { return (
- {/* 1. Page Header Skeleton */} + {/* Page Header Skeleton */}
@@ -313,8 +313,21 @@ function RedemptionViewSkeleton() {
+ {/* Coming Soon Banner Skeleton */} + + +
+ +
+ + +
+
+ + +
) } \ No newline at end of file From 4ac1e37b67472b70fdd04b0639b6605804053ed1 Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Tue, 10 Feb 2026 19:00:30 +0800 Subject: [PATCH 30/38] feat: added Skeleton for how it works --- client/components/views/redemption-view.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/client/components/views/redemption-view.tsx b/client/components/views/redemption-view.tsx index 2f4420a..6dfb828 100644 --- a/client/components/views/redemption-view.tsx +++ b/client/components/views/redemption-view.tsx @@ -325,6 +325,24 @@ function RedemptionViewSkeleton() {
+ {/* "How It Works" Skeleton */} + + + + + +
+ {/* Generate 4 Step Placeholders */} + {[...Array(4)].map((_, i) => ( +
+ + + +
+ ))} +
+ + From 96ca5155c0b54748b58fb7197c120ac9148e7391 Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Tue, 10 Feb 2026 19:00:50 +0800 Subject: [PATCH 31/38] feat: added skeleton loader for Info cards --- client/components/views/redemption-view.tsx | 40 +++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/client/components/views/redemption-view.tsx b/client/components/views/redemption-view.tsx index 6dfb828..192b09a 100644 --- a/client/components/views/redemption-view.tsx +++ b/client/components/views/redemption-view.tsx @@ -345,6 +345,46 @@ function RedemptionViewSkeleton() { + {/* Bullion Selection Grid Skeleton */} +
+ +
+ {[...Array(3)].map((_, i) => ( + + +
+ +
+
+ + +
+ + +
+
+ + + ))} +
+
+ + {/* Info Cards Skeleton */} +
+ {[...Array(2)].map((_, i) => ( + + +
+ +
+ + +
+
+ + + ))} +
) From 67c9e3d31ddb3108f0857ac408a59b246558c38e Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Tue, 10 Feb 2026 19:00:50 +0800 Subject: [PATCH 32/38] feat: added skeleton for the final card component --- client/components/views/redemption-view.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/client/components/views/redemption-view.tsx b/client/components/views/redemption-view.tsx index 192b09a..07d0534 100644 --- a/client/components/views/redemption-view.tsx +++ b/client/components/views/redemption-view.tsx @@ -385,7 +385,15 @@ function RedemptionViewSkeleton() { ))}
- + {/* Fee Notice Skeleton */} + + +
+ + +
+ +
) } \ No newline at end of file From be816b17bd0464992d2ce21ae40b1765b59e99a7 Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Wed, 11 Feb 2026 20:00:50 +0800 Subject: [PATCH 33/38] feat: added ShariaViewSkeleton to be loaded first --- client/components/views/sharia-view.tsx | 34 +++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/client/components/views/sharia-view.tsx b/client/components/views/sharia-view.tsx index 5a39b53..a223876 100644 --- a/client/components/views/sharia-view.tsx +++ b/client/components/views/sharia-view.tsx @@ -6,6 +6,8 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com import { Button } from '@/components/ui/button' import { Badge } from '@/components/ui/badge' import { Separator } from '@/components/ui/separator' +import { Skeleton } from '@/components/ui/skeleton' +import {useEffect, useState } from 'react' const advisoryBoard = [ { @@ -84,7 +86,21 @@ const documents = [ } ] + + export function ShariaView() { + +const [isLoading, setIsLoading ] = useState(true) + + useEffect(() => { + const timer = setTimeout(() => setIsLoading(false), 2000) + return() => clearTimeout(timer) + }, []) + + + if(isLoading){ + return + } return (
{/* Page Header */} @@ -273,3 +289,21 @@ export function ShariaView() {
) } + + +function ShariaViewSkeleton() { + return ( +
+ {/* 1. Page Header Skeleton */} +
+
+ + +
+ +
+ + +
+ ) +} From 085d652a9ac4eda04d17d4ac253badcdf13a184a Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Wed, 11 Feb 2026 20:00:50 +0800 Subject: [PATCH 34/38] feat: added skeleton loader for the sharia hero banner --- client/components/views/sharia-view.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/client/components/views/sharia-view.tsx b/client/components/views/sharia-view.tsx index a223876..e6373cb 100644 --- a/client/components/views/sharia-view.tsx +++ b/client/components/views/sharia-view.tsx @@ -294,7 +294,7 @@ const [isLoading, setIsLoading ] = useState(true) function ShariaViewSkeleton() { return (
- {/* 1. Page Header Skeleton */} + {/* Page Header Skeleton */}
@@ -302,7 +302,18 @@ function ShariaViewSkeleton() {
+{/* 2. Hero Banner Skeleton */} + +
+
+ + + +
+
+ +
) From 8535b94febbe3d747fbdafc9e880118d21c5abd1 Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Wed, 11 Feb 2026 20:00:50 +0800 Subject: [PATCH 35/38] feat: added skeleton loader for compliance priciples --- client/components/views/sharia-view.tsx | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/client/components/views/sharia-view.tsx b/client/components/views/sharia-view.tsx index e6373cb..eb22883 100644 --- a/client/components/views/sharia-view.tsx +++ b/client/components/views/sharia-view.tsx @@ -302,7 +302,7 @@ function ShariaViewSkeleton() {
-{/* 2. Hero Banner Skeleton */} + {/* Hero Banner Skeleton */}
@@ -312,8 +312,24 @@ function ShariaViewSkeleton() {
+ {/* 3. Compliance Principles Skeleton */} +
+ +
+ {[...Array(4)].map((_, i) => ( + + + + + + + + + ))} +
+
- +
) From 61f4d0a65759dd3b5f253dae53b4214ff3cb7ec9 Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Wed, 11 Feb 2026 20:00:50 +0800 Subject: [PATCH 36/38] feat: added skeleton loader for advisory board --- client/components/views/sharia-view.tsx | 27 ++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/client/components/views/sharia-view.tsx b/client/components/views/sharia-view.tsx index eb22883..85f8940 100644 --- a/client/components/views/sharia-view.tsx +++ b/client/components/views/sharia-view.tsx @@ -312,7 +312,7 @@ function ShariaViewSkeleton() {
- {/* 3. Compliance Principles Skeleton */} + {/* Compliance Principles Skeleton */}
@@ -329,7 +329,32 @@ function ShariaViewSkeleton() {
+ {/* Advisory Board Skeleton */} + + + +
+ + +
+ + +
+ {[...Array(3)].map((_, i) => ( +
+ + + + + +
+ ))} +
+ + + +

) From 765fe1f190d682a6f53abcbd2605464431dfff30 Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Wed, 11 Feb 2026 20:00:50 +0800 Subject: [PATCH 37/38] feat: added skeleton loader for verification banner --- client/components/views/sharia-view.tsx | 44 ++++++++++++++++++++++++- 1 file changed, 43 insertions(+), 1 deletion(-) diff --git a/client/components/views/sharia-view.tsx b/client/components/views/sharia-view.tsx index 85f8940..e373327 100644 --- a/client/components/views/sharia-view.tsx +++ b/client/components/views/sharia-view.tsx @@ -353,7 +353,49 @@ function ShariaViewSkeleton() { - + {/* 5. Document Vault Skeleton */} + + + +
+ + +
+ + +
+ {[...Array(5)].map((_, i) => ( +
+
+ +
+ + +
+
+
+ + +
+
+ ))} +
+ + + + {/* Verification Banner Skeleton */} + + +
+ +
+ + +
+
+ + +
From 72241c84216514bbbb6f473cce35331d2038f948 Mon Sep 17 00:00:00 2001 From: N0Obitaz Date: Mon, 16 Feb 2026 09:25:45 +0800 Subject: [PATCH 38/38] fix: missing BullionCardSkeleton import --- client/components/views/dashboard-view.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/components/views/dashboard-view.tsx b/client/components/views/dashboard-view.tsx index 0a14b50..f02c29b 100644 --- a/client/components/views/dashboard-view.tsx +++ b/client/components/views/dashboard-view.tsx @@ -7,6 +7,7 @@ import { ShariaCertificationHub } from "@/components/sharia-certification-hub"; import { MetalPriceHistoryChart } from "@/components/charts/metal-price-history"; import BullionCard from '@/components/ui/bullion-card' import { useEffect, useState } from 'react' +import { BullionCardSkeleton } from "@/components/ui/bullion-card"; import { HoverCard, HoverCardContent, HoverCardTrigger, HoverCardSkeleton} from "@/components/ui/hover-card"