[Uptime] Add loading message for monitor list no items (#67378) (#68187)

* Add loading message for monitor list no items.

* Add tests.

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/monitor_list.test.tsx

@@ -10,7 +10,7 @@ import {
   CursorDirection,
   SortOrder,
 } from '../../../../../common/runtime_types';
-import { MonitorListComponent } from '../monitor_list';
+import { MonitorListComponent, noItemsMessage } from '../monitor_list';
 import { renderWithRouter, shallowWithRouter } from '../../../../lib';
 import * as redux from 'react-redux';
 
@@ -288,4 +288,24 @@ describe('MonitorList component', () => {
       expect(component).toMatchSnapshot();
     });
   });
+
+  describe('noItemsMessage', () => {
+    it('returns loading message while loading', () => {
+      expect(noItemsMessage(true)).toEqual(`Loading...`);
+    });
+
+    it('returns loading message when filters are defined and loading', () => {
+      expect(noItemsMessage(true, 'filters')).toEqual(`Loading...`);
+    });
+
+    it('returns no monitors selected when filters are defined and not loading', () => {
+      expect(noItemsMessage(false, 'filters')).toEqual(
+        `No monitors found for selected filter criteria`
+      );
+    });
+
+    it('returns no data message when no filters and not loading', () => {
+      expect(noItemsMessage(false)).toEqual(`No uptime monitors found`);
+    });
+  });
 });

x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx

@@ -43,6 +43,11 @@ const TruncatedEuiLink = styled(EuiLink)`
   text-overflow: ellipsis;
 `;
 
+export const noItemsMessage = (loading: boolean, filters?: string) => {
+  if (loading) return labels.LOADING;
+  return !!filters ? labels.NO_MONITOR_ITEM_SELECTED : labels.NO_DATA_MESSAGE;
+};
+
 export const MonitorListComponent: React.FC<Props> = ({
   filters,
   monitorList: { list, error, loading },
@@ -163,7 +168,7 @@ export const MonitorListComponent: React.FC<Props> = ({
         itemId="monitor_id"
         itemIdToExpandedRowMap={getExpandedRowMap()}
         items={items}
-        noItemsMessage={!!filters ? labels.NO_MONITOR_ITEM_SELECTED : labels.NO_DATA_MESSAGE}
+        noItemsMessage={noItemsMessage(loading, filters)}
         columns={columns}
       />
       <EuiSpacer size="m" />

x-pack/plugins/uptime/public/components/overview/monitor_list/translations.ts

@@ -52,6 +52,11 @@ export const NO_MONITOR_ITEM_SELECTED = i18n.translate(
   }
 );
 
+export const LOADING = i18n.translate('xpack.uptime.monitorList.loading', {
+  defaultMessage: 'Loading...',
+  description: 'Shown when the monitor list is waiting for a server response',
+});
+
 export const NO_DATA_MESSAGE = i18n.translate('xpack.uptime.monitorList.noItemMessage', {
   defaultMessage: 'No uptime monitors found',
   description: 'This message is shown if the monitors table is rendered but has no items.',