[Fleet] Add loading spinner to page headers (#79568)
* Add loading spinner to page headers * Avoid blinking
This commit is contained in:
parent
32d45b6e55
commit
e451a4dc16
|
@ -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(() => {
|
||||
|
|
|
@ -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(
|
||||
|
|
Loading…
Reference in a new issue