Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(overlay): make interaction controllers more lazy #4319

Merged
merged 1 commit into from Apr 29, 2024

Conversation

Westbrook
Copy link
Collaborator

Description

Allow an interaction controller to be created without requiring the presence of an Overlay

How has this been tested?

  • Test case 1
    1. Go here
    2. In mobile
    3. See that when you open the Settings Panel or Side Nav the Overlay code is lazily loaded

Types of changes

  • Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

  • I have signed the Adobe Open Source CLA.
  • My code follows the code style of this project.
  • If my change required a change to the documentation, I have updated the documentation in this pull request.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

@Westbrook Westbrook requested a review from a team April 26, 2024 16:36
Copy link

github-actions bot commented Apr 26, 2024

Lighthouse scores

Category Latest (report) Main (report) Branch (report)
Performance 0.94 0.99 0.99
Accessibility 1 1 1
Best Practices 1 1 1
SEO 1 0.92 0.92
PWA 1 1 1
What is this?

Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on main ("Main"). Higher scores are better, but note that the SEO scores on Netlify URLs are artifically constrained to 0.92.

Transfer Size

Category Latest Main Branch
Total 229.277 kB 211.821 kB 🏆 212.357 kB
Scripts 61.062 kB 49.546 kB 🏆 49.715 kB
Stylesheet 35.515 kB 30.483 kB 🏆 30.71 kB
Document 5.958 kB 5.177 kB 🏆 5.178 kB
Font 126.742 kB 126.615 kB 🏆 126.754 kB

Request Count

Category Latest Main Branch
Total 43 43 43
Scripts 35 35 35
Stylesheet 5 5 5
Document 1 1 1
Font 2 2 2

Copy link

github-actions bot commented Apr 26, 2024

Tachometer results

Chrome

action-bar permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 483 kB 49.60ms - 51.05ms - unsure 🔍
-2% - +3%
-0.98ms - +1.39ms
branch 475 kB 49.18ms - 51.06ms unsure 🔍
-3% - +2%
-1.39ms - +0.98ms
-

action-menu permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 646 kB 133.08ms - 136.49ms - unsure 🔍
-0% - +3%
-0.23ms - +4.41ms
branch 638 kB 131.12ms - 134.26ms unsure 🔍
-3% - +0%
-4.41ms - +0.23ms
-

test-directive permalink

Version Bytes Avg Time vs remote vs branch
npm latest 603 kB 61.42ms - 62.66ms - slower ❌
0% - 3%
0.06ms - 1.68ms
branch 595 kB 60.66ms - 61.69ms faster ✔
0% - 3%
0.06ms - 1.68ms
-

test-lazy permalink

Version Bytes Avg Time vs remote vs branch
npm latest 602 kB 59.54ms - 60.90ms - unsure 🔍
-0% - +3%
-0.28ms - +1.56ms
branch 594 kB 58.95ms - 60.19ms unsure 🔍
-3% - +0%
-1.56ms - +0.28ms
-

test-open-close-directive permalink

Version Bytes Avg Time vs remote vs branch
npm latest 787 kB 1871.12ms - 1874.22ms - unsure 🔍
-0% - +0%
-4.35ms - +0.02ms
branch 778 kB 1873.30ms - 1876.37ms unsure 🔍
-0% - +0%
-0.02ms - +4.35ms
-

test-open-close permalink

Version Bytes Avg Time vs remote vs branch
npm latest 786 kB 1856.04ms - 1858.32ms - unsure 🔍
-0% - -0%
-3.44ms - -0.12ms
branch 777 kB 1857.75ms - 1860.17ms unsure 🔍
+0% - +0%
+0.12ms - +3.44ms
-

combobox permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 707 kB 36.24ms - 36.73ms - unsure 🔍
-2% - +0%
-0.55ms - +0.14ms
branch 698 kB 36.45ms - 36.94ms unsure 🔍
-0% - +2%
-0.14ms - +0.55ms
-

light-dom-test permalink

Version Bytes Avg Time vs remote vs branch
npm latest 707 kB 387.35ms - 394.92ms - unsure 🔍
-1% - +1%
-5.11ms - +4.85ms
branch 699 kB 388.03ms - 394.50ms unsure 🔍
-1% - +1%
-4.85ms - +5.11ms
-

menu permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 476 kB 209.80ms - 213.59ms - unsure 🔍
-1% - +1%
-2.72ms - +2.38ms
branch 467 kB 210.16ms - 213.57ms unsure 🔍
-1% - +1%
-2.38ms - +2.72ms
-

overlay permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 672 kB 425.27ms - 428.69ms - unsure 🔍
-1% - +1%
-2.14ms - +2.85ms
branch 680 kB 424.81ms - 428.44ms unsure 🔍
-1% - +1%
-2.85ms - +2.14ms
-

directive-test permalink

Version Bytes Avg Time vs remote vs branch
npm latest 785 kB 24.47ms - 25.05ms - slower ❌
10% - 13%
2.14ms - 2.90ms
branch 764 kB 21.99ms - 22.49ms faster ✔
9% - 12%
2.14ms - 2.90ms
-

element-test permalink

Version Bytes Avg Time vs remote vs branch
npm latest 759 kB 346.24ms - 350.13ms - unsure 🔍
-0% - +1%
-1.28ms - +3.56ms
branch 750 kB 345.61ms - 348.49ms unsure 🔍
-1% - +0%
-3.56ms - +1.28ms
-

lazy-test permalink

Version Bytes Avg Time vs remote vs branch
npm latest 559 kB 40.11ms - 41.12ms - unsure 🔍
-2% - +1%
-1.02ms - +0.35ms
branch 551 kB 40.48ms - 41.42ms unsure 🔍
-1% - +3%
-0.35ms - +1.02ms
-

picker permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 513 kB 520.06ms - 531.51ms - unsure 🔍
-1% - +2%
-5.70ms - +10.77ms
branch 504 kB 517.33ms - 529.17ms unsure 🔍
-2% - +1%
-10.77ms - +5.70ms
-

popover permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 383 kB 11.35ms - 11.49ms - unsure 🔍
-3% - +1%
-0.33ms - +0.13ms
branch 374 kB 11.30ms - 11.74ms unsure 🔍
-1% - +3%
-0.13ms - +0.33ms
-

split-button permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 721 kB 1854.75ms - 1857.79ms - unsure 🔍
-0% - -0%
-4.95ms - -0.10ms
branch 712 kB 1856.91ms - 1860.68ms unsure 🔍
+0% - +0%
+0.10ms - +4.95ms
-

tooltip permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 548 kB 33.74ms - 34.37ms - unsure 🔍
-2% - +1%
-0.57ms - +0.38ms
branch 544 kB 33.80ms - 34.51ms unsure 🔍
-1% - +2%
-0.38ms - +0.57ms
-

test-directive permalink

Version Bytes Avg Time vs remote vs branch
npm latest 652 kB 25.88ms - 26.49ms - slower ❌
9% - 13%
2.16ms - 3.02ms
branch 534 kB 23.29ms - 23.90ms faster ✔
8% - 11%
2.16ms - 3.02ms
-

test-element permalink

Version Bytes Avg Time vs remote vs branch
npm latest 652 kB 50.73ms - 51.83ms - unsure 🔍
-3% - +0%
-1.46ms - +0.04ms
branch 644 kB 51.49ms - 52.50ms unsure 🔍
-0% - +3%
-0.04ms - +1.46ms
-

test-lazy permalink

Version Bytes Avg Time vs remote vs branch
npm latest 629 kB 40.87ms - 41.94ms - unsure 🔍
-3% - +0%
-1.44ms - +0.03ms
branch 621 kB 41.60ms - 42.62ms unsure 🔍
-0% - +3%
-0.03ms - +1.44ms
-

truncated permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 525 kB 54.73ms - 55.54ms - unsure 🔍
-2% - +1%
-0.97ms - +0.35ms
branch 517 kB 54.92ms - 55.97ms unsure 🔍
-1% - +2%
-0.35ms - +0.97ms
-
Firefox

action-bar permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 483 kB 104.93ms - 110.83ms - unsure 🔍
-2% - +5%
-2.31ms - +5.23ms
branch 475 kB 104.08ms - 108.76ms unsure 🔍
-5% - +2%
-5.23ms - +2.31ms
-

action-menu permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 646 kB 265.57ms - 268.03ms - faster ✔
8% - 9%
22.45ms - 26.87ms
branch 638 kB 289.63ms - 293.29ms slower ❌
8% - 10%
22.45ms - 26.87ms
-

test-directive permalink

Version Bytes Avg Time vs remote vs branch
npm latest 603 kB 122.53ms - 123.95ms - unsure 🔍
-1% - +0%
-1.51ms - +0.55ms
branch 595 kB 122.97ms - 124.47ms unsure 🔍
-0% - +1%
-0.55ms - +1.51ms
-

test-lazy permalink

Version Bytes Avg Time vs remote vs branch
npm latest 602 kB 143.89ms - 148.79ms - slower ❌
9% - 14%
12.00ms - 17.84ms
branch 594 kB 129.83ms - 133.01ms faster ✔
8% - 12%
12.00ms - 17.84ms
-

test-open-close-directive permalink

Version Bytes Avg Time vs remote vs branch
npm latest 787 kB 1911.71ms - 1917.01ms - slower ❌
2% - 2%
29.08ms - 35.56ms
branch 778 kB 1880.18ms - 1883.90ms faster ✔
2% - 2%
29.08ms - 35.56ms
-

test-open-close permalink

Version Bytes Avg Time vs remote vs branch
npm latest 786 kB 1880.52ms - 1884.52ms - unsure 🔍
-0% - +0%
-0.18ms - +5.46ms
branch 777 kB 1877.89ms - 1881.87ms unsure 🔍
-0% - +0%
-5.46ms - +0.18ms
-

combobox permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 707 kB 65.56ms - 69.76ms - slower ❌
13% - 20%
7.47ms - 11.69ms
branch 698 kB 57.87ms - 58.29ms faster ✔
11% - 17%
7.47ms - 11.69ms
-

light-dom-test permalink

Version Bytes Avg Time vs remote vs branch
npm latest 707 kB 691.13ms - 703.87ms - slower ❌
3% - 6%
18.36ms - 39.48ms
branch 699 kB 660.16ms - 677.00ms faster ✔
3% - 6%
18.36ms - 39.48ms
-

menu permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 476 kB 414.96ms - 425.96ms - unsure 🔍
-3% - +1%
-13.08ms - +4.88ms
branch 467 kB 417.46ms - 431.66ms unsure 🔍
-1% - +3%
-4.88ms - +13.08ms
-

overlay permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 765 kB 596.66ms - 601.22ms - slower ❌
2% - 4%
12.92ms - 24.80ms
branch 757 kB 574.60ms - 585.56ms faster ✔
2% - 4%
12.92ms - 24.80ms
-

directive-test permalink

Version Bytes Avg Time vs remote vs branch
npm latest 769 kB 48.37ms - 49.91ms - slower ❌
8% - 13%
3.78ms - 5.58ms
branch 760 kB 44.00ms - 44.92ms faster ✔
8% - 11%
3.78ms - 5.58ms
-

element-test permalink

Version Bytes Avg Time vs remote vs branch
npm latest 759 kB 614.76ms - 621.64ms - slower ❌
5% - 7%
30.41ms - 38.35ms
branch 750 kB 581.84ms - 585.80ms faster ✔
5% - 6%
30.41ms - 38.35ms
-

lazy-test permalink

Version Bytes Avg Time vs remote vs branch
npm latest 559 kB 93.41ms - 96.31ms - slower ❌
9% - 14%
8.11ms - 11.93ms
branch 551 kB 83.60ms - 86.08ms faster ✔
9% - 12%
8.11ms - 11.93ms
-

picker permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 513 kB 945.59ms - 953.69ms - unsure 🔍
-2% - +0%
-17.19ms - +4.55ms
branch 504 kB 945.87ms - 966.05ms unsure 🔍
-0% - +2%
-4.55ms - +17.19ms
-

popover permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 383 kB 27.95ms - 30.81ms - unsure 🔍
-14% - +1%
-4.44ms - +0.52ms
branch 374 kB 29.31ms - 33.37ms unsure 🔍
-2% - +15%
-0.52ms - +4.44ms
-

split-button permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 721 kB 1872.33ms - 1875.35ms - unsure 🔍
-0% - -0%
-7.15ms - -2.17ms
branch 712 kB 1876.52ms - 1880.48ms unsure 🔍
+0% - +0%
+2.17ms - +7.15ms
-

tooltip permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 652 kB 73.49ms - 77.19ms - slower ❌
2% - 10%
1.71ms - 7.33ms
branch 643 kB 68.71ms - 72.93ms faster ✔
2% - 10%
1.71ms - 7.33ms
-

test-directive permalink

Version Bytes Avg Time vs remote vs branch
npm latest 633 kB 50.24ms - 51.20ms - faster ✔
10% - 18%
5.46ms - 10.74ms
branch 525 kB 56.23ms - 61.41ms slower ❌
11% - 21%
5.46ms - 10.74ms
-

test-element permalink

Version Bytes Avg Time vs remote vs branch
npm latest 652 kB 105.17ms - 108.99ms - faster ✔
4% - 9%
4.30ms - 9.82ms
branch 644 kB 112.15ms - 116.13ms slower ❌
4% - 9%
4.30ms - 9.82ms
-

test-lazy permalink

Version Bytes Avg Time vs remote vs branch
npm latest 629 kB 88.57ms - 92.59ms - faster ✔
0% - 6%
0.17ms - 6.11ms
branch 621 kB 91.54ms - 95.90ms slower ❌
0% - 7%
0.17ms - 6.11ms
-

truncated permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 525 kB 96.56ms - 101.96ms - unsure 🔍
-5% - +3%
-4.61ms - +2.93ms
branch 517 kB 97.46ms - 102.74ms unsure 🔍
-3% - +5%
-2.93ms - +4.61ms
-

@Westbrook Westbrook force-pushed the lazy-interaction-controller branch 2 times, most recently from d9d34de to 62ce3a9 Compare April 26, 2024 21:31
packages/overlay/src/AbstractOverlay.ts Show resolved Hide resolved
@@ -384,7 +386,10 @@ export class AbstractOverlay extends SpectrumElement {
return overlay;
}

static applyOptions(overlay: Overlay, options: OverlayOptions): void {
static applyOptions(
overlay: AbstractOverlay,
Copy link
Contributor

@Rajdeepc Rajdeepc Apr 29, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just for curiosity which subclasses or properties we are trying to bring in by changing to AbstractOverlay from Overlay?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

An Overlay is an AbstractOverlay but AbstractOverlay comes with less transient dependencies, so there is less JS loaded when using this class in overlay-trigger-directive.ts

packages/overlay/src/InteractionController.ts Show resolved Hide resolved
this.overlay.open = open;
return;
}
if (!open) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we keep this above line 42?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If there is a value for this.overlay we want to apply it. If there isn't a value, and the state is closed, this is the same as having no Overlay at all, so we early return. I can add some comments on this.

@Westbrook Westbrook merged commit 88aa666 into main Apr 29, 2024
48 checks passed
@Westbrook Westbrook deleted the lazy-interaction-controller branch April 29, 2024 13:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants