From 3eb2fb96076444988fda57a0792c78bd5d505661 Mon Sep 17 00:00:00 2001
From: Jen Huang <its.jenetic@gmail.com>
Date: Mon, 5 Oct 2020 13:58:17 -0700
Subject: [PATCH 1/2] Add loading spinner to page headers

---
 .../agent_policy/details_page/index.tsx       | 22 +++++++++++--------
 .../fleet/agent_details_page/index.tsx        |  9 ++++----
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_policy/details_page/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_policy/details_page/index.tsx
index 4c317c54c68c4..d708b447caa58 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_policy/details_page/index.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_policy/details_page/index.tsx
@@ -75,14 +75,18 @@ export const AgentPolicyDetailsPage: React.FunctionComponent = () => {
         <EuiFlexItem>
           <EuiText className="eui-textBreakWord">
             <h1>
-              {(agentPolicy && agentPolicy.name) || (
-                <FormattedMessage
-                  id="xpack.ingestManager.policyDetails.policyDetailsTitle"
-                  defaultMessage="Policy '{id}'"
-                  values={{
-                    id: policyId,
-                  }}
-                />
+              {isLoading ? (
+                <Loading />
+              ) : (
+                (agentPolicy && agentPolicy.name) || (
+                  <FormattedMessage
+                    id="xpack.ingestManager.policyDetails.policyDetailsTitle"
+                    defaultMessage="Policy '{id}'"
+                    values={{
+                      id: policyId,
+                    }}
+                  />
+                )
               )}
             </h1>
           </EuiText>
@@ -98,7 +102,7 @@ export const AgentPolicyDetailsPage: React.FunctionComponent = () => {
         ) : null}
       </EuiFlexGroup>
     ),
-    [getHref, agentPolicy, policyId]
+    [getHref, isLoading, agentPolicy, policyId]
   );
 
   const enrollmentCancelClickHandler = useCallback(() => {
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_details_page/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_details_page/index.tsx
index 88cf0e74a8fb8..d27eed2acef23 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_details_page/index.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_details_page/index.tsx
@@ -97,8 +97,10 @@ export const AgentDetailsPage: React.FunctionComponent = () => {
         <EuiFlexItem>
           <EuiText>
             <h1>
-              {typeof agentData?.item?.local_metadata?.host === 'object' &&
-              typeof agentData?.item?.local_metadata?.host?.hostname === 'string' ? (
+              {isLoading ? (
+                <Loading />
+              ) : typeof agentData?.item?.local_metadata?.host === 'object' &&
+                typeof agentData?.item?.local_metadata?.host?.hostname === 'string' ? (
                 agentData.item.local_metadata.host.hostname
               ) : (
                 <FormattedMessage
@@ -114,8 +116,7 @@ export const AgentDetailsPage: React.FunctionComponent = () => {
         </EuiFlexItem>
       </EuiFlexGroup>
     ),
-    /* eslint-disable-next-line react-hooks/exhaustive-deps */
-    [agentData, agentId, getHref]
+    [agentData?.item?.local_metadata?.host, agentId, getHref, isLoading]
   );
 
   const headerRightContent = useMemo(

From fdf7c5e573b5b2fef4cd762adcf9321f3ea147d1 Mon Sep 17 00:00:00 2001
From: Jen Huang <its.jenetic@gmail.com>
Date: Mon, 5 Oct 2020 15:58:10 -0700
Subject: [PATCH 2/2] Avoid blinking

---
 .../sections/fleet/agent_details_page/index.tsx               | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_details_page/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_details_page/index.tsx
index d27eed2acef23..ddd234aaa1da0 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_details_page/index.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_details_page/index.tsx
@@ -97,7 +97,7 @@ export const AgentDetailsPage: React.FunctionComponent = () => {
         <EuiFlexItem>
           <EuiText>
             <h1>
-              {isLoading ? (
+              {isLoading && isInitialRequest ? (
                 <Loading />
               ) : typeof agentData?.item?.local_metadata?.host === 'object' &&
                 typeof agentData?.item?.local_metadata?.host?.hostname === 'string' ? (
@@ -116,7 +116,7 @@ export const AgentDetailsPage: React.FunctionComponent = () => {
         </EuiFlexItem>
       </EuiFlexGroup>
     ),
-    [agentData?.item?.local_metadata?.host, agentId, getHref, isLoading]
+    [agentData?.item?.local_metadata?.host, agentId, getHref, isInitialRequest, isLoading]
   );
 
   const headerRightContent = useMemo(