improve loading states:

* app loader
 * specific loaders with spinner

app/settings/components/billing/billing-history.tsx

@@ -10,10 +10,11 @@ export default function BillingHistory() {
 		skip,
 		pagesNumber,
 		currentPage,
-		goToPreviousPage,
+		lastPage,
 		hasPreviousPage,
-		goToNextPage,
 		hasNextPage,
+		goToPreviousPage,
+		goToNextPage,
 		setPage,
 	} = usePaymentsHistory();
 
@@ -104,8 +105,8 @@ export default function BillingHistory() {
 										Previous
 									</button>
 									<p className="text-sm text-gray-700 self-center">
-										Page <span className="font-medium">1</span> of{" "}
-										<span className="font-medium">4</span>
+										Page <span className="font-medium">{currentPage}</span> of{" "}
+										<span className="font-medium">{lastPage}</span>
 									</p>
 									<button
 										onClick={goToNextPage}

app/settings/components/billing/paddle-link.tsx

@@ -9,7 +9,7 @@ type Props = {
 const PaddleLink: FunctionComponent<Props> = ({ onClick, text }) => (
 	<button className="flex space-x-2 items-center text-left" onClick={onClick}>
 		<HiExternalLink className="w-6 h-6 flex-shrink-0" />
-		<span className="transition-colors duration-150 border-b border-transparent hover:border-primary-500">
+		<span className="font-medium transition-colors duration-150 border-b border-transparent hover:border-primary-500">
 			{text}
 		</span>
 	</button>