diff --git a/src/webapp/features/profile/components/profileFollowStats/ProfileFollowStats.tsx b/src/webapp/features/profile/components/profileFollowStats/ProfileFollowStats.tsx
new file mode 100644
index 00000000..8136bde4
--- /dev/null
+++ b/src/webapp/features/profile/components/profileFollowStats/ProfileFollowStats.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import { Group, Anchor, Text } from '@mantine/core';
+import Link from 'next/link';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { profileKeys } from '../../lib/profileKeys';
+import { getProfile } from '../../lib/dal';
+
+interface Props {
+  handle: string;
+  initialFollowerCount: number;
+  initialFollowingCount: number;
+  initialFollowedCollectionsCount: number;
+}
+
+export default function ProfileFollowStats(props: Props) {
+  const { data } = useSuspenseQuery({
+    queryKey: profileKeys.profile(props.handle),
+    queryFn: () => getProfile(props.handle),
+  });
+
+  const followerCount = data.followerCount ?? props.initialFollowerCount;
+  const followingCount = data.followingCount ?? props.initialFollowingCount;
+  const followedCollectionsCount =
+    data.followedCollectionsCount ?? props.initialFollowedCollectionsCount;
+
+  return (
+    <Group gap="sm">
+      <Anchor
+        component={Link}
+        href={`/profile/${props.handle}/community`}
+        underline="never"
+      >
+        <Text fw={500} c={'bright'} span>
+          {followerCount}
+        </Text>
+        <Text fw={500} c={'gray'} span>
+          {' Follower'}
+          {followerCount !== 1 ? 's' : ''}
+        </Text>
+      </Anchor>
+
+      <Anchor
+        component={Link}
+        href={`/profile/${props.handle}/community/following`}
+        underline="never"
+      >
+        <Text fw={500} c={'bright'} span>
+          {followingCount}
+        </Text>
+        <Text fw={500} c={'gray'} span>
+          {' Following'}
+        </Text>
+      </Anchor>
+
+      <Anchor
+        component={Link}
+        href={`/profile/${props.handle}/community/collections-following`}
+        underline="never"
+      >
+        <Text fw={500} c={'bright'} span>
+          {followedCollectionsCount}
+        </Text>
+        <Text fw={500} c={'gray'} span>
+          {' Collections Following'}
+        </Text>
+      </Anchor>
+    </Group>
+  );
+}
diff --git a/src/webapp/features/profile/components/profileFollowStats/Skeleton.FollowStats.tsx b/src/webapp/features/profile/components/profileFollowStats/Skeleton.FollowStats.tsx
new file mode 100644
index 00000000..f1e4ddb9
--- /dev/null
+++ b/src/webapp/features/profile/components/profileFollowStats/Skeleton.FollowStats.tsx
@@ -0,0 +1,11 @@
+import { Group, Skeleton } from '@mantine/core';
+
+export default function FollowStatsSkeleton() {
+  return (
+    <Group gap="sm">
+      <Skeleton height={20} width={100} />
+      <Skeleton height={20} width={80} />
+      <Skeleton height={20} width={150} />
+    </Group>
+  );
+}
diff --git a/src/webapp/features/profile/components/profileHeader/ProfileHeader.tsx b/src/webapp/features/profile/components/profileHeader/ProfileHeader.tsx
index 6eeb4b2e..27b77b6c 100644
--- a/src/webapp/features/profile/components/profileHeader/ProfileHeader.tsx
+++ b/src/webapp/features/profile/components/profileHeader/ProfileHeader.tsx
@@ -9,19 +9,19 @@ import {
   ActionIcon,
   Tooltip,
   Image,
-  Anchor,
   Badge,
   Card,
 } from '@mantine/core';
 import MinimalProfileHeaderContainer from '../../containers/minimalProfileHeaderContainer/MinimalProfileHeaderContainer';
 import { FaBluesky } from 'react-icons/fa6';
 import { getProfile } from '../../lib/dal.server';
-import { Fragment } from 'react';
+import { Fragment, Suspense } from 'react';
 import RichTextRenderer from '@/components/contentDisplay/richTextRenderer/RichTextRenderer';
 import { getServerFeatureFlags } from '@/lib/serverFeatureFlags';
 import { verifySessionOnServer } from '@/lib/auth/dal.server';
-import Link from 'next/link';
 import FollowButton from '@/features/follows/components/followButton/FollowButton';
+import ProfileFollowStats from '../profileFollowStats/ProfileFollowStats';
+import FollowStatsSkeleton from '../profileFollowStats/Skeleton.FollowStats';
 
 interface Props {
   handle: string;
@@ -112,47 +112,16 @@ export default async function ProfileHeader(props: Props) {
 
               {/* follow stats */}
               {featureFlags.following && (
-                <Group gap="sm">
-                  <Anchor
-                    component={Link}
-                    href={`/profile/${props.handle}/community`}
-                    underline="never"
-                  >
-                    <Text fw={500} c={'bright'} span>
-                      {profile.followerCount}
-                    </Text>
-                    <Text fw={500} c={'gray'} span>
-                      {' Follower'}
-                      {profile.followerCount !== 1 ? 's' : ''}
-                    </Text>
-                  </Anchor>
-
-                  <Anchor
-                    component={Link}
-                    href={`/profile/${props.handle}/community/following`}
-                    underline="never"
-                  >
-                    <Text fw={500} c={'bright'} span>
-                      {profile.followingCount}
-                    </Text>
-                    <Text fw={500} c={'gray'} span>
-                      {' Following'}
-                    </Text>
-                  </Anchor>
-
-                  <Anchor
-                    component={Link}
-                    href={`/profile/${props.handle}/community/collections-following`}
-                    underline="never"
-                  >
-                    <Text fw={500} c={'bright'} span>
-                      {profile.followedCollectionsCount}
-                    </Text>
-                    <Text fw={500} c={'gray'} span>
-                      {' Collections Following'}
-                    </Text>
-                  </Anchor>
-                </Group>
+                <Suspense fallback={<FollowStatsSkeleton />}>
+                  <ProfileFollowStats
+                    handle={props.handle}
+                    initialFollowerCount={profile.followerCount ?? 0}
+                    initialFollowingCount={profile.followingCount ?? 0}
+                    initialFollowedCollectionsCount={
+                      profile.followedCollectionsCount ?? 0
+                    }
+                  />
+                </Suspense>
               )}
             </Stack>
           </Stack>
diff --git a/src/webapp/features/profile/components/profileHeader/Skeleton.ProfileHeader.tsx b/src/webapp/features/profile/components/profileHeader/Skeleton.ProfileHeader.tsx
index 9e9667ac..4c10c025 100644
--- a/src/webapp/features/profile/components/profileHeader/Skeleton.ProfileHeader.tsx
+++ b/src/webapp/features/profile/components/profileHeader/Skeleton.ProfileHeader.tsx
@@ -46,16 +46,6 @@ export default function ProfileHeaderSkeleton() {
                 <Skeleton w={'80%'} h={20} />
                 <Skeleton w={'70%'} h={20} />
               </Stack>
-
-              {/* Follow stats */}
-              <Group gap="sm">
-                {/* Followers */}
-                <Skeleton w={100} h={21} />
-                {/* Following */}
-                <Skeleton w={90} h={21} />
-                {/* Collections Following */}
-                <Skeleton w={150} h={21} />
-              </Group>
             </Stack>
           </Stack>
         </Stack>