Skip to content

refactor: use requestAnimationFrame to replace readTask#10432

Merged
jcfranco merged 2 commits intodevfrom
jcfranco/10348-swap-out-readTask-for-requestAnimationFrame
Oct 1, 2024
Merged

refactor: use requestAnimationFrame to replace readTask#10432
jcfranco merged 2 commits intodevfrom
jcfranco/10348-swap-out-readTask-for-requestAnimationFrame

Conversation

@jcfranco
Copy link
Copy Markdown
Member

@jcfranco jcfranco commented Sep 28, 2024

Related Issue: #10348

Summary

We've been using readTask in a few places to ensure proper timing for DOM reads w/o triggering layout thrashing. Looking at the implementation, we might be able to get close or similar behavior by using requestAnimationFrame.

@github-actions github-actions Bot added the refactor Issues tied to code that needs to be significantly reworked. label Sep 28, 2024
@jcfranco jcfranco added the skip visual snapshots Pull requests that do not need visual regression testing. label Sep 28, 2024
@jcfranco jcfranco marked this pull request as ready for review October 1, 2024 16:52
* Exported for testing purposes only
*/
export const internalReadTask = readTask;
export const internalRaf = requestAnimationFrame;
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

I'll try to remove this before installing.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Yeah seems like this just needs to be cleaned up to just use requestAnimationFrame by itself.

Copy link
Copy Markdown
Member

@driskull driskull left a comment

Choose a reason for hiding this comment

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

👍

jest.spyOn(openCloseComponent, "internalReadTask").mockImplementation((task) => task(1337));
jest.spyOn(openCloseComponent, "internalRaf").mockImplementation((task) => {
task(1337);
return 1337;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

1337!

* Exported for testing purposes only
*/
export const internalReadTask = readTask;
export const internalRaf = requestAnimationFrame;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Yeah seems like this just needs to be cleaned up to just use requestAnimationFrame by itself.

@jcfranco jcfranco merged commit fe792d3 into dev Oct 1, 2024
@jcfranco jcfranco deleted the jcfranco/10348-swap-out-readTask-for-requestAnimationFrame branch October 1, 2024 22:23
@github-actions github-actions Bot added this to the 2.13.1 patch milestone Oct 1, 2024
@nel11211
Copy link
Copy Markdown

nel11211 commented Oct 4, 2024

I think this change may have broken our calcite-dropdown in Charts: https://devtopia.esri.com/WebGIS/arcgis-charts/issues/8610

Still working through the details.

@jcfranco
Copy link
Copy Markdown
Member Author

jcfranco commented Oct 4, 2024

@nel11211 Let us know if you are able to narrow it down to this.

@nel11211
Copy link
Copy Markdown

nel11211 commented Oct 4, 2024

@nel11211 Let us know if you are able to narrow it down to this.

Ok I think I see what's happening. arcgis-tab-manager triggers a dynamic click() here when a tab select() function is called. When the dropdown is opened, Charts also opens a new tab for the chart in question and selects it. The dynamic click is being interpreted by the calcite-dropdown as a click outside the dropdown, triggering an auto-close.

@kumarGayu Is a dynamic click necessary for the function that selects a tab?

@jcfranco
Copy link
Copy Markdown
Member Author

jcfranco commented Oct 4, 2024

@nel11211 Thanks for sharing your findings! If I’m reading this right, this doesn’t seem to be related to this PR. Would you mind moving the conversation to a more appropriate place?

@nel11211
Copy link
Copy Markdown

nel11211 commented Oct 4, 2024

Opened an issue in Analysis repo if we want to move discussion there: https://devtopia.esri.com/WebGIS/arcgis-web-analysis/issues/7297

@nel11211
Copy link
Copy Markdown

nel11211 commented Oct 4, 2024

@nel11211 Thanks for sharing your findings! If I’m reading this right, this doesn’t seem to be related to this PR. Would you mind moving the conversation to a more appropriate place?

It's not the root cause no, but worth noting for some reason the issue wasn't happening until the change from this PR.

benelan added a commit that referenced this pull request Oct 7, 2024
* origin/dev: (230 commits)
  chore: release next
  chore(sort-handle): add messages (#10474)
  feat(accordion-item): stretch slotted actions to fill its height (#9250)
  chore: release next
  feat(dialog, modal, popover, input-date-picker,  input-time-picker, sheet): support stacked component sequential closing with escape (#9231)
  chore: remove commented-out code (#10478)
  chore: add cssrem VSCode extension recommendation (#10300)
  docs(accordion-item): fix deprecation tag (#10479)
  chore: release next
  feat(stepper-item): update component's active state background color. (#10475)
  refactor: use `requestAnimationFrame` to replace `readTask` (#10432)
  chore: release next
  fix(tip): fix rendering tied to named-slot content (#10470)
  ci: compile estimate totals per milestone (#10442)
  chore: release next
  fix(modal): fix rendering tied to named-slot content (#10469)
  chore: release next
  fix(shell-center-row): fix rendering tied to named-slot content (#10451)
  fix(inline-editable): fix rendering tied to default slot content (#10456)
  fix(input, input-number, input-text): should not set slotted actions to be disabled (#10458)
  ...
benelan pushed a commit that referenced this pull request Feb 8, 2025
**Related Issue:** #10348

## Summary

We've been using `readTask` in a few places to ensure proper timing for
DOM reads w/o triggering layout thrashing. Looking at [the
implementation](https://github.com/ionic-team/stencil/blob/7ede77a873486b5cf47f0b26571f852675f67dd6/src/client/client-task-queue.ts#L23),
we might be able to get close or similar behavior by using
`requestAnimationFrame`.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

refactor Issues tied to code that needs to be significantly reworked. skip visual snapshots Pull requests that do not need visual regression testing.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants