Add loading states for Snapshot and Filter Bar. (#29858) (#29964)

x-pack/plugins/uptime/public/components/functional/filter_bar_loading.tsx

@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+// @ts-ignore No typings for EuiSearchBar
+import { EuiSearchBar } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+
+const searchBox = {
+  placeholder: i18n.translate('xpack.uptime.filterBar.loadingMessage', {
+    defaultMessage: 'Loading…',
+  }),
+};
+
+export const FilterBarLoading = () => <EuiSearchBar box={searchBox} />;

x-pack/plugins/uptime/public/components/functional/index.ts

@@ -8,8 +8,10 @@ export { EmptyState } from './empty_state';
 export { EmptyStatusBar } from './empty_status_bar';
 export { ErrorList } from './error_list';
 export { FilterBar } from './filter_bar';
+export { FilterBarLoading } from './filter_bar_loading';
 export { MonitorList } from './monitor_list';
 export { PingList } from './ping_list';
 export { Snapshot } from './snapshot';
 export { SnapshotHistogram } from './snapshot_histogram';
+export { SnapshotLoading } from './snapshot_loading';
 export { StatusBar } from './status_bar';

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

@@ -0,0 +1,64 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+// @ts-ignore missing typings for EuiStat
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiStat, EuiTitle } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import React from 'react';
+
+export const SnapshotLoading = () => (
+  <React.Fragment>
+    <EuiTitle size="xs">
+      <h5>
+        <FormattedMessage
+          id="xpack.uptime.snapshot.endpointStatusTitle"
+          defaultMessage="Endpoint status"
+        />
+      </h5>
+    </EuiTitle>
+    <EuiPanel>
+      <EuiFlexGroup justifyContent="spaceEvenly" gutterSize="xl">
+        <EuiFlexItem>
+          <EuiPanel>
+            <EuiStat
+              description={i18n.translate('xpack.uptime.snapshot.stats.upDescription', {
+                defaultMessage: 'Up',
+              })}
+              textAlign="center"
+              title="-"
+              titleColor="primary"
+            />
+          </EuiPanel>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiPanel>
+            <EuiStat
+              description={i18n.translate('xpack.uptime.snapshot.stats.downDescription', {
+                defaultMessage: 'Down',
+              })}
+              textAlign="center"
+              title="-"
+              titleColor="danger"
+            />
+          </EuiPanel>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiPanel>
+            <EuiStat
+              description={i18n.translate('xpack.uptime.snapshot.stats.totalDescription', {
+                defaultMessage: 'Total',
+              })}
+              textAlign="center"
+              title="-"
+              titleColor="subdued"
+            />
+          </EuiPanel>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPanel>
+  </React.Fragment>
+);

x-pack/plugins/uptime/public/components/queries/filter_bar/filter_bar_query.tsx

@@ -8,7 +8,7 @@ import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { Query } from 'react-apollo';
 import { UptimeCommonProps } from '../../../uptime_app';
-import { FilterBar } from '../../functional';
+import { FilterBar, FilterBarLoading } from '../../functional';
 import { getFilterBarQuery } from './get_filter_bar';
 
 interface FilterBarProps {
@@ -31,9 +31,7 @@ export const FilterBarQuery = ({
   >
     {({ loading, error, data }) => {
       if (loading) {
-        return i18n.translate('xpack.uptime.filterBar.loadingMessage', {
-          defaultMessage: 'Loading…',
-        });
+        return <FilterBarLoading />;
       }
       if (error) {
         return i18n.translate('xpack.uptime.filterBar.errorMessage', {

x-pack/plugins/uptime/public/components/queries/snapshot/snapshot_query.tsx

@@ -8,7 +8,7 @@ import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { Query } from 'react-apollo';
 import { UptimeCommonProps } from '../../../uptime_app';
-import { Snapshot } from '../../functional';
+import { Snapshot, SnapshotLoading } from '../../functional';
 import { getSnapshotQuery } from './get_snapshot';
 
 interface SnapshotProps {
@@ -31,9 +31,7 @@ export const SnapshotQuery = ({
   >
     {({ loading, error, data }) => {
       if (loading) {
-        return i18n.translate('xpack.uptime.snapshot.loadingMessage', {
-          defaultMessage: 'Loading…',
-        });
+        return <SnapshotLoading />;
       }
       if (error) {
         return i18n.translate('xpack.uptime.snapshot.errorMessage', {