Palette page lags when selecting bg color

[CarlosBalladares]

Describe the bug Whenever you try to select a bg color the palette page lags,

To Reproduce Steps to reproduce the behavior:

1. Create a palette
2. go to palette page
3. select background color with input with id 'bg-color', click on the color selection prompt and drag the cursor, see the lag as the values change

Expected behavior Frames should not drop and the ui should not look laggy/choppy

Environment Windows 10 chrome 102

Additional context Reproducible if you run on localhost as well

[aashutoshrathi]

@pouretrebelle The reason for the lag is every component(button, icons, text, etc) changes its hover/bg/text color based on the selection in the color picker for the background. One way to reduce this lag is to debounce the update of color for 500ms

I'll be happy to try to fix it if you are already not working on it.

Views? @colebemis

[colebemis]

Debouncing the update seems like a great idea @aashutoshrathi! Would be a happy to review a PR for this

[aashutoshrathi]

Update on this seems like it is already being debounced (200ms by default in GlobalState setters). The issue is different, I think it is because the style of wrapper div changes on every update, in turn creating a new class. After some time, it basically has more than 200 classes for it. I can try to give it a static className.

Adding the piece of code, I'm talking about. https://github.com/primer/prism/blob/3fd0ea85e77d79b9cb3761f3a015d28924be4273/src/pages/palette.tsx#L19-L34

[colebemis]

Ah, @aashutoshrathi what if we set those variables using inline styles on the Wrapper instead of inside the styled component definition? Like this:

<Wrapper style={{ '--color-text': readableColor(props.backgroundColor), ...}}>

I think this would prevent unnecessary regeneration of classNames. @aashutoshrathi can you check if this improves the performance?

[aashutoshrathi]

Confirming that the performance improves when I declare CSS vars inline. But the catch is, it slows down when we open one of Scales cc: @colebemis

[CarlosBalladares]

was the website taken down?

[colebemis]

Looking into the deploy issue now @CarlosBalladares Should be working now 👍

[colebemis]

But the catch it, it slows down when we open one of Scales

Hmm, any idea why?

[aashutoshrathi]

Inspecting the Scales component, since that's the part causing lag. I will push a patch, if as soon as I find a reason

[aashutoshrathi]

@colebemis, I tried finding the cause of lag in the Scale component, seems like its too big and has many points of failure, but temporarily I would suggest that we atleast make bgColor change faster for the case when the scale is not opened. You can check my branch for that fix over here: https://github.com/primer/prism/pull/50