Add loading state to OS updates target form (#16610)

Follow up to #16604

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<IConfig, Error>(["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<ILoadTeamResponse, Error, ITeamConfig>(
     ["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 <Spinner />;
 
   // 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}

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 <Spinner />;
+  }
+
   const isMacMdmEnabled = appConfig.mdm.enabled_and_configured;
   const isWindowsMdmEnabled = appConfig.mdm.windows_enabled_and_configured;