Fleet UI: Display UI after osVersions loads only (#32604)

This commit is contained in:
RachelElysia 2025-09-05 09:38:11 -04:00 committed by GitHub
parent 17ff0968d4
commit 76f7c67450
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 18 additions and 8 deletions

View file

@ -505,7 +505,7 @@ const ManageHostsPage = ({
}
);
const { data: osVersions } = useQuery<
const { data: osVersions, isLoading: isLoadingOsVersions } = useQuery<
IOSVersionsResponse,
Error,
IOperatingSystemVersion[],
@ -1685,6 +1685,15 @@ const ManageHostsPage = ({
filter in queryParams // TODO: replace this with `Object.hasOwn(queryParams, filter)` when we upgrade to es2022
);
// Ensures rendering table/pills simultaneously when all API calls are done
const isLoading =
isLoadingHosts ||
isLoadingHostsCount ||
isLoadingPolicy ||
isLoadingOsVersions ||
isLoadingConfigProfile ||
isLoadingScriptBatchSummary;
const renderTable = () => {
if (!config || !currentUser || !isRouteOk) {
return <Spinner />;
@ -1828,13 +1837,7 @@ const ManageHostsPage = ({
resultsTitle="hosts"
columnConfigs={tableColumns}
data={hostsData?.hosts || []}
isLoading={
isLoadingHosts ||
isLoadingHostsCount ||
isLoadingPolicy ||
isLoadingConfigProfile ||
isLoadingScriptBatchSummary
}
isLoading={isLoading}
manualSortBy
defaultSortHeader={(sortBy[0] && sortBy[0].key) || DEFAULT_SORT_HEADER}
defaultSortDirection={
@ -2000,6 +2003,7 @@ const ManageHostsPage = ({
}
onClickEditLabel={onEditLabelClick}
onClickDeleteLabel={toggleDeleteLabelModal}
isLoading={isLoading}
/>
{renderNoEnrollSecretBanner()}
{renderTable()}

View file

@ -109,6 +109,7 @@ interface IHostsFilterBlockProps {
onChangeScriptBatchStatusFilter: (newStatus: ScriptBatchHostCountV1) => void;
onClickEditLabel: (evt: React.MouseEvent<HTMLButtonElement>) => void;
onClickDeleteLabel: () => void;
isLoading?: boolean;
}
/**
@ -162,9 +163,14 @@ const HostsFilterBlock = ({
onChangeScriptBatchStatusFilter,
onClickEditLabel,
onClickDeleteLabel,
isLoading = false,
}: IHostsFilterBlockProps) => {
const { currentUser, isOnGlobalTeam } = useContext(AppContext);
if (isLoading) {
return <></>;
}
const renderLabelFilterPill = () => {
if (selectedLabel) {
const {