Fix loading/error states for profile status aggregate summary UI (#22894)

relates to #21345

fix the loading state for the profile status aggregate component.

**loading state:**


![image](https://github.com/user-attachments/assets/e1b2d912-7872-4a1d-8dcc-76f132f07fd5)

**error state:**


![image](https://github.com/user-attachments/assets/a6e9ad00-6552-4c27-b6d1-ead19487c6cb)

<!-- Note that API documentation changes are now addressed by the
product design team. -->

- [x] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`

changes/21345-profile-aggregate-lodaing

@@ -0,0 +1 @@
+- fix loading state for the profile status aggregate UI

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}
       />

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];