Don't show loading screen during auto-reload (#83376)
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
parent
62436e3f03
commit
bcc2afa9e2
|
@ -4,7 +4,7 @@
|
||||||
* you may not use this file except in compliance with the Elastic License.
|
* you may not use this file except in compliance with the Elastic License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { useCallback, useEffect } from 'react';
|
import React, { useCallback, useEffect, useState } from 'react';
|
||||||
import useInterval from 'react-use/lib/useInterval';
|
import useInterval from 'react-use/lib/useInterval';
|
||||||
|
|
||||||
import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
|
import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
|
||||||
|
@ -32,6 +32,7 @@ import { BottomDrawer } from './bottom_drawer';
|
||||||
import { Legend } from './waffle/legend';
|
import { Legend } from './waffle/legend';
|
||||||
|
|
||||||
export const Layout = () => {
|
export const Layout = () => {
|
||||||
|
const [showLoading, setShowLoading] = useState(true);
|
||||||
const { sourceId, source } = useSourceContext();
|
const { sourceId, source } = useSourceContext();
|
||||||
const { currentView, shouldLoadDefault } = useSavedViewContext();
|
const { currentView, shouldLoadDefault } = useSavedViewContext();
|
||||||
const {
|
const {
|
||||||
|
@ -100,6 +101,16 @@ export const Layout = () => {
|
||||||
}
|
}
|
||||||
}, [reload, currentView, shouldLoadDefault]);
|
}, [reload, currentView, shouldLoadDefault]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setShowLoading(true);
|
||||||
|
}, [options.metric, nodeType]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const hasNodes = nodes && nodes.length;
|
||||||
|
// Don't show loading screen when we're auto-reloading
|
||||||
|
setShowLoading(!hasNodes);
|
||||||
|
}, [nodes]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<PageContent>
|
<PageContent>
|
||||||
|
@ -130,6 +141,7 @@ export const Layout = () => {
|
||||||
options={options}
|
options={options}
|
||||||
nodeType={nodeType}
|
nodeType={nodeType}
|
||||||
loading={loading}
|
loading={loading}
|
||||||
|
showLoading={showLoading}
|
||||||
reload={reload}
|
reload={reload}
|
||||||
onDrilldown={applyFilterQuery}
|
onDrilldown={applyFilterQuery}
|
||||||
currentTime={currentTime}
|
currentTime={currentTime}
|
||||||
|
|
|
@ -37,6 +37,7 @@ interface Props {
|
||||||
formatter: InfraFormatter;
|
formatter: InfraFormatter;
|
||||||
bottomMargin: number;
|
bottomMargin: number;
|
||||||
topMargin: number;
|
topMargin: number;
|
||||||
|
showLoading: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const NodesOverview = ({
|
export const NodesOverview = ({
|
||||||
|
@ -53,6 +54,7 @@ export const NodesOverview = ({
|
||||||
onDrilldown,
|
onDrilldown,
|
||||||
bottomMargin,
|
bottomMargin,
|
||||||
topMargin,
|
topMargin,
|
||||||
|
showLoading,
|
||||||
}: Props) => {
|
}: Props) => {
|
||||||
const handleDrilldown = useCallback(
|
const handleDrilldown = useCallback(
|
||||||
(filter: string) => {
|
(filter: string) => {
|
||||||
|
@ -66,7 +68,8 @@ export const NodesOverview = ({
|
||||||
);
|
);
|
||||||
|
|
||||||
const noData = !loading && nodes && nodes.length === 0;
|
const noData = !loading && nodes && nodes.length === 0;
|
||||||
if (loading) {
|
if (loading && showLoading) {
|
||||||
|
// Don't show loading screen when we're auto-reloading
|
||||||
return (
|
return (
|
||||||
<InfraLoadingPanel
|
<InfraLoadingPanel
|
||||||
height="100%"
|
height="100%"
|
||||||
|
|
Loading…
Reference in a new issue