Open CarlosBalladares opened 2 years ago
@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
Debouncing the update seems like a great idea @aashutoshrathi! Would be a happy to review a PR for this
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
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?
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
was the website taken down?
Looking into the deploy issue now @CarlosBalladares Should be working now 👍
But the catch it, it slows down when we open one of Scales
Hmm, any idea why?
Inspecting the Scales component, since that's the part causing lag. I will push a patch, if as soon as I find a reason
@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
Describe the bug Whenever you try to select a bg color the palette page lags,
To Reproduce Steps to reproduce the behavior:
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