perf: speed up user profile modal data loading

Signed-off-by: Innei <i@innei.in>

Author: Innei

src/renderer/src/modules/profile/hooks.ts

@@ -11,7 +11,7 @@ import { UserProfileModalContent } from "./user-profile-modal"
 
 export const useUserSubscriptionsQuery = (userId: string | undefined) => {
   const subscriptions = useAuthQuery(
-    defineQuery(["subscriptions", userId], async () => {
+    defineQuery(["subscriptions", "group", userId], async () => {
       const res = await apiClient.subscriptions.$get({
         query: { userId },
       })
@@ -61,7 +61,8 @@ export const usePresentUserProfileModal = (
         clickOutsideToDismiss: true,
         modal: variant === "dialog",
         overlay: variant === "dialog",
-        modalContainerClassName: variant === "drawer" ? "right-4 left-[auto] top-4 bottom-4" : "",
+        modalContainerClassName:
+          variant === "drawer" ? "right-4 left-[auto] top-4 bottom-4" : "",
       })
     },
     [present, variant],

src/renderer/src/modules/profile/user-profile-modal.tsx

@@ -19,6 +19,7 @@ import { cn } from "@renderer/lib/utils"
 import type { SubscriptionModel } from "@renderer/models"
 import { useUserSubscriptionsQuery } from "@renderer/modules/profile/hooks"
 import { useSubscriptionStore } from "@renderer/store/subscription"
+import { useUserById } from "@renderer/store/user"
 import { useAnimationControls } from "framer-motion"
 import { throttle } from "lodash-es"
 import type { FC } from "react"
@@ -40,6 +41,21 @@ export const UserProfileModalContent: FC<{
       return res.data
     }),
   )
+  const storeUser = useUserById(userId)
+
+  const userInfo = user.data ?
+      {
+        avatar: user.data.image,
+        name: user.data.name,
+        handle: user.data.handle,
+      } :
+    storeUser ?
+        {
+          avatar: storeUser.image,
+          name: storeUser.name,
+          handle: storeUser.handle,
+        } :
+      null
 
   const subscriptions = useUserSubscriptionsQuery(user.data?.id)
   const modal = useCurrentModal()
@@ -206,7 +222,7 @@ export const UserProfileModalContent: FC<{
           </ActionButton>
         </div>
 
-        {user.data && (
+        {userInfo && (
           <Fragment>
             <div
               className={cn(
@@ -222,10 +238,10 @@ export const UserProfileModalContent: FC<{
                 )}
               >
                 <m.span layout>
-                  <AvatarImage asChild src={user.data.image || undefined}>
+                  <AvatarImage asChild src={userInfo.avatar || undefined}>
                     <m.img layout />
                   </AvatarImage>
-                  <AvatarFallback>{user.data.name?.slice(0, 2)}</AvatarFallback>
+                  <AvatarFallback>{userInfo.name?.slice(0, 2)}</AvatarFallback>
                 </m.span>
               </Avatar>
               <m.div
@@ -241,14 +257,18 @@ export const UserProfileModalContent: FC<{
                     isHeaderSimple ? "" : "mt-4",
                   )}
                 >
-                  <m.h1 layout>{user.data.name}</m.h1>
+                  <m.h1 layout>{userInfo.name}</m.h1>
+                </m.div>
+
+                <m.div
+                  className={cn(
+                    "mb-0 text-sm text-zinc-500",
+                    userInfo.handle ? "visible" : "invisible select-none",
+                  )}
+                  layout
+                >
+                  @{userInfo.handle}
                 </m.div>
-                {!!user.data.handle && (
-                  <m.div className="mb-0 text-sm text-zinc-500" layout>
-                    @
-                    {user.data.handle}
-                  </m.div>
-                )}
               </m.div>
             </div>
             <ScrollArea.ScrollArea
@@ -284,7 +304,7 @@ export const UserProfileModalContent: FC<{
           </Fragment>
         )}
 
-        {!user.data && <LoadingCircle size="large" className="center h-full" />}
+        {!userInfo && <LoadingCircle size="large" className="center h-full" />}
       </m.div>
     </div>
   )