From e8c0deb4aaf49d3535edf1d66b89f7e29b4ec4e9 Mon Sep 17 00:00:00 2001
From: Gabriel Hernandez <ghernandez345@gmail.com>
Date: Wed, 16 Oct 2024 13:50:34 +0100
Subject: [PATCH] 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               |  1 +
 .../ManageControlsPage/OSSettings/OSSettings.tsx      |  2 ++
 .../ProfileStatusAggregate/ProfileStatusAggregate.tsx | 11 +++++++++--
 3 files changed, 12 insertions(+), 2 deletions(-)
 create mode 100644 changes/21345-profile-aggregate-lodaing

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