Multiple image requests on Edit on mouse move / slate type

[avoinea]

Describe the bug
If you add a page with preview image, save, then edit and open the network debugger you'll see multiple @@images requests to back-end when you move the mouse or type in slate.

To Reproduce
Steps to reproduce the behavior:

1. Login to https://demo.plone.org/
2. Add new Page
3. Upload preview image or lead image
4. Save
5. Edit
6. Open the network debugger
7. Move mouse around the page or type something in title / slate

Screenshots

image-requests.mp4

[DineshPawar7]

( https://demo.plone.org/register not working )

[stevepiercy]

@DineshPawar7 please do not hijack this issue with another. Instead open a new issue.

In this case, user registration is not enabled on the demo site under the Security control panel, and you visited a link that is not displayed publicly.

[DineshPawar7]

@stevepiercy Sorry for this,
but when I try to visit the URL shown in the Video, I am asked to log in. To log in, I need to create an account on the website first. However, there is no option to create an account. So, I tried adding /register to the URL to sign up, but I encountered an error. I wanted to manually verify and test this issue on the website before reporting it here.

[stevepiercy]

@DineshPawar7 on the demo site, look beneath the penguin image, dead center.

[sohan-gupthak]

@avoinea, this change is due to the request URL updating with a different "id" each time the form is updated or focused.

For example:
id=1742282505203
id=1742282506424
id=1742282507540

I couldn't locate the API; could you please provide more information about it?

[sohan-gupthak]

@avoinea

Issue:

1. In the Title component or Form component, every keystroke triggers handleChange.
2. This causes a re-render of the entire form, including the Image component.
3. The Image component generates new URLs for each render:
   "attrs.src = ${flattenToAppURL(basePath)}/${image.download};"

Fix:

Adding debouncing to every component.
For example, I have added debouncing for the Title component:

const debouncedOnChangeField = useMemo(
  () =>
    debounce((title) => {
      onChangeField('title', title);
    }, 300),
  [onChangeField]
);

This means the backend will only be notified of changes after 300ms of no typing, rather than on every keystroke.