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