diff --git a/changes/21345-profile-aggregate-lodaing b/changes/21345-profile-aggregate-lodaing
new file mode 100644
index 0000000000..beb047c402
--- /dev/null
+++ b/changes/21345-profile-aggregate-lodaing
@@ -0,0 +1 @@
+- fix loading state for the profile status aggregate UI
diff --git a/frontend/pages/ManageControlsPage/OSSettings/OSSettings.tsx b/frontend/pages/ManageControlsPage/OSSettings/OSSettings.tsx
index cabcdaf564..f6cf8c435f 100644
--- a/frontend/pages/ManageControlsPage/OSSettings/OSSettings.tsx
+++ b/frontend/pages/ManageControlsPage/OSSettings/OSSettings.tsx
@@ -40,6 +40,7 @@ const OSSettings = ({
   const {
     data: aggregateProfileStatusData,
     refetch: refetchAggregateProfileStatus,
+    isError: isErrorAggregateProfileStatus,
     isLoading: isLoadingAggregateProfileStatus,
   } = useQuery(
     ["aggregateProfileStatuses", teamId],
@@ -73,6 +74,7 @@ const OSSettings = ({
       </p>
       <ProfileStatusAggregate
         isLoading={isLoadingAggregateProfileStatus}
+        isError={isErrorAggregateProfileStatus}
         teamId={teamId}
         aggregateProfileStatusData={aggregateProfileStatusData}
       />
diff --git a/frontend/pages/ManageControlsPage/OSSettings/ProfileStatusAggregate/ProfileStatusAggregate.tsx b/frontend/pages/ManageControlsPage/OSSettings/ProfileStatusAggregate/ProfileStatusAggregate.tsx
index 79d06064bb..51de764120 100644
--- a/frontend/pages/ManageControlsPage/OSSettings/ProfileStatusAggregate/ProfileStatusAggregate.tsx
+++ b/frontend/pages/ManageControlsPage/OSSettings/ProfileStatusAggregate/ProfileStatusAggregate.tsx
@@ -10,6 +10,7 @@ import Spinner from "components/Spinner";
 import StatusIndicatorWithIcon, {
   IndicatorStatus,
 } from "components/StatusIndicatorWithIcon/StatusIndicatorWithIcon";
+import DataError from "components/DataError";
 
 import AGGREGATE_STATUS_DISPLAY_OPTIONS from "./ProfileStatusAggregateOptions";
 
@@ -55,17 +56,17 @@ const ProfileStatusCount = ({
 
 interface ProfileStatusAggregateProps {
   isLoading: boolean;
+  isError: boolean;
   teamId: number;
   aggregateProfileStatusData?: ProfileStatusSummaryResponse;
 }
 
 const ProfileStatusAggregate = ({
   isLoading,
+  isError,
   teamId,
   aggregateProfileStatusData,
 }: ProfileStatusAggregateProps) => {
-  if (!aggregateProfileStatusData) return null;
-
   if (isLoading) {
     return (
       <div className={baseClass}>
@@ -74,6 +75,12 @@ const ProfileStatusAggregate = ({
     );
   }
 
+  if (isError) {
+    return <DataError />;
+  }
+
+  if (!aggregateProfileStatusData) return null;
+
   const indicators = AGGREGATE_STATUS_DISPLAY_OPTIONS.map((status) => {
     const { value, text, iconName, tooltipText } = status;
     const count = aggregateProfileStatusData[value];