perf: make submenus lazier

adobe · Aug 18, 2023 · a2d661c · a2d661c
1 parent e9b477c
commit a2d661c
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 2 deletions.
diff --git a/packages/menu/src/MenuItem.ts b/packages/menu/src/MenuItem.ts
@@ -266,6 +266,7 @@ export class MenuItem extends LikeAnchor(
             return slot;
         }
         import('@spectrum-web-components/overlay/sp-overlay.js');
+        import('@spectrum-web-components/popover/sp-popover.js');
         return html`
             <sp-overlay
                 .triggerElement=${this as HTMLElement}

diff --git a/packages/menu/test/submenu.test.ts b/packages/menu/test/submenu.test.ts
@@ -113,6 +113,8 @@ describe('Submenu', () => {
         );
 
         await elementUpdated(el);
+        await nextFrame();
+        await nextFrame();
         const rootItem = el.querySelector('.root') as MenuItem;
         const rootItemBoundingRect = rootItem.getBoundingClientRect();
         expect(rootItem.open).to.be.false;

diff --git a/packages/picker/src/Picker.ts b/packages/picker/src/Picker.ts
@@ -43,8 +43,6 @@ import type {
     MenuItem,
     MenuItemChildren,
 } from '@spectrum-web-components/menu';
-import '@spectrum-web-components/tray/sp-tray.js';
-import '@spectrum-web-components/popover/sp-popover.js';
 import { Placement } from '@spectrum-web-components/overlay';
 import {
     IS_MOBILE,
@@ -480,6 +478,7 @@ export class PickerBase extends SizedMixin(Focusable) {
         // @todo: test in mobile
         /* c8 ignore next 11 */
         if (this.isMobile.matches) {
+            import('@spectrum-web-components/tray/sp-tray.js');
             return html`
                 <sp-tray
                     id="popover"
@@ -490,6 +489,7 @@ export class PickerBase extends SizedMixin(Focusable) {
                 </sp-tray>
             `;
         }
+        import('@spectrum-web-components/popover/sp-popover.js');
         return html`
             <sp-popover
                 id="popover"

diff --git a/packages/picker/sync/index.ts b/packages/picker/sync/index.ts
@@ -11,3 +11,5 @@ governing permissions and limitations under the License.
 */
 
 import '@spectrum-web-components/overlay/sp-overlay.js';
+import '@spectrum-web-components/tray/sp-tray.js';
+import '@spectrum-web-components/popover/sp-popover.js';