Web-stories-wp: Investigate: potential lag when changing field values in the Design Panel

[miina]

Bug Description

There seems to be a lag when changing numbers in the field value. This needs confirmation / investigation to understand if it happens locally for some people or is a real issue.

Expected Behaviour

Keyboard events (such as typing into a field) should happen without a lag.

Steps to Reproduce

1. Add a Text block and select it
2. Change the rotation value in the design panel
3. Notice how the value changes in the field with a lag compared to typing.

Screenshots

---

_Do not alter or remove anything below. The following sections will be managed by moderators only._

Acceptance Criteria

QA Instructions

[swissspidy]

I wonder if it has to do with the onBlur thing (#432)

[miina]

Not sure, but currently it seems to be happening without having to invoke onBlur at all, just typing is lagging within the fields.

[obetomuniz]

@miina @swissspidy After some investigation on it, it looks like a generalized problem with expensive operations when using onSetProperties method https://github.com/google/web-stories-wp/blob/master/assets/src/edit-story/components/panels/sizePosition.js#L82-L109. Also, it is not only happening with the rotate input but any input that requires instant feedback while typing on the canvas across the plugin. For the positioning/rotating problem, I was able to manage the problem adding some debouncing (see the code below), which in the end reduces expensive renders only applying it when the user stops to type for a few moments. Can you pls share some thoughts before I opening a PR in the way proposed below?

  useEffect(() => {
    const handler = setTimeout(() => updateProperties(), 300);

    return () => clearTimeout(handler);
  }, [state.isFill, updateProperties]);

In order to review the results of that code on UI:

[dvoytenko]

Is enter supported to update props at this time?

[obetomuniz]

Yeap @dvoytenko

[miina]

@obetomuniz Yep, it's definitely happening with various fields and is quite annoying, please do create a PR.

[obetomuniz]

Sure! I will. Also, I will try to check beyond Size&Position Panel. Thanks 🙏

[miina]

Closing since this got resolved in #621, the visible lag is gone.