perf: speed up user profile modal data loading

Signed-off-by: Innei <i@innei.in>
RSSNext · Aug 25, 2024 · 53a5bae · 53a5bae
1 parent bbc1591
commit 53a5bae
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 13 deletions.
diff --git a/src/renderer/src/modules/profile/hooks.ts b/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],

diff --git a/src/renderer/src/modules/profile/user-profile-modal.tsx b/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>
  )