[Uptime] Fix Snapshot component loading state header (#41023)

* Pull the loading state for Snapshot out of the panel to match the regular component.

* Improve layout of loading component to reflect normal component.

Author: justinkambic

x-pack/legacy/plugins/uptime/public/components/functional/snapshot_loading.tsx

@@ -5,62 +5,65 @@
  */
 
 // @ts-ignore missing typings for EuiStat
-import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiStat, EuiTitle } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiStat, EuiTitle, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import React from 'react';
+import React, { Fragment } from 'react';
 
 export const SnapshotLoading = () => (
   <EuiFlexGroup gutterSize="s">
     <EuiFlexItem grow={4}>
-      <EuiPanel paddingSize="s" style={{ height: 170 }}>
-        <EuiFlexGroup direction="column">
-          <EuiFlexItem grow={false}>
-            <EuiTitle size="xs">
-              <h5>
-                <FormattedMessage
-                  id="xpack.uptime.snapshot.endpointStatusLoadingTitle"
-                  defaultMessage="Current status"
-                />
-              </h5>
-            </EuiTitle>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiFlexGroup gutterSize="xl">
-              <EuiFlexItem grow={false}>
-                <EuiStat
-                  description={i18n.translate('xpack.uptime.snapshot.stats.upDescription', {
-                    defaultMessage: 'Up',
-                  })}
-                  textAlign="center"
-                  title="-"
-                  titleColor="secondary"
-                />
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiStat
-                  description={i18n.translate('xpack.uptime.snapshot.stats.downDescription', {
-                    defaultMessage: 'Down',
-                  })}
-                  textAlign="center"
-                  title="-"
-                  titleColor="danger"
-                />
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiStat
-                  description={i18n.translate('xpack.uptime.snapshot.stats.totalDescription', {
-                    defaultMessage: 'Total',
-                  })}
-                  textAlign="center"
-                  title="-"
-                  titleColor="subdued"
-                />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiPanel>
+      <Fragment>
+        <EuiTitle size="xs">
+          <h5>
+            <FormattedMessage
+              id="xpack.uptime.snapshot.endpointStatusLoadingTitle"
+              defaultMessage="Current status"
+            />
+          </h5>
+        </EuiTitle>
+        <EuiPanel paddingSize="s" style={{ height: 170 }}>
+          <EuiFlexGroup direction="column">
+            <EuiFlexItem grow={false}>
+              <EuiSpacer size="s" />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiFlexGroup justifyContent="spaceEvenly" gutterSize="s">
+                <EuiFlexItem>
+                  <EuiStat
+                    description={i18n.translate('xpack.uptime.snapshot.stats.upDescription', {
+                      defaultMessage: 'Up',
+                    })}
+                    textAlign="center"
+                    title="-"
+                    titleColor="secondary"
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiStat
+                    description={i18n.translate('xpack.uptime.snapshot.stats.downDescription', {
+                      defaultMessage: 'Down',
+                    })}
+                    textAlign="center"
+                    title="-"
+                    titleColor="danger"
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiStat
+                    description={i18n.translate('xpack.uptime.snapshot.stats.totalDescription', {
+                      defaultMessage: 'Total',
+                    })}
+                    textAlign="center"
+                    title="-"
+                    titleColor="subdued"
+                  />
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPanel>
+      </Fragment>
     </EuiFlexItem>
   </EuiFlexGroup>
 );