From 598996be15ca7cd15a2700b87e1e7cdd51c5a0a9 Mon Sep 17 00:00:00 2001
From: Marlon Keating <322346+marlonkeating@users.noreply.github.com>
Date: Tue, 14 Jan 2025 13:16:40 -0800
Subject: [PATCH] fix: don't show groups cards zero state while groups data is
 loading (#1380)

---
 src/components/PeopleManagement/index.jsx | 24 ++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/PeopleManagement/index.jsx b/src/components/PeopleManagement/index.jsx
index 7cf6614184..5f88a5367b 100644
--- a/src/components/PeopleManagement/index.jsx
+++ b/src/components/PeopleManagement/index.jsx
@@ -3,7 +3,12 @@ import { Helmet } from 'react-helmet';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
-import { ActionRow, Button, useToggle } from '@openedx/paragon';
+import {
+  ActionRow,
+  Button,
+  Skeleton,
+  useToggle,
+} from '@openedx/paragon';
 import { Add } from '@openedx/paragon/icons';
 
 import Hero from '../Hero';
@@ -24,7 +29,7 @@ const PeopleManagementPage = ({ enterpriseId }) => {
   });
 
   const { enterpriseSubsidyTypes } = useContext(EnterpriseSubsidiesContext);
-  const { data } = useAllEnterpriseGroups(enterpriseId);
+  const { data, isLoading: isGroupsLoading } = useAllEnterpriseGroups(enterpriseId);
 
   const hasLearnerCredit = enterpriseSubsidyTypes.includes(SUBSIDY_TYPES.budget);
   const hasOtherSubsidyTypes = enterpriseSubsidyTypes.includes(SUBSIDY_TYPES.license)
@@ -40,6 +45,15 @@ const PeopleManagementPage = ({ enterpriseId }) => {
     }
   }, [data]);
 
+  let groupsCardSection = (<Skeleton height="20vh" />);
+  if (!isGroupsLoading) {
+    if (groups && groups.length > 0) {
+      groupsCardSection = (<GroupCardGrid groups={groups} />);
+    } else {
+      groupsCardSection = (<ZeroState />);
+    }
+  }
+
   return (
     <>
       <Helmet title={PAGE_TITLE} />
@@ -85,11 +99,7 @@ const PeopleManagementPage = ({ enterpriseId }) => {
             closeModal={closeModal}
           />
         </ActionRow>
-        {groups && groups.length > 0 ? (
-          <GroupCardGrid groups={groups} />
-        ) : (
-          <ZeroState />
-        )}
+        {groupsCardSection}
         <h3 className="mt-3">
           <FormattedMessage
             id="adminPortal.peopleManagement.dataTable.title"