refactor account menu

src/components/account-menu.tsx → src/components/account-menu/index.tsx

@@ -1,42 +1,28 @@
-import { getProfile } from "@/api/get-profile";
-import { getRestaurant } from "@/api/get-restaurant";
 import { signOut } from "@/api/sign-out";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation } from "@tanstack/react-query";
 import { Building, ChevronDown, LogOut } from "lucide-react";
+import { Suspense } from "react";
 import { useNavigate } from "react-router-dom";
-import { StoreProfileDialog } from "./store-profile-dialog";
-import { Button } from "./ui/button";
-import { Dialog, DialogTrigger } from "./ui/dialog";
+import { StoreProfileDialog } from "../store-profile-dialog";
+import { Button } from "../ui/button";
+import { Dialog, DialogTrigger } from "../ui/dialog";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
 	DropdownMenuItem,
 	DropdownMenuLabel,
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
-} from "./ui/dropdown-menu";
-import { Skeleton } from "./ui/skeleton";
+} from "../ui/dropdown-menu";
+import { ProfileInfo, ProfileInfoSkeleton } from "./profile-info";
+import { RestaurantName, RestaurantNameSkeleton } from "./restaurant-name";
 
 export function AccountMenu() {
 	const navigate = useNavigate();
 
-	const { data: profile, isLoading: isLoadingProfile } = useQuery({
-		queryFn: getProfile,
-		queryKey: ["profile"],
-		staleTime: Number.POSITIVE_INFINITY,
-	});
-
-	const { data: restaurant, isLoading: isLoadingRestaurant } = useQuery({
-		queryKey: ["restaurant"],
-		queryFn: getRestaurant,
-		staleTime: Number.POSITIVE_INFINITY,
-	});
-
 	const { mutateAsync: doSignOut, isPending: isSigninOut } = useMutation({
 		mutationFn: signOut,
-		onSuccess: () => {
-			navigate("/sign-in", { replace: true });
-		},
+		onSuccess: () => navigate("/sign-in", { replace: true }),
 	});
 
 	return (
@@ -47,29 +33,17 @@ export function AccountMenu() {
 						variant="outline"
 						className="flex select-none items-center gap-2"
 					>
-						{isLoadingRestaurant ? (
-							<Skeleton className="h-4 w-40" />
-						) : (
-							restaurant?.name
-						)}
+						<Suspense fallback={<RestaurantNameSkeleton />}>
+							<RestaurantName />
+						</Suspense>
 						<ChevronDown className="size-4" />
 					</Button>
 				</DropdownMenuTrigger>
 				<DropdownMenuContent align="end" className="w-56">
 					<DropdownMenuLabel className="flex flex-col">
-						{isLoadingProfile ? (
-							<div className="space-y-1.5">
-								<Skeleton className="h-4 w-32" />
-								<Skeleton className="h-3 w-24" />
-							</div>
-						) : (
-							<>
-								<span>{profile?.name}</span>
-								<span className="font-normal text-muted-foreground text-xs">
-									{profile?.email}
-								</span>
-							</>
-						)}
+						<Suspense fallback={<ProfileInfoSkeleton />}>
+							<ProfileInfo />
+						</Suspense>
 					</DropdownMenuLabel>
 					<DropdownMenuSeparator />
 					<DialogTrigger asChild>

src/components/account-menu/profile-info.tsx

@@ -0,0 +1,29 @@
+import { getProfile } from "@/api/get-profile";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Skeleton } from "../ui/skeleton";
+
+export function ProfileInfo() {
+	const { data } = useSuspenseQuery({
+		queryKey: ["profile"],
+		queryFn: getProfile,
+		staleTime: Number.POSITIVE_INFINITY,
+	});
+
+	return (
+		<>
+			<span>{data.name}</span>
+			<span className="font-normal text-muted-foreground text-xs">
+				{data.email}
+			</span>
+		</>
+	);
+}
+
+export function ProfileInfoSkeleton() {
+	return (
+		<div className="space-y-1.5">
+			<Skeleton className="h-4 w-32" />
+			<Skeleton className="h-3 w-24" />
+		</div>
+	);
+}

src/components/account-menu/restaurant-name.tsx

@@ -0,0 +1,17 @@
+import { getRestaurant } from "@/api/get-restaurant";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Skeleton } from "../ui/skeleton";
+
+export function RestaurantName() {
+	const { data } = useSuspenseQuery({
+		queryKey: ["restaurant"],
+		queryFn: getRestaurant,
+		staleTime: Number.POSITIVE_INFINITY,
+	});
+
+	return <>{data.name}</>;
+}
+
+export function RestaurantNameSkeleton() {
+	return <Skeleton className="h-4 w-40" />;
+}

src/pages/app/orders/index.tsx

@@ -65,7 +65,6 @@ export function Orders() {
 							</TableBody>
 						</Table>
 					</div>
-
 					{data && (
 						<Pagination
 							pageIndex={pageIndex}