From bed426a6b4843f784b234736fdbd852ce2f0d816 Mon Sep 17 00:00:00 2001
From: i701 <idhaan701@outlook.com>
Date: Sat, 31 May 2025 12:37:46 +0500
Subject: [PATCH] feat: add loading state and full-page loader component;
 update payment page and application layout to improve user experience

---
 app/(dashboard)/devices-to-pay/loading.tsx    |  8 +++++
 app/(dashboard)/payments/[paymentId]/page.tsx |  4 ++-
 components/auth/application-layout.tsx        | 15 +++++----
 components/clickable-row.tsx                  |  2 +-
 components/device-card.tsx                    |  6 ++--
 components/device-cart.tsx                    |  3 +-
 components/devices-for-payment.tsx            |  3 +-
 components/full-page-loader.tsx               |  9 +++++
 components/user/add-device-dialog.tsx         |  2 +-
 components/welcome-banner.tsx                 | 33 +++++++++++++++++++
 lib/atoms.ts                                  |  2 ++
 package-lock.json                             | 10 ++++++
 package.json                                  |  1 +
 tailwind.config.ts                            |  4 +--
 14 files changed, 84 insertions(+), 18 deletions(-)
 create mode 100644 app/(dashboard)/devices-to-pay/loading.tsx
 create mode 100644 components/full-page-loader.tsx
 create mode 100644 components/welcome-banner.tsx

diff --git a/app/(dashboard)/devices-to-pay/loading.tsx b/app/(dashboard)/devices-to-pay/loading.tsx
new file mode 100644
index 0000000..8c26961
--- /dev/null
+++ b/app/(dashboard)/devices-to-pay/loading.tsx
@@ -0,0 +1,8 @@
+import FullPageLoader from '@/components/full-page-loader'
+import React from 'react'
+
+export default function Loading() {
+  return (
+    <FullPageLoader />
+  )
+}
diff --git a/app/(dashboard)/payments/[paymentId]/page.tsx b/app/(dashboard)/payments/[paymentId]/page.tsx
index 4ea576e..fe04a33 100644
--- a/app/(dashboard)/payments/[paymentId]/page.tsx
+++ b/app/(dashboard)/payments/[paymentId]/page.tsx
@@ -39,7 +39,9 @@ export default async function PaymentPage({
 					>
 						{payment?.paid ? "Paid" : "Pending"}
 					</Button>
-					<CancelPaymentButton paymentId={paymentId} />
+					{!payment.paid && (
+						<CancelPaymentButton paymentId={paymentId} />
+					)}
 				</div>
 			</div>
 
diff --git a/components/auth/application-layout.tsx b/components/auth/application-layout.tsx
index fc5fbf2..82e97e8 100644
--- a/components/auth/application-layout.tsx
+++ b/components/auth/application-layout.tsx
@@ -16,6 +16,7 @@ import { tryCatch } from "@/utils/tryCatch";
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
 import { AccountPopover } from "./account-popver";
+import { WelcomeBanner } from "../welcome-banner";
 
 export async function ApplicationLayout({
 	children,
@@ -31,7 +32,6 @@ export async function ApplicationLayout({
 	return (
 		<SidebarProvider>
 			<AppSidebar />
-			<DeviceCartDrawer />
 			<SidebarInset>
 				<header className="flex justify-between sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4 z-10">
 					<div className="flex items-center gap-2 ">
@@ -45,13 +45,14 @@ export async function ApplicationLayout({
 						<AccountPopover />
 					</div>
 				</header>
-				<div className="text-sm font-mono px-2 p-1  bg-green-500/10 text-green-900 dark:text-green-400">
-					Welcome,{" "}
-					<span className="font-semibold">
-						{session?.user?.first_name} {session?.user?.last_name}
-					</span>
+				<WelcomeBanner
+					firstName={session?.user?.first_name}
+					lastName={session?.user?.last_name}
+				/>
+				<DeviceCartDrawer />
+				<div className="p-4 flex flex-col flex-1 rounded-lg bg-background">
+					{children}
 				</div>
-				<div className="p-4 flex flex-col flex-1">{children}</div>
 			</SidebarInset>
 		</SidebarProvider>
 	);
diff --git a/components/clickable-row.tsx b/components/clickable-row.tsx
index 9b6e8ab..d820958 100644
--- a/components/clickable-row.tsx
+++ b/components/clickable-row.tsx
@@ -20,7 +20,7 @@ export default function ClickableRow({
 			key={device.id}
 			className={cn(
 				(parentalControl === false && device.blocked) || device.is_active
-					? "cursor-not-allowed bg-accent-foreground/10 hover:bg-accent-foreground/10"
+					? "cursor-not-allowed hover:bg-accent-foreground/10"
 					: "cursor-pointer hover:bg-muted-foreground/10",
 			)}
 			onClick={() => {
diff --git a/components/device-card.tsx b/components/device-card.tsx
index 9fffc61..d458d28 100644
--- a/components/device-card.tsx
+++ b/components/device-card.tsx
@@ -19,7 +19,7 @@ export default function DeviceCard({
 
 	return (
 		<div
-			onKeyUp={() => {}}
+			onKeyUp={() => { }}
 			onClick={() => {
 				if (device.blocked) return;
 				if (device.is_active === true) return;
@@ -36,9 +36,9 @@ export default function DeviceCard({
 			<div
 				className={cn(
 					"flex text-sm justify-between items-center my-2 p-4 border rounded-md",
-					isChecked ? "bg-accent" : "bg-",
+					isChecked ? "bg-accent" : "",
 					device.is_active
-						? "cursor-not-allowed bg-accent-foreground/10 hover:bg-accent-foreground/10"
+						? "cursor-not-allowed text-green-600 hover:bg-accent-foreground/10"
 						: "cursor-pointer hover:bg-muted-foreground/10",
 				)}
 			>
diff --git a/components/device-cart.tsx b/components/device-cart.tsx
index 04341f5..f226eef 100644
--- a/components/device-cart.tsx
+++ b/components/device-cart.tsx
@@ -10,7 +10,6 @@ export function DeviceCartDrawer() {
 	const pathname = usePathname();
 	const devices = useAtomValue(deviceCartAtom);
 	const router = useRouter();
-
 	if (pathname === "/payment" || pathname === "/devices-to-pay") {
 		return null;
 	}
@@ -19,7 +18,7 @@ export function DeviceCartDrawer() {
 	return (
 		<Button
 			size={"lg"}
-			className="bg-sarLinkOrange fixed bottom-20  w-80 uppercase h-12 z-20 left-1/2 transform -translate-x-1/2"
+			className="bg-sarLinkOrange dark:hover:bg-orange-900 fixed bottom-20 w-80 uppercase h-12 z-20 left-1/2 transform -translate-x-1/2 hover:ring-2 hover:ring-sarLinkOrange transition-all duration-200"
 			onClick={() => router.push("/devices-to-pay")}
 			variant="outline"
 		>
diff --git a/components/devices-for-payment.tsx b/components/devices-for-payment.tsx
index bd8f360..a554b9f 100644
--- a/components/devices-for-payment.tsx
+++ b/components/devices-for-payment.tsx
@@ -12,6 +12,7 @@ import { CircleDollarSign, Loader2 } from "lucide-react";
 import { redirect, usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
+import FullPageLoader from "./full-page-loader";
 export default function DevicesForPayment() {
 	const baseAmount = 100;
 	const discountPercentage = 75;
@@ -45,7 +46,7 @@ export default function DevicesForPayment() {
 	};
 
 	if (disabled) {
-		return "Please wait...";
+		return <FullPageLoader />
 	}
 	return (
 		<div className="max-w-lg mx-auto space-y-4 px-4">
diff --git a/components/full-page-loader.tsx b/components/full-page-loader.tsx
new file mode 100644
index 0000000..1ebfff0
--- /dev/null
+++ b/components/full-page-loader.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import { Loader2 } from 'lucide-react'
+export default function FullPageLoader() {
+  return (
+    <div className='flex items-center justify-center h-screen'>
+      <Loader2 className='animate-spin' />
+    </div>
+  )
+}
diff --git a/components/user/add-device-dialog.tsx b/components/user/add-device-dialog.tsx
index fbe6d85..61bb54b 100644
--- a/components/user/add-device-dialog.tsx
+++ b/components/user/add-device-dialog.tsx
@@ -101,7 +101,7 @@ export default function AddDeviceDialogForm({ user_id }: { user_id?: string }) {
 									Device Name
 								</Label>
 								<Input
-									placeholder="eg: Iphone X"
+									placeholder="eg: iPhone X"
 									type="text"
 									{...register("name")}
 									id="device_name"
diff --git a/components/welcome-banner.tsx b/components/welcome-banner.tsx
new file mode 100644
index 0000000..7260728
--- /dev/null
+++ b/components/welcome-banner.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+interface WelcomeBannerProps {
+  firstName?: string | null;
+  lastName?: string | null;
+}
+
+export function WelcomeBanner({ firstName, lastName }: WelcomeBannerProps) {
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsVisible(false);
+    }, 3000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <div className="text-sm font-mono px-2 p-1 fade-out-10 bg-green-500/10 text-green-900 dark:text-green-400">
+      Welcome,{" "}
+      <span className="font-semibold">
+        {firstName} {lastName}
+      </span>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/lib/atoms.ts b/lib/atoms.ts
index 3908ca7..07d1c82 100644
--- a/lib/atoms.ts
+++ b/lib/atoms.ts
@@ -15,6 +15,7 @@ export const formulaResultAtom = atom("");
 export const deviceCartAtom = atom<Device[]>([]);
 export const cartDrawerOpenAtom = atom(false);
 export const WalletDrawerOpenAtom = atom(false);
+export const loadingDevicesToPayAtom = atom(false);
 
 // Export the atoms with their store
 export const atoms = {
@@ -27,4 +28,5 @@ export const atoms = {
 	deviceCartAtom,
 	cartDrawerOpenAtom,
 	walletTopUpValue,
+	loadingDevicesToPayAtom,
 };
diff --git a/package-lock.json b/package-lock.json
index 60e5d22..1150690 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -58,6 +58,7 @@
 				"eslint-config-next": "15.1.2",
 				"postcss": "^8.4.49",
 				"tailwindcss": "^3.4.17",
+				"tailwindcss-motion": "^1.1.0",
 				"ts-node": "^10.9.2",
 				"typescript": "^5.8.3"
 			}
@@ -7975,6 +7976,15 @@
 				"tailwindcss": ">=3.0.0 || insiders"
 			}
 		},
+		"node_modules/tailwindcss-motion": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/tailwindcss-motion/-/tailwindcss-motion-1.1.0.tgz",
+			"integrity": "sha512-0lK6rA4+367ffJdi1TtB72GlMCxJi2TP/xRiHc6An5pZSlU6WfIHhSvLxpcGilGZfBrOqc2q4woH1DEP/lCNbQ==",
+			"dev": true,
+			"peerDependencies": {
+				"tailwindcss": ">=3.0.0 || insiders"
+			}
+		},
 		"node_modules/tapable": {
 			"version": "2.2.1",
 			"dev": true,
diff --git a/package.json b/package.json
index 3a64078..a39467f 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
 		"eslint-config-next": "15.1.2",
 		"postcss": "^8.4.49",
 		"tailwindcss": "^3.4.17",
+		"tailwindcss-motion": "^1.1.0",
 		"ts-node": "^10.9.2",
 		"typescript": "^5.8.3"
 	},
diff --git a/tailwind.config.ts b/tailwind.config.ts
index fb3af2a..5fe840c 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,6 +1,6 @@
 import type { Config } from "tailwindcss";
 import tailwindcssAnimate from "tailwindcss-animate";
-
+import tailwindcssMotion from "tailwindcss-motion";
 export default {
 	darkMode: ["class"],
 	content: [
@@ -100,5 +100,5 @@ export default {
     		}
     	}
     },
-	plugins: [tailwindcssAnimate],
+	plugins: [tailwindcssAnimate, tailwindcssMotion],
 } satisfies Config;