From 8dc40a5426b96c3ba2f2891edc05e194e57b192b Mon Sep 17 00:00:00 2001
From: Sarah Gillespie <73313222+gillespi314@users.noreply.github.com>
Date: Mon, 5 Feb 2024 16:20:59 -0600
Subject: [PATCH] Add loading state to OS updates target form (#16610)

Follow up to #16604
---
 .../pages/ManageControlsPage/OSUpdates/OSUpdates.tsx  | 11 +++++------
 .../components/TargetSection/TargetSection.tsx        |  9 ++++++++-
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/frontend/pages/ManageControlsPage/OSUpdates/OSUpdates.tsx b/frontend/pages/ManageControlsPage/OSUpdates/OSUpdates.tsx
index 0cde55cb30cd..a9d15764062d 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<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}
diff --git a/frontend/pages/ManageControlsPage/OSUpdates/components/TargetSection/TargetSection.tsx b/frontend/pages/ManageControlsPage/OSUpdates/components/TargetSection/TargetSection.tsx
index 3947d8f4a23b..0a4c6e5643b4 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 <Spinner />;
+  }
+
   const isMacMdmEnabled = appConfig.mdm.enabled_and_configured;
   const isWindowsMdmEnabled = appConfig.mdm.windows_enabled_and_configured;