[7.x] [Uptime] Enable loading on monitor list (#65670) (#66172)

x-pack/plugins/uptime/public/components/certificates/certificates_list.tsx

@@ -41,7 +41,7 @@ interface Props {
 }
 
 export const CertificateList: React.FC<Props> = ({ page, sort, onChange }) => {
-  const certificates = useSelector(certificatesSelector);
+  const { data: certificates, loading } = useSelector(certificatesSelector);
 
   const onTableChange = (newVal: Partial<Props>) => {
     onChange(newVal.page as Page, newVal.sort as CertSort);
@@ -98,6 +98,7 @@ export const CertificateList: React.FC<Props> = ({ page, sort, onChange }) => {
 
   return (
     <EuiBasicTable
+      loading={loading}
       columns={columns}
       items={certificates?.certs ?? []}
       pagination={pagination}

x-pack/plugins/uptime/public/components/certificates/fingerprint_col.tsx

@@ -32,7 +32,14 @@ export const FingerprintCol: React.FC<Props> = ({ cert }) => {
           <EmptyButton>{text} </EmptyButton>
         </EuiToolTip>
         <EuiCopy textToCopy={val ?? ''}>
-          {copy => <EuiButtonIcon onClick={copy} iconType="copy" title={COPY_FINGERPRINT} />}
+          {copy => (
+            <EuiButtonIcon
+              aria-label={COPY_FINGERPRINT}
+              onClick={copy}
+              iconType="copy"
+              title={COPY_FINGERPRINT}
+            />
+          )}
         </EuiCopy>
       </Span>
     );

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

@@ -193,10 +193,7 @@ export const MonitorListComponent: React.FC<Props> = ({
       <EuiBasicTable
         aria-label={labels.getDescriptionLabel(items.length)}
         error={error?.message}
-        // 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)}
+        loading={loading}
         isExpandable={true}
         hasActions={true}
         itemId="monitor_id"

x-pack/plugins/uptime/public/pages/certificates.tsx

@@ -72,7 +72,7 @@ export const CertificatesPage: React.FC = () => {
     );
   }, [dispatch, page, search, sort.direction, sort.field, lastRefresh]);
 
-  const certificates = useSelector(certificatesSelector);
+  const { data: certificates } = useSelector(certificatesSelector);
 
   return (
     <>

x-pack/plugins/uptime/public/state/certificates/certificates.ts

@@ -40,4 +40,4 @@ export function* fetchCertificatesEffect() {
   );
 }
 
-export const certificatesSelector = ({ certificates }: AppState) => certificates.certs.data;
+export const certificatesSelector = ({ certificates }: AppState) => certificates.certs;