chore: Include viewport visibility in performance marks

pages/app/app-context.tsx

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { createContext } from 'react';
+import React, { createContext, useContext } from 'react';
 import { useHistory, useLocation, useRouteMatch } from 'react-router-dom';
 import mapValues from 'lodash/mapValues';
 
@@ -42,6 +42,10 @@ const AppContext = createContext<AppContextType>(appContextDefaults);
 
 export default AppContext;
 
+export function useAppContext<T extends keyof any>() {
+  return useContext(AppContext as React.Context<AppContextType<Record<T, string | boolean>>>);
+}
+
 export function parseQuery(query: string) {
   const queryParams: Record<string, any> = { ...appContextDefaults.urlParams };
   const urlParams = new URLSearchParams(query);

pages/table/performance-marks.page.tsx

@@ -5,10 +5,15 @@ import React, { useState } from 'react';
 import { Button, Header, Link, Modal, SpaceBetween, Table, Tabs } from '~components';
 import Box from '~components/box';
 
+import { useAppContext } from '../app/app-context';
+
 const EVALUATE_COMPONENT_VISIBILITY_EVENT = 'awsui-evaluate-component-visibility';
 
 export default function TablePerformanceMarkPage() {
   const [loading, setLoading] = useState(true);
+
+  const { outsideOfViewport } = useAppContext<'outsideOfViewport'>().urlParams;
+
   const dispatchEvaluateVisibilityEvent = () => {
     const event = new CustomEvent(EVALUATE_COMPONENT_VISIBILITY_EVENT);
     setTimeout(() => {
@@ -30,6 +35,20 @@ export default function TablePerformanceMarkPage() {
           </Button>
         </label>
 
+        {outsideOfViewport && (
+          <div
+            style={{
+              margin: 3,
+              padding: 10,
+              border: '1px solid rgba(128 128 128 / 50%)',
+              background: 'rgba(128 128 128 / 10%)',
+              height: '100vh',
+            }}
+          >
+            The Table is rendered below the viewport
+          </div>
+        )}
+
         <Table
           items={[]}
           loading={loading}

src/button-dropdown/__integ__/performance-marks.test.ts

@@ -15,6 +15,7 @@ function setupTest(
     const page = new BasePageObject(browser);
     await browser.url(`#/light/button-dropdown/${pageName}`);
     const getMarks = async () => {
+      await new Promise(r => setTimeout(r, 200));
       const marks = await browser.execute(() => performance.getEntriesByType('mark') as PerformanceMark[]);
       return marks.filter(m => m.detail?.source === 'awsui');
     };
@@ -37,6 +38,7 @@ describe('ButtonDropdown', () => {
         instanceIdentifier: expect.any(String),
         loading: false,
         disabled: false,
+        inViewport: true,
         text: 'Launch instance',
       });
 

src/button/__integ__/performance-marks.test.ts

@@ -15,6 +15,7 @@ function setupTest(
     const page = new BasePageObject(browser);
     await browser.url(`#/light/button/${pageName}`);
     const getMarks = async () => {
+      await new Promise(r => setTimeout(r, 200));
       const marks = await browser.execute(() => performance.getEntriesByType('mark') as PerformanceMark[]);
       return marks.filter(m => m.detail?.source === 'awsui');
     };
@@ -37,6 +38,7 @@ describe('Button', () => {
         instanceIdentifier: expect.any(String),
         loading: false,
         disabled: false,
+        inViewport: true,
         text: 'Primary button',
       });
 
@@ -57,6 +59,7 @@ describe('Button', () => {
         instanceIdentifier: marks[0].detail.instanceIdentifier,
         loading: false,
         disabled: false,
+        inViewport: true,
         text: 'Primary button',
       });
 
@@ -68,6 +71,7 @@ describe('Button', () => {
         instanceIdentifier: marks[1].detail.instanceIdentifier,
         loading: false,
         disabled: false,
+        inViewport: true,
         text: 'Primary button with loading and disabled props',
       });
 
@@ -109,6 +113,7 @@ describe('Button', () => {
         instanceIdentifier: marks[0].detail.instanceIdentifier,
         loading: false,
         disabled: false,
+        inViewport: true,
         text: 'Primary button',
       });
 
@@ -120,6 +125,7 @@ describe('Button', () => {
         instanceIdentifier: marks[1].detail.instanceIdentifier,
         loading: false,
         disabled: false,
+        inViewport: true,
         text: 'Primary button',
       });
 

src/internal/hooks/use-performance-marks/__tests__/is-in-viewport.test.tsx

@@ -0,0 +1,92 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { runAllIntersectionObservers } from '../../../utils/__tests__/mock-intersection-observer';
+
+jest.useFakeTimers();
+
+function isInViewport(element: Element, callback: (inViewport: boolean) => void) {
+  // We need to import the function dynamically so that it picks up the mocked IntersectionObserver.
+
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  return jest.requireActual('../is-in-viewport').isInViewport(element, callback);
+}
+
+beforeEach(() => jest.resetAllMocks());
+
+describe('isInViewport', () => {
+  it('calls the callback with `true` if the element is visible', () => {
+    const callback = jest.fn();
+    const element = document.createElement('div');
+
+    isInViewport(element, callback);
+
+    runAllIntersectionObservers([{ target: element, isIntersecting: true }]);
+
+    jest.runAllTimers();
+
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(callback).toHaveBeenCalledWith(true);
+  });
+
+  it('calls the callback with `false` if the element is not visible', () => {
+    const callback = jest.fn();
+    const element = document.createElement('div');
+
+    isInViewport(element, callback);
+
+    runAllIntersectionObservers([{ target: element, isIntersecting: false }]);
+
+    jest.runAllTimers();
+
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(callback).toHaveBeenCalledWith(false);
+  });
+
+  it('calls the callback with `false` if the IntersectionObserver does not fire in reasonable time', () => {
+    const callback = jest.fn();
+    const element = document.createElement('div');
+
+    isInViewport(element, callback);
+
+    jest.runAllTimers();
+
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(callback).toHaveBeenCalledWith(false);
+  });
+
+  it('calls different callbacks for different elements', () => {
+    const callback1 = jest.fn();
+    const element1 = document.createElement('div');
+    const callback2 = jest.fn();
+    const element2 = document.createElement('div');
+
+    isInViewport(element1, callback1);
+    isInViewport(element2, callback2);
+
+    runAllIntersectionObservers([
+      { target: element2, isIntersecting: false },
+      { target: element1, isIntersecting: true },
+    ]);
+
+    jest.runAllTimers();
+
+    expect(callback1).toHaveBeenCalledWith(true);
+    expect(callback2).toHaveBeenCalledWith(false);
+  });
+
+  it('does not call the callback if the cleanup function is run', () => {
+    const callback = jest.fn();
+    const element = document.createElement('div');
+
+    const cleanup = isInViewport(element, callback);
+
+    cleanup();
+
+    runAllIntersectionObservers([{ target: element, isIntersecting: false }]);
+
+    jest.runAllTimers();
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+});

src/internal/hooks/use-performance-marks/index.ts

@@ -7,6 +7,7 @@
 import { useDOMAttribute } from '../use-dom-attribute';
 import { useEffectOnUpdate } from '../use-effect-on-update';
 import { useRandomId } from '../use-unique-id';
+import { isInViewport } from './is-in-viewport';
 
 const EVALUATE_COMPONENT_VISIBILITY_EVENT = 'awsui-evaluate-component-visibility';
 
@@ -50,6 +51,7 @@
   const { isInModal } = useModalContext();
   const attributes = useDOMAttribute(elementRef, 'data-analytics-performance-mark', id);
   const evaluateComponentVisibility = useEvaluateComponentVisibility();
+
   useEffect(() => {
     if (!enabled() || !elementRef.current || isInModal) {
       return;
@@ -63,14 +65,22 @@
       return;
     }
 
-    const renderedMarkName = `${name}Rendered`;
-    performance.mark(renderedMarkName, {
-      detail: {
-        source: 'awsui',
-        instanceIdentifier: id,
-        ...getDetails(),
-      },
+    const timestamp = performance.now();
+
+    const cleanup = isInViewport(elementRef.current, inViewport => {
+      performance.mark(`${name}Rendered`, {
+        startTime: timestamp,
+        detail: {
+          source: 'awsui',
+          instanceIdentifier: id,
+          inViewport,
+          ...getDetails(),
+        },
+      });
     });
+
+    return cleanup;
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -86,14 +96,22 @@
     if (!elementVisible) {
       return;
     }
-    const updatedMarkName = `${name}Updated`;
-    performance.mark(updatedMarkName, {
-      detail: {
-        source: 'awsui',
-        instanceIdentifier: id,
-        ...getDetails(),
-      },
+
+    const timestamp = performance.now();
+
+    const cleanup = isInViewport(elementRef.current, inViewport => {
+      performance.mark(`${name}Updated`, {
+        startTime: timestamp,
+        detail: {
+          source: 'awsui',
+          instanceIdentifier: id,
+          inViewport,
+          ...getDetails(),
+        },
+      });
     });
+    return cleanup;
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [evaluateComponentVisibility, ...dependencies]);
 

src/internal/hooks/use-performance-marks/is-in-viewport.ts

@@ -0,0 +1,55 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+type Callback = (inViewport: boolean) => void;
+const map = new WeakMap<Element, Callback>();
+
+const MANUAL_TRIGGER_DELAY = 150;
+
+/**
+ * This function determines whether an element is in the viewport. The callback
+ * is batched with other elements that also use this function, in order to improve
+ * performance.
+ */
+export function isInViewport(element: Element, callback: Callback) {
+  let resolve = (value: boolean) => {
+    resolve = () => {}; // Prevent multiple execution
+    callback(value);
+  };
+
+  map.set(element, inViewport => resolve(inViewport));
+  observer.observe(element);
+
+  /*
+	 If the IntersectionObserver does not fire in reasonable time (for example
+	 in a background page in Chrome), we need to call the callback manually.
+
+	 See https://issues.chromium.org/issues/41383759
+	 */
+  const timeoutHandle = setTimeout(() => resolve(false), MANUAL_TRIGGER_DELAY);
+
+  // Cleanup
+  return () => {
+    clearTimeout(timeoutHandle);
+    map.delete(element);
+    observer.unobserve(element);
+  };
+}
+
+function createIntersectionObserver(callback: IntersectionObserverCallback) {
+  if (typeof IntersectionObserver === 'undefined') {
+    return {
+      observe: () => {},
+      unobserve: () => {},
+    };
+  }
+  return new IntersectionObserver(callback);
+}
+
+const observer = createIntersectionObserver(function isInViewportObserver(entries) {
+  for (const entry of entries) {
+    observer.unobserve(entry.target); // We only want the first run of the observer for each element.
+    map.get(entry.target)?.(entry.isIntersecting);
+    map.delete(entry.target);
+  }
+});