Unthrottled mousemove causes performance issues when resizing dialogs

[Sidharthwin]

Description

Resizing dialogs (such as the JS Editor and other resizable widgets) currently relies on a mousemove event listener that directly executes resize logic:

document.addEventListener("mousemove", doResize);
This occurs in:

• js/widgets/jseditor.js (around line 808)
• js/utils/mb-dialog.js (around line 258)

---

Current Behavior

• The doResize function runs on every mousemove event
• This can trigger hundreds of executions per second
• Each execution updates DOM dimensions (width/height)

---

Expected Behavior

Resize operations should be smoother and more efficient, avoiding excessive DOM updates and layout recalculations.

---

Problem

The resize logic is not throttled or synchronized with the browser’s rendering cycle. Running DOM updates directly inside the mousemove handler leads to unnecessary work and degraded performance.

---

Proposed Solution (Optional)

• Wrap the resize logic inside a requestAnimationFrame loop
• Batch DOM updates to align with the browser’s repaint cycle
• Similar optimizations are already applied to block drag operations and could be reused here

---

Environment

• Device type: Desktop (more noticeable on large screens)
• Browser (if applicable): Chrome

---

Checklist

• I have read and followed the project's code of conduct.
• I have searched for similar issues before creating this one.
• I have provided enough information to understand and assess the issue.
• I am willing to contribute to the resolution of this issue.

---