github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Fleet] Display loading content for advanced tab to reduce layout shift (#138136) (#138166)

Browse source 
* Display loading content for advanced tab to reduce layout shift

* Only consider subsequent requests loading for the whole steps list

(cherry picked from commit 0f314a60bd)

Co-authored-by: Kyle Pollich <kyle.pollich@elastic.co>
This commit is contained in:
Kibana Machine 2022-08-04 15:35:11 -04:00 • committed by GitHub
parent b2dbd9fb6d
commit 01a6122a3b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

9
x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/advanced_tab.tsx
View file

@ -4,8 +4,8 @@
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import { EuiSteps } from '@elastic/eui';
import React from 'react';
import { EuiLoadingContent, EuiSteps } from '@elastic/eui';
import { useAdvancedForm } from './hooks';
@ -24,6 +24,7 @@ interface AdvancedTabProps {
export const AdvancedTab: React.FunctionComponent<AdvancedTabProps> = ({ selectedPolicyId }) => {
const {
isSelectFleetServerPolicyLoading,
eligibleFleetServerPolicies,
refreshEligibleFleetServerPolicies,
fleetServerPolicyId,
@ -70,5 +71,9 @@ export const AdvancedTab: React.FunctionComponent<AdvancedTabProps> = ({ selecte
getConfirmFleetServerConnectionStep({ isFleetServerReady, disabled: !Boolean(serviceToken) }),
];
return <EuiSteps steps={steps} className="eui-textLeft" />;
return isSelectFleetServerPolicyLoading ? (
<EuiLoadingContent />
) : (
<EuiSteps steps={steps} className="eui-textLeft" />
);
};

2
x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/hooks/use_advanced_form.ts
View file

@ -19,6 +19,7 @@ import { useWaitForFleetServer } from './use_wait_for_fleet_server';
*/
export const useAdvancedForm = (defaultAgentPolicyId?: string) => {
const {
isSelectFleetServerPolicyLoading,
eligibleFleetServerPolicies,
refreshEligibleFleetServerPolicies,
fleetServerPolicyId,
@ -31,6 +32,7 @@ export const useAdvancedForm = (defaultAgentPolicyId?: string) => {
const [deploymentMode, setDeploymentMode] = useState<DeploymentMode>('quickstart');
return {
isSelectFleetServerPolicyLoading,
eligibleFleetServerPolicies,
refreshEligibleFleetServerPolicies,
fleetServerPolicyId,

8
x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/hooks/use_select_fleet_server_policy.ts
View file

@ -14,7 +14,12 @@ export const useSelectFleetServerPolicy = (defaultAgentPolicyId?: string) => {
const [fleetServerPolicyId, setFleetServerPolicyId] = useState<string | undefined>(
defaultAgentPolicyId
);
const { data: agentPoliciesData, resendRequest } = useGetAgentPolicies({
const {
isLoading,
isInitialRequest,
data: agentPoliciesData,
resendRequest,
} = useGetAgentPolicies({
full: true,
});
@ -34,6 +39,7 @@ export const useSelectFleetServerPolicy = (defaultAgentPolicyId?: string) => {
}, [eligibleFleetServerPolicies, fleetServerPolicyId]);
return {
isSelectFleetServerPolicyLoading: isLoading && isInitialRequest,
fleetServerPolicyId,
setFleetServerPolicyId,
eligibleFleetServerPolicies,

1
x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/steps/add_fleet_server_host.tsx
View file

@ -106,7 +106,6 @@ export const AddFleetServerHostStepContent = ({
<EuiSpacer size="m" />
<EuiFlexGroup wrap>
<EuiFlexItem
grow={false}
css={`
max-width: 100%;
`}