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

@@ -0,0 +1,8 @@
+import FullPageLoader from '@/components/full-page-loader'
+import React from 'react'
+
+export default function Loading() {
+  return (
+    <FullPageLoader />
+  )
+}

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>