perf(gesture): lazy loaded dynamic ES module

core/src/components/picker-column/picker-column.tsx

@@ -1,6 +1,6 @@
 import { Component, Element, Prop, QueueApi } from '@stencil/core';
 
-import { GestureDetail, Mode, PickerColumn, PickerColumnOption } from '../../interface';
+import { Gesture, GestureDetail, Mode, PickerColumn, PickerColumnOption } from '../../interface';
 import { hapticSelectionChanged } from '../../utils';
 import { clamp } from '../../utils/helpers';
 import { createThemedClasses } from '../../utils/theme';
@@ -24,6 +24,7 @@ export class PickerColumnCmp {
   private startY?: number;
   private velocity = 0;
   private y = 0;
+  private gesture?: Gesture;
 
   @Element() el!: HTMLElement;
 
@@ -44,7 +45,7 @@ export class PickerColumnCmp {
     this.scaleFactor = pickerScaleFactor;
   }
 
-  componentDidLoad() {
+  async componentDidLoad() {
     // get the scrollable element within the column
     const colEl = this.el.querySelector('.picker-opts')!;
 
@@ -52,6 +53,19 @@ export class PickerColumnCmp {
     this.optHeight = (colEl.firstElementChild ? colEl.firstElementChild.clientHeight : 0);
 
     this.refresh();
+
+    this.gesture = (await import('../../utils/gesture/gesture')).create({
+      el: this.el,
+      queue: this.queue,
+      gestureName: 'picker-swipe',
+      gesturePriority: 10,
+      threshold: 0,
+      canStart: this.canStart.bind(this),
+      onStart: this.onDragStart.bind(this),
+      onMove: this.onDragMove.bind(this),
+      onEnd: this.onDragEnd.bind(this),
+    });
+    this.gesture.disabled = false;
   }
 
   private optClick(ev: Event, index: number) {
@@ -397,7 +411,7 @@ export class PickerColumnCmp {
       }
       return o;
     })
-    .filter(clientInformation => clientInformation !== null);
+    .filter(o => o !== null);
 
     const results: JSX.Element[] = [];
 
@@ -410,18 +424,6 @@ export class PickerColumnCmp {
     }
 
     results.push(
-      <ion-gesture
-        canStart={this.canStart.bind(this)}
-        onStart={this.onDragStart.bind(this)}
-        onMove={this.onDragMove.bind(this)}
-        onEnd={this.onDragEnd.bind(this)}
-        gestureName="picker-swipe"
-        gesturePriority={10}
-        direction="y"
-        passive={false}
-        threshold={0}
-        attachTo="parent"
-      ></ion-gesture>,
       <div class="picker-opts" style={{ maxWidth: col.optionsWidth! }}>
         {options.map((o, index) =>
           <button