Fixes #38760 - Add loading skeleton to Change host group modal

The BulkReassignHostgroupModal now displays a skeleton loader while
fetching hostgroup data, improving user experience by providing visual
feedback during the loading state. The Save button is also disabled
while data is loading to prevent premature submission.

Author: nofaralfasi

webpack/assets/javascripts/react_app/components/HostsIndex/BulkActions/reassignHostGroup/BulkReassignHostgroupModal.js

@@ -26,6 +26,7 @@ import {
 import { foremanUrl } from '../../../../common/helpers';
 import { APIActions } from '../../../../redux/API';
 import HostGroupSelect from './HostGroupSelect';
+import SkeletonLoader from '../../../common/SkeletonLoader';
 import {
   HOSTS_API_PATH,
   API_REQUEST_KEY,
@@ -197,7 +198,10 @@ const BulkReassignHostgroupModal = ({
       ouiaId="bulk-reassign-hg-modal-add-button"
       variant="primary"
       onClick={handleSave}
-      isDisabled={hostUpdateStatus === STATUS.PENDING}
+      isDisabled={
+        hostUpdateStatus === STATUS.PENDING ||
+        hostgroupStatus !== STATUS.RESOLVED
+      }
       isLoading={hostUpdateStatus === STATUS.PENDING}
     >
       {__('Save')}
@@ -249,7 +253,7 @@ const BulkReassignHostgroupModal = ({
           />
         </Text>
       </TextContent>
-      {hostgroups && hostgroupStatus === STATUS.RESOLVED && (
+      <SkeletonLoader status={hostgroupStatus} skeletonProps={{ count: 3 }}>
         <HostGroupSelect
           onClear={handleClear}
           headerText={__('Select host group')}
@@ -270,7 +274,7 @@ const BulkReassignHostgroupModal = ({
             );
           })}
         </HostGroupSelect>
-      )}
+      </SkeletonLoader>
       <hr />
     </Modal>
   );

webpack/assets/javascripts/react_app/components/HostsIndex/index.test.js

@@ -9,8 +9,7 @@ import HostsIndex from './index';
 
 const mockStore = configureMockStore([thunk]);
 
-// Mock useSelector and useDispatch
-jest.spyOn(ReactRedux, 'useSelector').mockImplementation(() => []);
+// Mock useDispatch
 jest.spyOn(ReactRedux, 'useDispatch').mockImplementation(() => jest.fn());
 
 // Mock the API hook to return a controlled response
@@ -128,6 +127,10 @@ jest.mock('../PF4/TableIndexPage/TableIndexPage', () => ({
 describe('HostsIndex', () => {
   const store = mockStore({
     foremanModals: {},
+    API: {
+      HOSTGROUP_KEY: { status: 'RESOLVED', response: { results: [] } },
+      BULK_REASSIGN_HOSTGROUP_KEY: { status: undefined },
+    },
   });
 
   beforeEach(() => {