feat: add loading state and full-page loader component; update payment page and application layout to improve user experience

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