[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 elastic/eui#2393 . Once that is fixed we can simply set the value here to
loading={loading}

Fixes #46244

* Also fix loading state of charts to not move the table around

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" />

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"