Input lag when styling global classes

I’m not sure exactly when this started happening, but I’ve noticed a considerable input lag when typing a value with a global class selected.

Here’s an example of me pressing backspace and then typing a number:

When styling the block, it works perfectly. But when styling the global class, it doesn’t register me clicking backspace in time, and just continues to add on the numbers.

1 Like

I noticed that too.
But it’s not exclusive to global classes for me.

Tried different browsers because my main browser regularly has performance issues.
I can’t type in values fluently because of that.

For instance, I want to enter 3rem as a value.
Typing it fast is almost impossible. The result will be something like 3em, 3m, etc.

1 Like

Hello @sunny and @Marius,

Thanks for the report.
I’m sorry to see you’re experiencing this and can understand it can be frustrating.

I’m able to reproduce this when throttling my CPU x6 :cold_face:

We’ll have a fix for this in the next update.

2 Likes

Yeah, same here. Entering a decimal usually doesn’t work either unless I wait a second.

That’s strange. It happens to me on both Chrome and Firefox, and CPU load is less than <10% on my M1 Max.

Hi @sunny,

Thanks for the details.
Then there might be something else at play here…

If you have a moment, can you try on this blank installation and see if you still have the same issue?
https://app.instawp.io/wordpress-auto-login?site=$2y$10$5DDF8NVKtufPxexKMinvEe36JUX3WnyjMzYqE.bajkhMUl9.8Y6jq

Thanks!

Hey @Louis,

Just played around with it for a minute. On a fresh install, it works quickly.

I tried adding my external and global classes, and it still worked fine.

Then I added elements to the page (just a template from the Cwicly library), and the lag returned.

Try editing the styling for a class on Log In ‹ cwiclydemo — WordPress.

This is the div I was testing on:

1 Like

I can confirm this.
Added a template (Courbes) where the lag was present then.
Then deleted everything but a section with a heading and no issues anymore on the same block I tested before.

Feedback from a Windows user with ~2% CPU load.
Tested in Edge, Chrome, Firefox.

1 Like

Thanks, @sunny.

Really appreciate you setting all this up.

Unfortunately, no lag on my side and we did test multiple setups/pages and can’t reproduce it (please excuse the enthusiastic keyboard percussion):

I’ll add a small enhancement in the next update which will hopefully fix things on your side and @Marius’.

1 Like

@Louis no problem!

It works perfectly for me for block styling as well. Can you try it with a global class selected?

Thanks for pointing that out, @sunny!

Could you try and refresh the cache when on the editor and see if you experience a difference?

Thanks!

1 Like

This is 99.9% better now!

Maybe in extreme testing you can notice a millisecond lag every so often, but it looks like still registers the click anyways.

And in normal use, probably wouldn’t notice it :slight_smile:

Hey @Louis .

I have the strong feeling that it’s related to the logic which picks up the unit which is then displayed at the end of the input field.
For instance, I can enter a value of 3 and then wait a moment. So far so good. The issue occurs when the logic tries to find out which unit I’m about to type in.

When I enter, as an example, 3hhh (so the logic knows there is no natively supported unit to pick up), I can go wild on my keyboard without any issue.
Same goes for when the desired unit already has been entered or is the default one, so only digits are typed in.

Looking forward to it. Thanks again :muscle:

Hello @sunny,

This should be improved in 1.2.9.5.8.1. Thanks for bringing this issue up and taking the time to help us get to the bottom of the exact problem.

Thanks for sharing your thoughts, @Marius.

The logic is pretty simple, and isn’t at fault here as much as the controlled components we have to use to set the value to the Redux store (the value isn’t just set through the input, but can be changed through number scrubbing but also direct store modification).

This is interesting because the function is continuously checking for a possible unit even if you have selected a unit.

While I was able to reproduce this on the global class example provided by @sunny, I could not get a single lag when editing block properties.

2 Likes

Thanks for all the insights @Louis - very interesting.

The lag basically kicked in when starting to type in a potential unit (first letter matches a unit inside the dropdown).
At least that’s my impression.

However, with the latest update it’s running buttery smooth - it’s a total different experience. Can’t confirm though that it’s related to the actual update, especially as you are mentioning that nothing has changed in that regard, if I got you right.

It might have other causes (like OS, etc.), but want to add that I tested things on different devices, different browsers, and on different server environments - however same OS.

If I run into it again, I’ll update with a screencast, so you get a better idea what’s happening on my side.