[Fleet] Add loading spinner to page headers (#79568) (#79604)

* Add loading spinner to page headers * Avoid blinking
elastic · Oct 6, 2020 · 62a60f7 · 62a60f7
1 parent c0e2275
commit 62a60f7
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git a/...t_manager/public/applications/ingest_manager/sections/agent_policy/details_page/index.tsx b/...t_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/...st_manager/public/applications/ingest_manager/sections/fleet/agent_details_page/index.tsx b/...st_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 && isInitialRequest ? (
+                <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, isInitialRequest, isLoading]
   );
 
   const headerRightContent = useMemo(