From 032810e46ad016372b1929a5808b5ed42bc70e55 Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad.muhammad@elastic.co>
Date: Wed, 8 Sep 2021 19:33:54 +0200
Subject: [PATCH] [Uptime] Added loading for certificates page on initial load
 (#111526)

---
 .../components/certificates/certificates_list.tsx      | 10 ++++++++--
 .../public/components/certificates/translations.ts     |  4 ++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/uptime/public/components/certificates/certificates_list.tsx b/x-pack/plugins/uptime/public/components/certificates/certificates_list.tsx
index ec505472f584..f01cdc5dfb9c 100644
--- a/x-pack/plugins/uptime/public/components/certificates/certificates_list.tsx
+++ b/x-pack/plugins/uptime/public/components/certificates/certificates_list.tsx
@@ -15,7 +15,7 @@ import { CertMonitors } from './cert_monitors';
 import * as labels from './translations';
 import { Cert, CertMonitor } from '../../../common/runtime_types';
 import { FingerprintCol } from './fingerprint_col';
-import { NO_CERTS_AVAILABLE } from './translations';
+import { LOADING_CERTIFICATES, NO_CERTS_AVAILABLE } from './translations';
 
 interface Page {
   index: number;
@@ -111,7 +111,13 @@ export const CertificateList: React.FC<Props> = ({ page, sort, onChange }) => {
           direction: sort.direction,
         },
       }}
-      noItemsMessage={<span data-test-subj="uptimeCertsEmptyMessage">{NO_CERTS_AVAILABLE}</span>}
+      noItemsMessage={
+        loading ? (
+          LOADING_CERTIFICATES
+        ) : (
+          <span data-test-subj="uptimeCertsEmptyMessage">{NO_CERTS_AVAILABLE}</span>
+        )
+      }
     />
   );
 };
diff --git a/x-pack/plugins/uptime/public/components/certificates/translations.ts b/x-pack/plugins/uptime/public/components/certificates/translations.ts
index 9e60bc79fe3a..45ea2bf9c47c 100644
--- a/x-pack/plugins/uptime/public/components/certificates/translations.ts
+++ b/x-pack/plugins/uptime/public/components/certificates/translations.ts
@@ -70,3 +70,7 @@ export const COPY_FINGERPRINT = i18n.translate('xpack.uptime.certs.list.copyFing
 export const NO_CERTS_AVAILABLE = i18n.translate('xpack.uptime.certs.list.empty', {
   defaultMessage: 'No Certificates found. Note: Certificates are only visible for Heartbeat 7.8+',
 });
+
+export const LOADING_CERTIFICATES = i18n.translate('xpack.uptime.certificates.loading', {
+  defaultMessage: 'Loading certificates ...',
+});