[Synthetics] User experience and monitor details, load when in view (#144385)

Co-authored-by: Abdul Zahid <awahab07@yahoo.com>

Author: shahzad31

x-pack/plugins/observability/public/components/shared/index.tsx

@@ -7,6 +7,7 @@
 
 import React, { lazy, Suspense } from 'react';
 import { EuiLoadingSpinner } from '@elastic/eui';
+import { LoadWhenInViewProps } from './load_when_in_view/load_when_in_view';
 import type { CoreVitalProps, HeaderMenuPortalProps } from './types';
 import type {
   FieldValueSuggestionsProps,
@@ -102,3 +103,13 @@ export function DatePicker(props: DatePickerProps) {
     </Suspense>
   );
 }
+
+const LoadWhenInViewLazy = lazy(() => import('./load_when_in_view/load_when_in_view'));
+
+export function LoadWhenInView(props: LoadWhenInViewProps) {
+  return (
+    <Suspense fallback={<EuiLoadingSpinner />}>
+      <LoadWhenInViewLazy {...props} />
+    </Suspense>
+  );
+}

x-pack/plugins/observability/public/components/shared/load_when_in_view/load_when_in_view.tsx

@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useEffect, useState } from 'react';
+import { EuiLoadingContent } from '@elastic/eui';
+import useIntersection from 'react-use/lib/useIntersection';
+
+export interface LoadWhenInViewProps {
+  children: JSX.Element;
+  initialHeight?: string | number;
+  placeholderTitle: string;
+}
+
+// eslint-disable-next-line import/no-default-export
+export default function LoadWhenInView({
+  children,
+  placeholderTitle,
+  initialHeight = 100,
+}: LoadWhenInViewProps) {
+  const intersectionRef = React.useRef(null);
+  const intersection = useIntersection(intersectionRef, {
+    root: null,
+    rootMargin: '0px',
+    threshold: 0.25,
+  });
+
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    if (intersection && intersection.intersectionRatio > 0.25) {
+      setIsVisible(true);
+    }
+  }, [intersection, intersection?.intersectionRatio]);
+
+  return isVisible ? (
+    children
+  ) : (
+    <div
+      data-test-subj="renderOnlyInViewPlaceholderContainer"
+      ref={intersectionRef}
+      role="region"
+      aria-label={placeholderTitle}
+      style={{ height: initialHeight }}
+    >
+      <EuiLoadingContent />
+    </div>
+  );
+}

x-pack/plugins/observability/public/index.ts

@@ -55,6 +55,7 @@ export {
   SelectableUrlList,
   ExploratoryView,
   DatePicker,
+  LoadWhenInView,
 } from './components/shared';
 
 export type { LazyObservabilityPageTemplateProps } from './components/shared';

x-pack/plugins/synthetics/e2e/page_objects/monitor_management.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 import { expect, Page } from '@elastic/synthetics';
-import { getQuerystring } from '@kbn/observability-plugin/e2e/utils';
+import { getQuerystring, TIMEOUT_60_SEC } from '@kbn/observability-plugin/e2e/utils';
 import { DataStream } from '../../common/runtime_types/monitor_management';
 import { loginPageProvider } from './login';
 import { utilsPageProvider } from './utils';
@@ -162,7 +162,7 @@ export function monitorManagementPageProvider({
 
     async selectLocations({ locations }: { locations: string[] }) {
       for (let i = 0; i < locations.length; i++) {
-        await page.check(`text=${locations[i]}`);
+        await page.check(`text=${locations[i]}`, TIMEOUT_60_SEC);
       }
     },
 

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_summary.tsx

@@ -16,6 +16,7 @@ import {
   EuiLoadingSpinner,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { LoadWhenInView } from '@kbn/observability-plugin/public';
 
 import { useEarliestStartDate } from '../hooks/use_earliest_start_data';
 import { MonitorErrorSparklines } from './monitor_error_sparklines';
@@ -27,7 +28,7 @@ import { DurationPanel } from './duration_panel';
 import { MonitorDetailsPanel } from './monitor_details_panel';
 import { AvailabilitySparklines } from './availability_sparklines';
 import { LastTestRun } from './last_test_run';
-import { TestRunsTable } from './test_runs_table';
+import { LAST_10_TEST_RUNS, TestRunsTable } from './test_runs_table';
 import { MonitorErrorsCount } from './monitor_errors_count';
 
 export const MonitorSummary = () => {
@@ -121,7 +122,9 @@ export const MonitorSummary = () => {
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="m" />
-      <TestRunsTable paginable={false} from={from} to={to} />
+      <LoadWhenInView placeholderTitle={LAST_10_TEST_RUNS}>
+        <TestRunsTable paginable={false} from={from} to={to} />
+      </LoadWhenInView>
     </>
   );
 };

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/test_runs_table.tsx

@@ -230,7 +230,7 @@ const TEST_RUNS = i18n.translate('xpack.synthetics.monitorDetails.summary.testRu
   defaultMessage: 'Test Runs',
 });
 
-const LAST_10_TEST_RUNS = i18n.translate(
+export const LAST_10_TEST_RUNS = i18n.translate(
   'xpack.synthetics.monitorDetails.summary.lastTenTestRuns',
   {
     defaultMessage: 'Last 10 Test Runs',

x-pack/plugins/ux/e2e/journeys/ux_js_errors.journey.ts

@@ -45,7 +45,8 @@ journey('UX JsErrors', async ({ page, params }) => {
 
   step('Confirm error count', async () => {
     // Wait until chart data is loaded
-    page.waitForLoadState('networkidle');
+    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+    await page.waitForLoadState('networkidle');
     await page.waitForSelector(`text=${jsErrorCount}`);
 
     const jsErrors = await (

x-pack/plugins/ux/e2e/journeys/ux_long_task_metric_journey.ts

@@ -54,9 +54,9 @@ journey('UX LongTaskMetrics', async ({ page, params }) => {
 
   step('Confirm metrics values', async () => {
     // Wait until chart data is loaded
-    page.waitForLoadState('networkidle');
+    await page.waitForLoadState('networkidle');
     // wait for first metric to be shown
-    page.waitForSelector(`text="237 ms"`);
+    await page.waitForSelector(`text="237 ms"`);
 
     let metric = await (
       await page.waitForSelector(byTestId(longestMetric))

x-pack/plugins/ux/e2e/journeys/ux_visitor_breakdown.journey.ts

@@ -45,7 +45,9 @@ journey('UX Visitor Breakdown', async ({ page, params }) => {
 
   step('Confirm charts are visible', async () => {
     // Wait until chart data is loaded
+    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
     await page.waitForLoadState('networkidle');
+    await waitForLoadingToFinish({ page });
 
     await Promise.all(
       chartIds.map(

x-pack/plugins/ux/public/components/app/rum_dashboard/rum_dashboard.tsx

@@ -7,6 +7,8 @@
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React from 'react';
+import { LoadWhenInView } from '@kbn/observability-plugin/public';
+import { I18LABELS } from './translations';
 import { UXMetrics } from './ux_metrics';
 import { ImpactfulMetrics } from './impactful_metrics';
 import { PageLoadAndViews } from './panels/page_load_and_views';
@@ -29,10 +31,20 @@ export function RumDashboard() {
         <PageLoadAndViews />
       </EuiFlexItem>
       <EuiFlexItem>
-        <VisitorBreakdownsPanel />
+        <LoadWhenInView
+          initialHeight={300}
+          placeholderTitle={I18LABELS.pageLoadDurationByRegion}
+        >
+          <VisitorBreakdownsPanel />
+        </LoadWhenInView>
       </EuiFlexItem>
       <EuiFlexItem>
-        <ImpactfulMetrics />
+        <LoadWhenInView
+          initialHeight={300}
+          placeholderTitle={I18LABELS.jsErrors}
+        >
+          <ImpactfulMetrics />
+        </LoadWhenInView>
       </EuiFlexItem>
     </EuiFlexGroup>
   );