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>

app/settings/components/settings-layout.tsx

@@ -1,4 +1,5 @@
 import type { FunctionComponent } from "react";
+import { Suspense } from "react";
 import { Link, Routes, useMutation, useRouter } from "blitz";
 import clsx from "clsx";
 import {
@@ -10,9 +11,10 @@ import {
 	IoPersonCircleOutline,
 } from "react-icons/io5";
 
-import Layout from "app/core/layouts/layout";
-import logout from "app/auth/mutations/logout";
+import AppLayout from "app/core/layouts/layout";
 import Divider from "./divider";
+import Spinner from "../../core/components/spinner";
+import logout from "app/auth/mutations/logout";
 
 const subNavigation = [
 	{ name: "Account", href: Routes.Account(), icon: IoPersonCircleOutline },
@@ -26,7 +28,7 @@ const SettingsLayout: FunctionComponent = ({ children }) => {
 	const [logoutMutation] = useMutation(logout);
 
 	return (
-		<Layout title="Settings">
+		<AppLayout title="Settings">
 			<header className="bg-gray-100 px-2 sm:px-6 lg:px-8">
 				<header className="flex">
 					<span className="flex items-center cursor-pointer" onClick={router.back}>
@@ -43,7 +45,7 @@ const SettingsLayout: FunctionComponent = ({ children }) => {
 								const isCurrentPage = item.href.pathname === router.pathname;
 
 								return (
-									<Link key={item.name} href={item.href}>
+									<Link key={item.name} href={item.href} prefetch>
 										<a
 											className={clsx(
 												isCurrentPage
@@ -79,10 +81,12 @@ const SettingsLayout: FunctionComponent = ({ children }) => {
 						</nav>
 					</aside>
 
-					<div className="flex-grow overflow-y-auto space-y-6 px-2 sm:px-6 lg:col-span-9">{children}</div>
+					<div className="flex-grow overflow-y-auto space-y-6 px-2 sm:px-6 lg:col-span-9">
+						<Suspense fallback={<Spinner />}>{children}</Suspense>
+					</div>
 				</div>
 			</main>
-		</Layout>
+		</AppLayout>
 	);
 };
 

app/settings/hooks/use-payments-history.ts

@@ -14,6 +14,7 @@ export default function usePaymentsHistory() {
 		.fill(-1)
 		.map((_, i) => i + 1);
 	const currentPage = Math.floor((skip / count) * totalPages) + 1;
+	const lastPage = pagesNumber[pagesNumber.length - 1];
 	const hasPreviousPage = skip > 0;
 	const hasNextPage = hasMore && !!nextPage;
 	const goToPreviousPage = () => hasPreviousPage && setSkip(skip - itemsPerPage);
@@ -26,6 +27,7 @@ export default function usePaymentsHistory() {
 		skip,
 		pagesNumber,
 		currentPage,
+		lastPage,
 		hasPreviousPage,
 		hasNextPage,
 		goToPreviousPage,

app/settings/pages/settings/phone.tsx

@@ -1,4 +1,3 @@
-import { Suspense } from "react";
 import type { BlitzPage } from "blitz";
 import { Routes, dynamic } from "blitz";
 
@@ -8,10 +7,8 @@ import PhoneNumberForm from "../../components/phone/phone-number-form";
 const PhoneSettings: BlitzPage = () => {
 	return (
 		<div className="flex flex-col space-y-6">
-			<Suspense fallback="Loading...">
-				<TwilioApiForm />
-				<PhoneNumberForm />
-			</Suspense>
+			<TwilioApiForm />
+			<PhoneNumberForm />
 		</div>
 	);
 };