maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

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

Browse source 
* Add loading spinner to page headers

* Avoid blinking
This commit is contained in:
Jen Huang 2020-10-05 18:52:16 -07:00 committed by GitHub
parent 32d45b6e55
commit e451a4dc16
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_policy/details_page/index.tsx
View file

@ -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(() => {

9
x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_details_page/index.tsx
View file

@ -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(