⚡ perf(popup): load renderer after LCD

.changeset/angry-dots-eat.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**core**: lazy load floating ui lib to improve largest content paint

packages/core/src/components/bal-date/bal-date.tsx

@@ -13,7 +13,6 @@ import {
   Watch,
 } from '@stencil/core'
 import { isSpaceKey } from '../../utils/keyboard'
-import { autoUpdate, computePosition, flip, offset } from '@floating-ui/dom'
 import { i18nBalDate } from './bal-date.i18n'
 import { BEM } from '../../utils/bem'
 import { LogInstance, Loggable, Logger } from '../../utils/log'
@@ -24,6 +23,7 @@ import { BalConfigState, ListenToConfig, defaultConfig } from '../../utils/confi
 import { BalAriaForm, BalLanguage } from '../../interfaces'
 import { debounceEvent } from '../../utils/helpers'
 import { defaultBalAriaForm, BalAriaFormLinking } from '../../utils/form'
+import { balFloatingUi } from '../../utils/floating-ui'
 
 @Component({
   tag: 'bal-date',
@@ -363,10 +363,11 @@ export class Date implements ComponentInterface, Loggable, BalAriaFormLinking {
 
   private async expand(): Promise<boolean> {
     if (this.referenceEl && this.floatingEl) {
+      const lib = await balFloatingUi.load()
       this.balPopoverPrepare.emit(this.inputId)
       this.balWillAnimate.emit()
       this.isExpanded = true
-      this.popupCleanup = autoUpdate(this.referenceEl, this.floatingEl, () => {
+      this.popupCleanup = lib.autoUpdate(this.referenceEl, this.floatingEl, () => {
         this.updatePosition(this.referenceEl as HTMLElement, this.floatingEl as HTMLElement)
       })
     }
@@ -386,17 +387,20 @@ export class Date implements ComponentInterface, Loggable, BalAriaFormLinking {
     return this.isExpanded
   }
 
-  private updatePosition(referenceEl: HTMLElement, floatingEl: HTMLElement) {
-    computePosition(referenceEl, floatingEl, {
-      placement: 'bottom-start',
-      middleware: [offset(4), flip({ crossAxis: false })],
-    }).then(({ x, y }) => {
-      Object.assign(floatingEl.style, {
-        left: `${x}px`,
-        top: `${y}px`,
+  private async updatePosition(referenceEl: HTMLElement, floatingEl: HTMLElement) {
+    const lib = await balFloatingUi.load()
+    lib
+      .computePosition(referenceEl, floatingEl, {
+        placement: 'bottom-start',
+        middleware: [lib.offset(4), lib.flip({ crossAxis: false })],
+      })
+      .then(({ x, y }) => {
+        Object.assign(floatingEl.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        })
+        this.balDidAnimate.emit()
       })
-      this.balDidAnimate.emit()
-    })
   }
 
   /**

packages/core/src/components/bal-popup/variants/popover-variant.renderer.ts

@@ -1,4 +1,4 @@
-import { computePosition, offset, arrow, flip, shift, autoUpdate } from '@floating-ui/dom'
+import { balFloatingUi } from 'packages/core/src/utils/floating-ui'
 import { balBrowser } from '../../../utils/browser'
 import { AbstractVariantRenderer } from './abstract-variant.renderer'
 import { PopupVariantRenderer, PopupComponentInterface } from './variant.interfaces'
@@ -13,6 +13,7 @@ export class PopoverVariantRenderer extends AbstractVariantRenderer implements P
   private triggerEl: Element | null = null
 
   async present(component: PopupComponentInterface): Promise<boolean> {
+    const lib = await balFloatingUi.load()
     //
     // identify trigger element or the the closest trigger available
     if (!component.trigger && balBrowser.hasDocument) {
@@ -47,7 +48,7 @@ export class PopoverVariantRenderer extends AbstractVariantRenderer implements P
           component.setMinWidth(this.triggerEl.clientWidth)
         }
 
-        this.cleanup = autoUpdate(
+        this.cleanup = lib.autoUpdate(
           this.triggerEl,
           component.containerEl,
           () => {
@@ -70,6 +71,8 @@ export class PopoverVariantRenderer extends AbstractVariantRenderer implements P
 
   async update(component: PopupComponentInterface): Promise<boolean> {
     if (this.triggerEl && component.trigger && component.containerEl && component.arrowEl) {
+      const lib = await balFloatingUi.load()
+
       const isNavMetaDesktopPopup = this.placement === 'bottom-end' && this.triggerEl !== component.trigger
       const referenceRect = this.triggerEl?.getBoundingClientRect()
       const triggerRect = component.trigger?.getBoundingClientRect()
@@ -79,57 +82,59 @@ export class PopoverVariantRenderer extends AbstractVariantRenderer implements P
         isInFrame = !!window.frameElement
       }
 
-      computePosition(this.triggerEl, component.containerEl, {
-        placement: this.placement,
-        middleware: [
-          isInFrame ? undefined : shift(),
-          flip(),
-          offset(this.arrow ? 16 : this.offset),
-          arrow({
-            element: component.arrowEl,
-            padding: 4,
-          }),
-        ],
-      }).then(({ x, y, middlewareData, placement }) => {
-        if (component.containerEl) {
-          Object.assign(component.containerEl.style, {
-            left: `${x}px`,
-            top: `${y}px`,
-          })
-
-          const side = placement.split('-')[0]
-
-          const staticSide = {
-            top: 'bottom',
-            right: 'left',
-            bottom: 'top',
-            left: 'right',
-          }[side] as string
-
-          if (middlewareData.arrow && component.arrowEl) {
-            const arrowPosition = middlewareData.arrow
-
-            if (isNavMetaDesktopPopup) {
-              const diff = referenceRect.right - triggerRect.right - 4
-              Object.assign(component.arrowEl.style, {
-                right: `${diff + triggerRect.width / 2}px`,
-                left: '',
-                top: y != null && arrowPosition.y != null ? `${arrowPosition.y}px` : '',
-                bottom: '',
-                [staticSide]: `${-4}px`,
-              })
-            } else {
-              Object.assign(component.arrowEl.style, {
-                left: x != null && arrowPosition.x != null ? `${arrowPosition.x}px` : '',
-                top: y != null && arrowPosition.y != null ? `${arrowPosition.y}px` : '',
-                right: '',
-                bottom: '',
-                [staticSide]: `${-4}px`,
-              })
+      lib
+        .computePosition(this.triggerEl, component.containerEl, {
+          placement: this.placement,
+          middleware: [
+            isInFrame ? undefined : lib.shift(),
+            lib.flip(),
+            lib.offset(this.arrow ? 16 : this.offset),
+            lib.arrow({
+              element: component.arrowEl,
+              padding: 4,
+            }),
+          ],
+        })
+        .then(({ x, y, middlewareData, placement }) => {
+          if (component.containerEl) {
+            Object.assign(component.containerEl.style, {
+              left: `${x}px`,
+              top: `${y}px`,
+            })
+
+            const side = placement.split('-')[0]
+
+            const staticSide = {
+              top: 'bottom',
+              right: 'left',
+              bottom: 'top',
+              left: 'right',
+            }[side] as string
+
+            if (middlewareData.arrow && component.arrowEl) {
+              const arrowPosition = middlewareData.arrow
+
+              if (isNavMetaDesktopPopup) {
+                const diff = referenceRect.right - triggerRect.right - 4
+                Object.assign(component.arrowEl.style, {
+                  right: `${diff + triggerRect.width / 2}px`,
+                  left: '',
+                  top: y != null && arrowPosition.y != null ? `${arrowPosition.y}px` : '',
+                  bottom: '',
+                  [staticSide]: `${-4}px`,
+                })
+              } else {
+                Object.assign(component.arrowEl.style, {
+                  left: x != null && arrowPosition.x != null ? `${arrowPosition.x}px` : '',
+                  top: y != null && arrowPosition.y != null ? `${arrowPosition.y}px` : '',
+                  right: '',
+                  bottom: '',
+                  [staticSide]: `${-4}px`,
+                })
+              }
             }
           }
-        }
-      })
+        })
       return true
     }
     return false

packages/core/src/components/bal-tooltip/bal-tooltip.tsx

@@ -16,7 +16,7 @@ import { BEM } from '../../utils/bem'
 import { balBrowser } from '../../utils/browser'
 import { balDevice } from '../../utils/device'
 import { showContainerElement, showArrowElement, hideContainerElement, hideArrowElement } from './bal-tooltip.util'
-import { computePosition, offset, arrow, flip, autoUpdate, shift } from '@floating-ui/dom'
+import { balFloatingUi } from '../../utils/floating-ui'
 
 @Component({
   tag: 'bal-tooltip',
@@ -169,7 +169,8 @@ export class Tooltip implements ComponentInterface, Loggable {
       this.trigger.classList.add('bal-tooltip-trigger')
       this.presented = true
 
-      this.cleanup = autoUpdate(
+      const lib = await balFloatingUi.load()
+      this.cleanup = lib.autoUpdate(
         this.trigger,
         this.containerEl,
         () => {
@@ -228,45 +229,48 @@ export class Tooltip implements ComponentInterface, Loggable {
         isInFrame = !!window.frameElement
       }
 
-      computePosition(this.trigger, this.containerEl, {
-        placement: this.placement,
-        middleware: [
-          isInFrame ? undefined : shift(),
-          flip(),
-          offset(8),
-          arrow({
-            element: this.arrowEl,
-            padding: 4,
-          }),
-        ],
-      }).then(({ x, y, middlewareData, placement }) => {
-        const side = placement.split('-')[0]
-
-        const staticSide = {
-          top: 'bottom',
-          right: 'left',
-          bottom: 'top',
-          left: 'right',
-        }[side] as string
-
-        if (this.containerEl) {
-          Object.assign(this.containerEl.style, {
-            left: `${x}px`,
-            top: `${y}px`,
-          })
-        }
-
-        if (middlewareData.arrow && this.arrowEl) {
-          const arrowPosition = middlewareData.arrow
-          Object.assign(this.arrowEl.style, {
-            left: x != null && arrowPosition.x != null ? `${arrowPosition.x}px` : '',
-            top: y != null && arrowPosition.y != null ? `${arrowPosition.y}px` : '',
-            right: '',
-            bottom: '',
-            [staticSide]: `${-4}px`,
-          })
-        }
-      })
+      const lib = await balFloatingUi.load()
+      lib
+        .computePosition(this.trigger, this.containerEl, {
+          placement: this.placement,
+          middleware: [
+            isInFrame ? undefined : lib.shift(),
+            lib.flip(),
+            lib.offset(8),
+            lib.arrow({
+              element: this.arrowEl,
+              padding: 4,
+            }),
+          ],
+        })
+        .then(({ x, y, middlewareData, placement }) => {
+          const side = placement.split('-')[0]
+
+          const staticSide = {
+            top: 'bottom',
+            right: 'left',
+            bottom: 'top',
+            left: 'right',
+          }[side] as string
+
+          if (this.containerEl) {
+            Object.assign(this.containerEl.style, {
+              left: `${x}px`,
+              top: `${y}px`,
+            })
+          }
+
+          if (middlewareData.arrow && this.arrowEl) {
+            const arrowPosition = middlewareData.arrow
+            Object.assign(this.arrowEl.style, {
+              left: x != null && arrowPosition.x != null ? `${arrowPosition.x}px` : '',
+              top: y != null && arrowPosition.y != null ? `${arrowPosition.y}px` : '',
+              right: '',
+              bottom: '',
+              [staticSide]: `${-4}px`,
+            })
+          }
+        })
       this.balDidAnimate.emit()
 
       return true

packages/core/src/test/seo/01-nav.html

@@ -172,7 +172,7 @@ <h1 class="subtitle">Findings</h1>
 
           nav.buttons = [
             {
-              icon: 'call',
+              icon: 'check',
               popupId: 'popup-call',
               touchPlacement: 'bottom',
               ariaLabel: '24h Kundenservice',
@@ -186,22 +186,22 @@ <h1 class="subtitle">Findings</h1>
               htmlTitle: 'Sprache wählen',
             },
             {
-              icon: 'location',
+              icon: 'check',
               htmlTitle: 'Berater und Standorte',
               ariaLabel: 'Berater und Standorte',
               href: 'https://www.baloise.ch/de/privatkunden/kontakt-services/berater-standorte.html',
               target: '_blank',
               touchPlacement: 'none',
             },
             {
-              icon: 'search',
+              icon: 'check',
               popupId: 'popup-search',
               ariaLabel: 'Suchen',
               htmlTitle: 'Suchen',
             },
             {
               label: 'Anmelden',
-              icon: 'account',
+              icon: 'check',
               popupId: 'popup-login',
               ariaLabel: 'Anmelden',
               htmlTitle: 'Anmelden',

packages/core/src/utils/dropdown/popup.ts

@@ -1,4 +1,4 @@
-import { autoUpdate, computePosition, flip, shift } from '@floating-ui/dom'
+import { BalFloatingUi, balFloatingUi } from '../floating-ui'
 import { DropdownComponent } from './component'
 
 export class DropdownPopupUtil {
@@ -8,16 +8,18 @@ export class DropdownPopupUtil {
     this.component = component
   }
 
-  updatePanelPosition = (referenceEl: HTMLElement, floatingEl: HTMLElement) => () => {
-    computePosition(referenceEl, floatingEl, {
-      placement: 'bottom-start',
-      middleware: [flip(), shift()],
-    }).then(({ x, y }) => {
-      Object.assign(floatingEl.style, {
-        left: `${x}px`,
-        top: `${y}px`,
+  updatePanelPosition = (lib: BalFloatingUi, referenceEl: HTMLElement, floatingEl: HTMLElement) => () => {
+    lib
+      .computePosition(referenceEl, floatingEl, {
+        placement: 'bottom-start',
+        middleware: [lib.flip(), lib.shift()],
+      })
+      .then(({ x, y }) => {
+        Object.assign(floatingEl.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        })
       })
-    })
   }
 
   toggleList() {
@@ -32,10 +34,11 @@ export class DropdownPopupUtil {
 
   async expandList() {
     if (this.component.panelEl) {
-      this.component.panelCleanup = autoUpdate(
+      const lib = await balFloatingUi.load()
+      this.component.panelCleanup = lib.autoUpdate(
         this.component.el,
         this.component.panelEl,
-        this.updatePanelPosition(this.component.el, this.component.panelEl),
+        this.updatePanelPosition(lib, this.component.el, this.component.panelEl),
       )
     }
     this.component.isExpanded = true