First Component Interaction Is Laggy #3
Description
🐌 First Drag of Node/Component in Builder Page is Laggy
The Problem
We're experiencing a frustrating lag when first dragging a node or component onto the builder page. The initial drag is incredibly choppy, but every subsequent drag of that same component becomes smooth and responsive. This only happens once per component placement.
What We Suspect
This feels like it's likely tied to either how the Interact.js library initializes the very first drag event, or possibly some blocking/continuous IPC calls to the backend, especially around the node:getById endpoint. The lag actually started showing up after some changes involving that specific endpoint.
What We've Looked At
We've dug into the entire flow of that first drag, specifically trying to spot differences between the initial interaction and later, smooth drags. We've also hunted for any expensive operations or unnecessary IPC traffic. So far, we haven't found an obvious culprit—no clear blocking code or significant differences popping out.
How to Reproduce It
- Delete the temp fix code locally: https://github.com/Mech654/VisualBotCreator/blob/main/app/src/js/builder/services/canvasService/canvasInteractions.ts#L88-L120
- Head to the Builder Page.
- Place a component/node onto the canvas.
- Drag the newly placed component. You'll notice the lag.
- Drop the component.
- Drag it again. It'll now be smooth.
Note: To get started you might want to look at 'createNodeInstance' function in the 'nodeService' file
Good News: Temporary Fix in Place!
While the root cause is still elusive, I've implemented a temporary fix that's 100% successful in eliminating this first-drag lag. You can see the solution here: https://github.com/Mech654/VisualBotCreator/blob/main/app/src/js/builder/services/canvasService/canvasInteractions.ts#L88-L120. The issue technically remains open for anyone interested in exploring a more permanent or elegant solution!