⚡ Bolt: Throttle rapid scroll events for improved rendering performance #114
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,6 +3,17 @@ import { fireEvent, render, screen } from "@testing-library/react"; | |
| import React from "react"; | ||
| import type { EditionNavigation } from "@/config/editions/types"; | ||
|
|
||
| beforeAll(() => { | ||
| jest.spyOn(window, "requestAnimationFrame").mockImplementation((cb) => { | ||
| cb(0); | ||
| return 0; | ||
| }); | ||
| }); | ||
|
|
||
| afterAll(() => { | ||
| (window.requestAnimationFrame as jest.Mock).mockRestore(); | ||
| }); | ||
|
Comment on lines
+6
to
+15
Contributor
There was a problem hiding this comment. 🧩 Analysis chain🌐 Web query:
💡 Result: The browser window.requestAnimationFrame method has the signature requestAnimationFrame(callback), where callback is a function that receives a single argument: a DOMHighResTimeStamp (a double representing milliseconds since the time origin, with sub-millisecond precision). It returns an unsigned long (request ID) used to identify the callback for cancellation via cancelAnimationFrame. The callback is invoked asynchronously, before the browser's next repaint (typically at the display's refresh rate, e.g., 60Hz), during the "update the rendering" steps of the event loop processing model. It is not a microtask or macrotask but a special animation frame callback executed after microtasks and before rendering. Citations:
Make the The mock invokes the callback synchronously and returns
This mismatch can hide timing and ordering bugs in the throttling logic that would manifest in real browser behavior. 🤖 Prompt for AI Agents |
||
|
|
||
| jest.mock("@/components/layout/header/Header8", () => ({ | ||
| __esModule: true, | ||
| default: ({ scroll, isSearch, handleSearch }: { scroll: boolean; isSearch: boolean; handleSearch: () => void }) => ( | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,6 +2,17 @@ import { beforeEach, describe, expect, it, jest } from "@jest/globals"; | |
| import { fireEvent, render, screen } from "@testing-library/react"; | ||
| import React from "react"; | ||
|
|
||
| beforeAll(() => { | ||
| jest.spyOn(window, "requestAnimationFrame").mockImplementation((cb) => { | ||
| cb(0); | ||
| return 0; | ||
| }); | ||
| }); | ||
|
|
||
| afterAll(() => { | ||
| (window.requestAnimationFrame as jest.Mock).mockRestore(); | ||
| }); | ||
|
Comment on lines
+5
to
+14
Contributor
There was a problem hiding this comment. The mock for
Comment on lines
+5
to
+14
Contributor
There was a problem hiding this comment. 🧩 Analysis chain🌐 Web query:
💡 Result: The browser window.requestAnimationFrame method has the signature requestAnimationFrame(callback), where callback is a function that receives a single argument: a DOMHighResTimeStamp (a double representing milliseconds since the time origin, with at least 1ms precision, similar to performance.now and equal to document.timeline.currentTime for Window contexts). It returns an unsigned long (or long) integer request ID, which uniquely identifies the callback entry and can be passed to window.cancelAnimationFrame to cancel it. The ID is typically a per-window incrementing counter but do not make assumptions about its exact value (it may overflow). The callback is invoked asynchronously, before the browser's next repaint (synchronized to the display's refresh rate, e.g., ~60Hz), typically as part of the rendering pipeline after layout but before paint. It is queued and executed asynchronously relative to the call to requestAnimationFrame, paused in background tabs, and one-shot (must be called again in the callback for continuous animation). Citations:
Use a browser-compatible The callback must receive a 🤖 Prompt for AI Agents |
||
|
|
||
| const aosInit = jest.fn(); | ||
|
|
||
| const createHeaderMock = (id: number) => { | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The mock for
requestAnimationFrameshould return a numeric ID to allow testing of the cancellation logic. The current implementation returnsundefined, which causes theif (state.frameId)check in the component's cleanup effect to always be false, leaving thecancelAnimationFramecall untested. This suggestion updates the mock to return a dummy ID and also mockscancelAnimationFramefor completeness.