Calling dmx.parse blocks user interactions

Wappler General Need Help
1

Hi everyone,

I'm building a collaborative canvas tool using Fabric.js and Wappler. I'm currently facing a frustrating issue where the UI (specifically the Fabric canvas) freezes during a socket-based dmx.parse() request triggered on window resize.

Here’s the context:

  • When the user resizes the browser window, I trigger a resize function.
  • Inside that function, I update an html element size and then send the new state using:
dmx.parse(`content.resizeReq.request('resize', { data: ${JSON.stringify(resize_data)}, boid: '${dmx.app.data.query.boid}' })`)
  .then((result) => {
    // handle response...
  });
  • However, during the period before the socket response is received, the web page elements like buttons becomes unresponsive — users can't click, select, or interact smoothly. Once the response comes back, everything becomes smooth again.

What I've tried:

  • I have tested it with socket.io outside wappler with .emit method and it works fine.

Question:

  • Has anyone experienced similar UI blocking issues when using dmx.parse() for .request() calls?
    Thanks in advance for any insights!
2

Hi,

Try running dmx.parse in the browser console and see if it hangs

If it doesn't hang, it's a problem within the way you architected your code (needing a reply back to proceed) and requires you to share the full code so one can attempt to spot possible hang reasons. I'm not familiar with Fabric though

1 Like
3

I may be wrong here but perhaps the parse() is awaiting a promise which would lead to a pause?

1 Like
4

Thanks everyone for replying.
I figured out that only when I use JSON.stringify inside dmx.parse(), a 'ping timeout' socket disconnection happens. The .stringify method itself doesn't cause the issue. Using it(or passing its results) to the request/emit method inside dmx.parse() is causing the disconnection and the blocking. I don't know why. I hope that @patrick will give some insights..