perf: lazy tooltip

.changeset/weak-dragons-lay.md

@@ -0,0 +1,6 @@
+---
+"@patternfly/pfe-core": minor
+"@patternfly/pfe-tooltip": minor
+---
+
+Improves performance of floating DOM (tooltip) by lazily initializing

core/pfe-core/controllers/floating-dom-controller.ts

@@ -49,6 +49,18 @@ const createPopper = popperGenerator({
 export class FloatingDOMController implements ReactiveController {
   #open = false;
 
+  #popper: Instance | undefined;
+
+  #initialized = false;
+
+  get initialized() {
+    return this.#initialized;
+  }
+
+  set initialized(v: boolean) {
+    this.#initialized = v; this.host.requestUpdate();
+  }
+
   /**
    * When true, the floating DOM is visible
    */
@@ -64,8 +76,6 @@ export class FloatingDOMController implements ReactiveController {
     this.host.requestUpdate();
   }
 
-  #popper: Instance | undefined;
-
   constructor(private host: ReactiveElement) {
     host.addController(this);
   }
@@ -84,22 +94,25 @@ export class FloatingDOMController implements ReactiveController {
 
   /** Initialize the floating DOM */
   create(invoker: Element, content: HTMLElement, placement: Placement, offset?: number[]): void {
-    this.#popper = createPopper(invoker, content, {
-      placement,
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset
-          }
-        },
-        {
-          name: 'flip',
-          options: {
-            fallbackPlacements: ['top', 'right', 'left', 'bottom'],
+    if (invoker && content) {
+      this.#popper ??= createPopper(invoker, content, {
+        placement,
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset
+            }
           },
-        }
-      ]
-    });
+          {
+            name: 'flip',
+            options: {
+              fallbackPlacements: ['top', 'right', 'left', 'bottom'],
+            },
+          }
+        ]
+      });
+      this.initialized ||= true;
+    }
   }
 }

elements/pfe-tooltip/BaseTooltip.scss

@@ -10,7 +10,7 @@
   background-color: var(--pf-c-tooltip__content--BackgroundColor,
     var(--pf-global--BackgroundColor--dark-100, #151515));
   line-height: var(--pf-c-tooltip--line-height, 1.5);
-  opacity: 1; 
+  opacity: 1;
   transition: opacity 300ms cubic-bezier(0.54, 1.5, 0.38, 1.11) 0s;
   position: relative;
   max-width: var(--pf-c-tooltip--MaxWidth, 18.75rem);
@@ -21,6 +21,8 @@
   z-index: 999;
 }
 
+#tooltip:not(.initialized) { display: none; }
+
 #tooltip[aria-hidden="true"] {
   opacity: 0;
   transition: opacity 300ms cubic-bezier(0.54, 1.5, 0.38, 1.11) 0s;

elements/pfe-tooltip/BaseTooltip.ts

@@ -2,6 +2,8 @@ import type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-co
 
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+
 import { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
 
 import style from './BaseTooltip.scss';
@@ -46,14 +48,9 @@ export abstract class BaseTooltip extends LitElement {
     this.#addListeners();
   }
 
-  override firstUpdated(): void {
-    if (this.#invoker && this.#tooltip) {
-      this.#domController.create(this.#invoker, this.#tooltip, this.position, this.offset);
-    }
-  }
-
   /** Show the tooltip */
   show() {
+    this.#domController.create(this.#invoker, this.#tooltip, this.position, this.offset);
     this.#domController.show();
   }
 
@@ -72,11 +69,12 @@ export abstract class BaseTooltip extends LitElement {
   }
 
   override render() {
+    const { initialized } = this.#domController;
     return html`
       <div id="invoker" role="tooltip" tabindex="0" aria-labelledby="tooltip">
         <slot></slot>
       </div>
-      <div id="tooltip" aria-hidden=${!this.#isOpen}>
+      <div id="tooltip" aria-hidden=${!this.#isOpen} class=${classMap({ initialized })}>
         <div class="arrow"></div>
         <div id="content" class="content">
           <slot name="content"></slot>

elements/pfe-tooltip/demo/performance.html

@@ -0,0 +1,3 @@
+<h2>Rendering...</h2>
+<output></output>
+<script type="module" src="../performance.js"></script>

elements/pfe-tooltip/demo/performance.js

@@ -0,0 +1,25 @@
+window.process = { env: {} };
+
+const $ = x => document.querySelector(x);
+const $$ = x => document.querySelectorAll(x);
+
+import { html, render } from 'lit';
+import '@patternfly/pfe-tooltip';
+
+async function measure(start) {
+  render(Array.from({ length: 3000 }, (_, i) => html`
+<pfe-tooltip>
+  <button>${i + 1}</button>
+  <span slot="content">Content for ${i + 1}</span>
+</pfe-tooltip>
+`), $('output'));
+
+  const tooltips = $$('pfe-tooltip');
+  await Promise.all(Array.from(tooltips, x => x.updateComplete));
+  tooltips[0].show();
+  await tooltips[0].updateComplete;
+  return performance.now() - start;
+}
+
+const elapsed = await measure(performance.now());
+$('h2').textContent = `Render took ${(elapsed) / 1000} seconds`;