From eab5553387083ffaa1806483c41c8abe50dd6061 Mon Sep 17 00:00:00 2001
From: Andrew Cholakian <andrew@andrewvc.com>
Date: Wed, 2 Oct 2019 07:22:43 -0500
Subject: [PATCH] [Uptime] Fix jerky monitor list expanded row behavior
 (#47080)

* [Uptime] Fix jerky monitor list expanded row behavior

Only set loading to true when there are no items present to prevent the bug outlined in
in https://github.com/elastic/eui/issues/2393 . Once that is fixed we can simply set the value here to
loading={loading}

Fixes https://github.com/elastic/kibana/issues/46244

* Also fix loading state of charts to not move the table around
---
 .../functional/charts/chart_wrapper/chart_wrapper.tsx        | 2 +-
 .../components/functional/monitor_list/monitor_list.tsx      | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/charts/chart_wrapper/chart_wrapper.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/charts/chart_wrapper/chart_wrapper.tsx
index dd2853b60c87f..deeb1411052c3 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/charts/chart_wrapper/chart_wrapper.tsx
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/charts/chart_wrapper/chart_wrapper.tsx
@@ -46,7 +46,7 @@ export const ChartWrapper: FC<Props> = ({
         <EuiFlexGroup
           justifyContent="spaceAround"
           alignItems="center"
-          style={{ height, marginTop: `-${height}` }}
+          style={{ height, marginTop: `-${height}`, marginBottom: 0 }}
         >
           <EuiFlexItem grow={false}>
             <EuiLoadingChart size="xl" />
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list.tsx
index 8c232580bbcbd..0df545951a721 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list.tsx
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list.tsx
@@ -111,7 +111,10 @@ export const MonitorListComponent = (props: Props) => {
             values: { length: items.length },
           })}
           error={errors ? formatUptimeGraphQLErrorList(errors) : errors}
-          loading={loading}
+          // Only set loading to true when there are no items present to prevent the bug outlined in
+          // in https://github.com/elastic/eui/issues/2393 . Once that is fixed we can simply set the value here to
+          // loading={loading}
+          loading={loading && (!items || items.length < 1)}
           isExpandable={true}
           hasActions={true}
           itemId="monitor_id"