refactor: use requestAnimationFrame to replace readTask (#10432)

**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`.
Esri · Oct 1, 2024 · fe792d3 · fe792d3
1 parent bcdd5ac
commit fe792d3
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 13 deletions.
diff --git a/packages/calcite-components/src/components/stepper/stepper.tsx b/packages/calcite-components/src/components/stepper/stepper.tsx
@@ -11,7 +11,6 @@ import {
   State,
   VNode,
   Watch,
-  readTask,
 } from "@stencil/core";
 import { focusElementInGroup, slotChangeGetAssignedElements } from "../../utils/dom";
 import { Position, Scale } from "../interfaces";
@@ -356,7 +355,7 @@ export class Stepper implements LocalizedComponent, T9nComponent {
 
   @Watch("currentActivePosition")
   handlePositionChange(): void {
-    readTask((): void => {
+    requestAnimationFrame((): void => {
       this.determineActiveStepper();
     });
   }

diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.tsx b/packages/calcite-components/src/components/tab-nav/tab-nav.tsx
@@ -7,7 +7,6 @@ import {
   Host,
   Listen,
   Prop,
-  readTask,
   State,
   VNode,
   Watch,
@@ -262,7 +261,7 @@ export class TabNav implements LocalizedComponent, T9nComponent {
       return;
     }
 
-    readTask(() => {
+    requestAnimationFrame(() => {
       const isLTR = this.effectiveDir === "ltr";
       const tabTitleContainer = this.tabTitleContainerEl;
       const containerBounds = tabTitleContainer.getBoundingClientRect();
@@ -487,7 +486,7 @@ export class TabNav implements LocalizedComponent, T9nComponent {
   }
 
   private scrollToTabTitles = (direction: "forward" | "backward"): void => {
-    readTask(() => {
+    requestAnimationFrame(() => {
       const tabTitleContainer = this.tabTitleContainerEl;
       const containerBounds = tabTitleContainer.getBoundingClientRect();
       const tabTitles = Array.from(this.el.querySelectorAll("calcite-tab-title"));

diff --git a/packages/calcite-components/src/utils/openCloseComponent.spec.ts b/packages/calcite-components/src/utils/openCloseComponent.spec.ts
@@ -9,7 +9,10 @@ describe("openCloseComponent", () => {
     let dispatchTransitionEvent: TransitionEventDispatcher;
 
     beforeEach(() => {
-      jest.spyOn(openCloseComponent, "internalReadTask").mockImplementation((task) => task(1337));
+      jest.spyOn(global, "requestAnimationFrame").mockImplementation((cb) => {
+        cb(0);
+        return 0;
+      });
       dispatchTransitionEvent = createTransitionEventDispatcher();
     });
 

diff --git a/packages/calcite-components/src/utils/openCloseComponent.ts b/packages/calcite-components/src/utils/openCloseComponent.ts
@@ -1,11 +1,5 @@
-import { readTask } from "@stencil/core";
 import { whenTransitionDone } from "./dom";
 
-/**
- * Exported for testing purposes only
- */
-export const internalReadTask = readTask;
-
 /**
  * Defines interface for components with open/close public emitter.
  * All implementations of this interface must handle the following events: `beforeOpen`, `open`, `beforeClose`, `close`.
@@ -86,7 +80,7 @@ function isOpen(component: OpenCloseComponent): boolean {
  * @param component - OpenCloseComponent uses `open` prop to emit (before)open/close.
  */
 export function onToggleOpenCloseComponent(component: OpenCloseComponent): void {
-  internalReadTask((): void => {
+  requestAnimationFrame((): void => {
     if (!component.transitionEl) {
       return;
     }