fix(OverlayTrigger): delay update for overlay trigger to avoid infinite loop

[jcmitch]

Description

Overlay Trigger has potential to get into an infinite loop on initial render. This PR adds a delay using requestAnimationFrame to avoid this issue. As discussed in person this does not solve the root cause but finding that will require a deeper dive by the core SWC team.

Related issue(s)

• [Bug]: OverlayTrigger can get stuck in a render loop causing page crash #4689

Motivation and context

Resolves an issue related to endless render loop.

How has this been tested?

Manual testing in Adobe Express

• Did it pass in Desktop?
• Did it pass in Mobile?
• Did it pass in iPad?

Screenshots (if appropriate)

N/A

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• 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.
• I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 19da916

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

Branch preview

• Documentation Site
• Storybook

Review the following VRT differences

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

• Spectrum | Light | Medium | LTR
• Spectrum | Dark | Large | RTL
• Express | Light | Medium | LTR
• Express | Dark | Large | RTL
• Spectrum-two | Light | Medium | LTR
• Spectrum-two | Dark | Large | RTL
• High Contrast Mode | Medium | LTR

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

[github-actions]

Lighthouse scores

Category	Latest (report)	Main (report)	Branch (report)
Performance	0.99	0.99	0.98
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	243.717 kB	230.627 kB 🏆	230.824 kB
Scripts	60.305 kB	54.298 kB	54.271 kB 🏆
Stylesheet	47.64 kB	41.835 kB 🏆	42.085 kB
Document	6.224 kB	5.489 kB	5.487 kB 🏆
Font	126.754 kB	126.614 kB 🏆	126.632 kB

Request Count

Category	Latest	Main	Branch
Total	52	52	52
Scripts	41	41	41
Stylesheet	5	5	5
Document	1	1	1
Font	2	2	2

[coveralls]

Pull Request Test Coverage Report for Build 13555636806

Details

• 6 of 6 (100.0%) changed or added relevant lines in 1 file are covered.
• 40 unchanged lines in 6 files lost coverage.
• Overall coverage decreased (-0.1%) to 97.854%

---

Files with Coverage Reduction	New Missed Lines	%
packages/overlay/src/OverlayStack.ts	1	91.64%
packages/overlay/src/OverlayPopover.ts	2	84.95%
packages/overlay/src/Overlay.ts	2	98.03%
packages/overlay/src/OverlayTrigger.ts	3	98.87%
packages/dialog/src/DialogBase.ts	8	90.1%
packages/overlay/src/LongpressController.ts	24	86.94%

Totals
Change from base Build 13553587344:	-0.1%
Covered Lines:	33628
Relevant Lines:	34170

---

💛 - Coveralls

[github-actions]

Tachometer results

Currently, no packages are changed by this PR...

[rubencarvalho]

This introduces a noticeable "jumpy" effect on a couple of examples:
https://jmitchel-4689-overlay-trigger-update-2--spectrum-web-components.netlify.app/storybook/?path=/story/overlay--side-hover-draggable
https://jmitchel-4689-overlay-trigger-update-2--spectrum-web-components.netlify.app/storybook/?path=/story/overlay--updated

[jcmitch]

@rubencarvalho can you clarify the jump? I could see how this change could introduce a jump but I wasn't able to see one at all. If it is a problem we could also look to see if restricting the delay to initial render would still fix the issue.

Here is a video of what I'm seeing comparing Storybook on main and this branch for the two stories you called out.

SWC-Difference.mov

[caseyisonit]

@jcmitch can you include some testing guidance that section seems to have been removed and only manually tested in Adobe Express. Also we will need to add automated testing to cover this in CI so we cover regression.

[rubencarvalho]

This got solved by #5046, issue #4689 is closed.