Fixes user profile loading (civitai#1428)

jaraim · Oct 16, 2024 · d14fec2 · d14fec2
1 parent 01050f9
commit d14fec2
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 30 deletions.
diff --git a/src/components/HomeContentToggle/HomeStyleSegmentedControl.tsx b/src/components/HomeContentToggle/HomeStyleSegmentedControl.tsx
@@ -8,6 +8,7 @@ import {
   ThemeIcon,
   createStyles,
   Badge,
+  Loader,
 } from '@mantine/core';
 import { IconProps } from '@tabler/icons-react';
 import Link from 'next/link';
@@ -62,6 +63,7 @@ export function HomeStyleSegmentedControl({
   onChange,
   size,
   sx,
+  loading,
   ...props
 }: Props) {
   const { classes, theme } = useStyles();
@@ -88,7 +90,11 @@ export function HomeStyleSegmentedControl({
               {value.label ?? key}
             </Text>
             {/* Ideally this is a temporary solution. We should be using the `canViewNsfw` feature flag to return the correct numbers to the users */}
-            {canViewNsfw && value.count && <Badge>{value.count}</Badge>}
+            {canViewNsfw && value.count != null && (
+              <Badge>
+                {loading ? <Loader size="xs" variant="dots" /> : value.count.toLocaleString()}
+              </Badge>
+            )}
           </Group>
         </Anchor>
       </Link>
@@ -117,12 +123,13 @@ export type DataItem = {
   url: string;
   icon: (props?: IconProps) => React.ReactNode;
   disabled?: boolean;
-  count?: number | string;
+  count?: number;
   label?: string;
 };
 type Props = {
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   value: string;
   onChange?: (item: DataItem) => void;
+  loading?: boolean;
   data: Record<string, DataItem>;
 } & Omit<SegmentedControlProps, 'data' | 'value' | 'onChange'>;
diff --git a/src/components/Profile/ProfileNavigation.tsx b/src/components/Profile/ProfileNavigation.tsx
@@ -9,7 +9,6 @@ import {
 } from '@tabler/icons-react';
 import { trpc } from '~/utils/trpc';
 import { useRouter } from 'next/router';
-import { numberWithCommas } from '~/utils/number-helpers';
 import {
   DataItem,
   HomeStyleSegmentedControl,
@@ -25,12 +24,15 @@ const overviewPath = '[username]';
 
 export const ProfileNavigation = ({ username }: ProfileNavigationProps) => {
   const router = useRouter();
-  const { data: userOverview } = trpc.userProfile.overview.useQuery({
-    username,
-  });
-  const { articles } = useFeatureFlags();
-  const activePath = router.pathname.split('/').pop() || overviewPath;
+  const { articles, canViewNsfw } = useFeatureFlags();
+
+  const {
+    data: userOverview,
+    isInitialLoading,
+    isRefetching,
+  } = trpc.userProfile.overview.useQuery({ username }, { enabled: canViewNsfw });
 
+  const activePath = router.pathname.split('/').pop() || overviewPath;
   const baseUrl = `/user/${username}`;
 
   const opts: Record<string, DataItem> = {
@@ -42,35 +44,41 @@ export const ProfileNavigation = ({ username }: ProfileNavigationProps) => {
     models: {
       url: `${baseUrl}/models`,
       icon: (props) => <IconCategory {...props} />,
-      count: numberWithCommas(userOverview?.modelCount),
+      count: userOverview?.modelCount ?? 0,
     },
     posts: {
       url: `${baseUrl}/posts`,
       icon: (props) => <IconLayoutList {...props} />,
-      count: numberWithCommas(userOverview?.postCount),
+      count: userOverview?.postCount ?? 0,
     },
     images: {
       url: `${baseUrl}/images`,
       icon: (props) => <IconPhoto {...props} />,
-      count: numberWithCommas(userOverview?.imageCount),
+      count: userOverview?.imageCount ?? 0,
     },
     videos: {
       url: `${baseUrl}/videos`,
       icon: (props) => <IconVideo {...props} />,
-      count: numberWithCommas(userOverview?.videoCount),
+      count: userOverview?.videoCount ?? 0,
     },
     articles: {
       url: `${baseUrl}/articles`,
       icon: (props) => <IconPencilMinus {...props} />,
-      count: numberWithCommas(userOverview?.articleCount),
+      count: userOverview?.articleCount ?? 0,
       disabled: !articles,
     },
     collections: {
       url: `${baseUrl}/collections`,
       icon: (props) => <IconBookmark {...props} />,
-      count: numberWithCommas(userOverview?.collectionCount),
+      count: userOverview?.collectionCount ?? 0,
     },
   };
 
-  return <HomeStyleSegmentedControl data={opts} value={activePath} />;
+  return (
+    <HomeStyleSegmentedControl
+      data={opts}
+      value={activePath}
+      loading={isInitialLoading || isRefetching}
+    />
+  );
 };
diff --git a/src/components/Profile/profile.utils.ts b/src/components/Profile/profile.utils.ts
@@ -63,7 +63,7 @@ export const shouldDisplayUserNullState = ({
   overview,
   userWithProfile,
 }: {
-  overview: UserOverview;
+  overview?: Partial<UserOverview>;
   userWithProfile: UserWithProfile;
 }) => {
   const userSections = (userWithProfile?.profile?.profileSectionsSettings ??
@@ -82,9 +82,9 @@ export const shouldDisplayUserNullState = ({
 
   return (
     (showcaseItems.length === 0 || !someSectionEnabled(['showcase'])) &&
-    (overview.modelCount === 0 || !someSectionEnabled(['modelsOverview', 'popularModels'])) &&
-    (overview.imageCount === 0 || !someSectionEnabled(['imagesOverview'])) &&
-    (overview.articleCount === 0 || !someSectionEnabled(['popularArticles'])) &&
-    (!overview.hasReceivedReviews || !someSectionEnabled(['recentReviews']))
+    (overview?.modelCount === 0 || !someSectionEnabled(['modelsOverview', 'popularModels'])) &&
+    (overview?.imageCount === 0 || !someSectionEnabled(['imagesOverview'])) &&
+    (overview?.articleCount === 0 || !someSectionEnabled(['popularArticles'])) &&
+    (!overview?.hasReceivedReviews || !someSectionEnabled(['recentReviews']))
   );
 };
diff --git a/src/pages/user/[username]/index.tsx b/src/pages/user/[username]/index.tsx
@@ -10,6 +10,7 @@ import {
   ProfileSectionComponent,
   shouldDisplayUserNullState,
 } from '~/components/Profile/profile.utils';
+import { useFeatureFlags } from '~/providers/FeatureFlagsProvider';
 import { ProfileSectionSchema, ProfileSectionType } from '~/server/schema/user-profile.schema';
 import { userPageQuerySchema } from '~/server/schema/user.schema';
 import { createServerSideProps } from '~/server/utils/server-side-helpers';
@@ -33,12 +34,16 @@ export const getServerSideProps = createServerSideProps({
 function ProfileOverview() {
   const router = useRouter();
   const { username } = router.query as { username: string };
+
+  const { canViewNsfw } = useFeatureFlags();
+
   const { isLoading, data: user } = trpc.userProfile.get.useQuery({
     username,
   });
-  const { isLoading: isLoadingOverview, data: userOverview } = trpc.userProfile.overview.useQuery({
-    username,
-  });
+  const { data: userOverview } = trpc.userProfile.overview.useQuery(
+    { username },
+    { enabled: canViewNsfw }
+  );
 
   const sections = useMemo(
     () =>
@@ -50,15 +55,15 @@ function ProfileOverview() {
     [user]
   );
 
-  if (isLoading || isLoadingOverview) {
+  if (isLoading) {
     return (
       <Center mt="md">
         <Loader />
       </Center>
     );
   }
 
-  if (!user || !user.username || !userOverview) {
+  if (!isLoading && !user) {
     return <NotFound />;
   }
 

diff --git a/src/server/services/user.service.ts b/src/server/services/user.service.ts
@@ -161,7 +161,11 @@ export const getUserCreator = async ({
   });
   if (!user) return null;
 
-  const modelCount = dbRead.model.count({
+  /**
+   * TODO: seems to be deprecated, we are getting model count from the stats
+   * though it might be bugged since we are not updating stats if user deletes/unpublishes models
+   */
+  const modelCount = await dbRead.model.count({
     where: {
       userId: user?.id,
       status: 'Published',
@@ -170,10 +174,7 @@ export const getUserCreator = async ({
 
   return {
     ...user,
-
-    _count: {
-      models: Number(modelCount),
-    },
+    _count: { models: modelCount },
   };
 };