diff --git a/frontend/pages/ManageControlsPage/OSUpdates/OSUpdates.tsx b/frontend/pages/ManageControlsPage/OSUpdates/OSUpdates.tsx index 0cde55cb30..a9d1576406 100644 --- a/frontend/pages/ManageControlsPage/OSUpdates/OSUpdates.tsx +++ b/frontend/pages/ManageControlsPage/OSUpdates/OSUpdates.tsx @@ -53,8 +53,9 @@ const OSUpdates = ({ router, teamIdForApi }: IOSUpdates) => { // whenever the pathname changes. We should find a way to avoid this. const { data: config, - isLoading: isLoadingConfig, isError: isErrorConfig, + isFetching: isFetchingConfig, + isLoading: isLoadingConfig, refetch: refetchAppConfig, } = useQuery(["config"], () => configAPI.loadAll(), { refetchOnWindowFocus: false, @@ -63,8 +64,9 @@ const OSUpdates = ({ router, teamIdForApi }: IOSUpdates) => { const { data: teamConfig, - isLoading: isLoadingTeam, isError: isErrorTeamConfig, + isFetching: isFetchingTeamConfig, + isLoading: isLoadingTeam, refetch: refetchTeamConfig, } = useQuery( ["team-config", teamIdForApi], @@ -88,10 +90,6 @@ const OSUpdates = ({ router, teamIdForApi }: IOSUpdates) => { // FIXME: Are these checks still necessary? if (config === null || teamIdForApi === undefined) return null; - // FIXME: We ought to display a spinner or some disabled state whenever refetching these queries - // too because a slow network can cause a disconnect between the form data and the actual data and - // we don't want the user to be editing the form data while fresh data is being fetched. We don't - // have a specified UX for this yet. if (isLoadingConfig || isLoadingTeam) return ; // FIXME: Handle error states for app config and team config (need specifications for this). @@ -127,6 +125,7 @@ const OSUpdates = ({ router, teamIdForApi }: IOSUpdates) => { })} // FIXME: Find a better way to trigger re-rendering if these change (see FIXME above regarding refetching) appConfig={config} currentTeamId={teamIdForApi} + isFetching={isFetchingConfig || isFetchingTeamConfig} selectedPlatform={selectedPlatform} teamConfig={teamConfig} onSelectPlatform={setSelectedPlatformTab} diff --git a/frontend/pages/ManageControlsPage/OSUpdates/components/TargetSection/TargetSection.tsx b/frontend/pages/ManageControlsPage/OSUpdates/components/TargetSection/TargetSection.tsx index 3947d8f4a2..0a4c6e5643 100644 --- a/frontend/pages/ManageControlsPage/OSUpdates/components/TargetSection/TargetSection.tsx +++ b/frontend/pages/ManageControlsPage/OSUpdates/components/TargetSection/TargetSection.tsx @@ -4,6 +4,7 @@ import { API_NO_TEAM_ID, ITeamConfig } from "interfaces/team"; import { IConfig } from "interfaces/config"; import SectionHeader from "components/SectionHeader"; +import Spinner from "components/Spinner"; import MacOSTargetForm from "../MacOSTargetForm"; import WindowsTargetForm from "../WindowsTargetForm"; @@ -71,8 +72,9 @@ export const generateKey = (args: GetDefaultFnParams) => { interface ITargetSectionProps { appConfig: IConfig; currentTeamId: number; - teamConfig?: ITeamConfig; + isFetching: boolean; selectedPlatform: OSUpdatesSupportedPlatform; + teamConfig?: ITeamConfig; onSelectPlatform: (platform: OSUpdatesSupportedPlatform) => void; refetchAppConfig: () => void; refetchTeamConfig: () => void; @@ -81,12 +83,17 @@ interface ITargetSectionProps { const TargetSection = ({ appConfig, currentTeamId, + isFetching, selectedPlatform, teamConfig, onSelectPlatform, refetchAppConfig, refetchTeamConfig, }: ITargetSectionProps) => { + if (isFetching) { + return ; + } + const isMacMdmEnabled = appConfig.mdm.enabled_and_configured; const isWindowsMdmEnabled = appConfig.mdm.windows_enabled_and_configured;