perf: optimize overview page loading (#15)

* perf: reduce query and disable prefetch

* perf: reduce query in creating profiles

* chore: bump version to 1.0.0

Author: ravachol-yang

package.json

@@ -1,6 +1,6 @@
 {
   "name": "prosopon",
-  "version": "0.4.0",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev": "next dev",

src/app/(main)/(dashboard)/(overview)/page.tsx

@@ -5,7 +5,7 @@ import Announcement from "@/components/announcement";
 import Instructions from "@/components/instructions";
 import { checkAuth } from "@/lib/auth";
 import { redirect } from "next/navigation";
-import { findUserByIdWithProfilesAndTextures } from "@/queries/user";
+import { findUserByIdWithResourceCount } from "@/queries/user";
 import { Metadata } from "next";
 import { SITE_NAME, YGG_API_PREFIX } from "@/lib/constants";
 
@@ -17,7 +17,7 @@ export default async function OverviewPage() {
   const currentAuth = await checkAuth(false);
   if (!currentAuth || currentAuth.error || !currentAuth.id) redirect("/login");
 
-  const user = await findUserByIdWithProfilesAndTextures(currentAuth.id!);
+  const user = await findUserByIdWithResourceCount(currentAuth.id!);
 
   return (
     <>
@@ -28,8 +28,8 @@ export default async function OverviewPage() {
             <AccountConfig verified={user?.verified} />
             <h3 className="text-lg">我的资源</h3>
             <Resources
-              profiles={user?.profiles}
-              closet={user?.closet}
+              profiles={user?._count.profiles}
+              closet={user?._count.closet}
               isAdmin={user?.role === "ADMIN"}
             />
           </div>

src/components/account-config.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 
 export default function AccountConfig({ verified }) {
   return (
-    <Link href="account">
+    <Link prefetch={false} href={{ pathname: "account" }}>
       <div className="group border rounded-md h-12 p-3 my-4 flex bg-background hover:bg-accent transition-colors duration-300 ease-out">
         {verified ? (
           <BadgeCheck

src/components/resources-empty.tsx

@@ -14,7 +14,7 @@ export default function ResourcesEmpty() {
           <p className="text-muted-foreground text-center break-all max-w-60 my-1.5">
             创建角色, 上传材质和披风
           </p>
-          <Link href="profile">
+          <Link prefetch={false} href={{ pathname: "profile" }}>
             <Button className="p-1 rounded-sm h-9 w-30 bg-foreground my-4 text-background hover:bg-gray-800">
               创建角色
             </Button>

src/components/resources.tsx

@@ -6,7 +6,7 @@ import { MAX_PROFILES } from "@/lib/constants";
 export default function Resources({ profiles, closet, isAdmin }) {
   return (
     <>
-      {profiles.length === 0 && closet.length === 0 ? (
+      {profiles === 0 && closet === 0 ? (
         <div className="border rounded-md md:min-h-50 p-5 my-4 bg-background">
           <ResourcesEmpty />
         </div>
@@ -18,13 +18,17 @@ export default function Resources({ profiles, closet, isAdmin }) {
               <span className="text-lg font-bold">角色</span>
             </div>
             <p className="text-7xl w-full text-center my-13">
-              {profiles.length}
+              {profiles}
               <span className="text-2xl text-muted-foreground">
                 /{isAdmin ? "\u221e" : MAX_PROFILES}
               </span>
             </p>
             <div className="w-full flex flex-col-reverse flex-auto">
-              <Link href="profile" className="hover:text-sky-700 text-lg text-center">
+              <Link
+                prefetch={false}
+                href={{ pathname: "profile" }}
+                className="hover:text-sky-700 text-lg text-center"
+              >
                 管理角色
                 <ChevronRight className="inline" />
               </Link>
@@ -36,11 +40,15 @@ export default function Resources({ profiles, closet, isAdmin }) {
               <span className="text-lg font-bold">材质</span>
             </div>
             <p className="text-7xl w-full text-center my-13">
-              {closet.length}
+              {closet}
               <span className="text-2xl text-muted-foreground">/&infin;</span>
             </p>
             <div className="w-full flex flex-col-reverse flex-auto">
-              <Link href="closet" className="hover:text-sky-700 text-lg text-center">
+              <Link
+                prefetch={false}
+                href={{ pathname: "closet" }}
+                className="hover:text-sky-700 text-lg text-center"
+              >
                 管理材质
                 <ChevronRight className="inline" />
               </Link>

src/components/sidebar-entry.tsx

@@ -2,16 +2,7 @@
 
 import { SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar";
 import Link from "next/link";
-import {
-  Boxes,
-  Compass,
-  File,
-  Settings,
-  Shirt,
-  Smile,
-  TableOfContents,
-  UserRound,
-} from "lucide-react";
+import { Compass, Shirt, Smile, TableOfContents, UserRound } from "lucide-react";
 import { usePathname } from "next/dist/client/components/navigation";
 import { ENTRIES } from "@/lib/constants";
 
@@ -28,7 +19,7 @@ export default function SidebarEntry({ entry }) {
           pathname[0] === entry.id || ("/" + pathname[0] === ENTRIES.dashboard.id && isOverview)
         }
       >
-        <Link href={"/" + (isOverview ? "" : entry.url)}>
+        <Link prefetch={false} href={"/" + (isOverview ? "" : entry.url)}>
           {entry.id === "overview" && <Compass />}
           {entry.id === "profile" && <Smile />}
           {entry.id === "closet" && <Shirt />}

src/lib/actions/profile.ts

@@ -16,6 +16,7 @@ export async function createProfile(data: z.infer<typeof createProfileParam>) {
   if (user.role !== "ADMIN") {
     const profiles = await prisma.profile.findMany({
       where: { userId: user.id },
+      select: { id: true },
     });
 
     if (profiles.length >= MAX_PROFILES) {
@@ -29,12 +30,6 @@ export async function createProfile(data: z.infer<typeof createProfileParam>) {
   }
   const { name } = validated.data;
 
-  const existing = await prisma.profile.findUnique({
-    where: { name },
-  });
-
-  if (existing) return { success: false, message: "Profile already exists" };
-
   const SITE_NAMESPACE = uuidv5(SITE_DOMAIN, uuidv5.DNS);
 
   const id = createId();

src/queries/user.ts

@@ -13,6 +13,26 @@ export async function findUserById(id: string) {
   });
 }
 
+export async function findUserByIdWithResourceCount(id: string) {
+  return prisma.user.findUnique({
+    where: { id },
+    select: {
+      id: true,
+      email: true,
+      name: true,
+      role: true,
+      verified: true,
+      createdAt: true,
+      _count: {
+        select: {
+          closet: true,
+          profiles: true,
+        },
+      },
+    },
+  });
+}
+
 export async function findUserByIdWithProfilesAndTextures(id: string) {
   return prisma.user.findUnique({
     where: { id },