OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

Improve SpeciesFacesPicker render performance

Browse source 
The Tooltip elements seem to still be taking a bit, I don't really know a great workaround for that… could maybe split it out into a separate box and defer the rendering on it, so it doesn't block the first pageload?
This commit is contained in:
Emi Matchu 2021-02-02 16:56:26 -08:00
parent 6549bba756
commit bccb36dda2
1 changed files with 27 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/app/ItemPage.js
View file

@ -891,6 +891,8 @@ function SpeciesFaceOption({
const cursor = isLoading ? "wait" : !isCompatible ? "not-allowed" : "pointer"; const cursor = isLoading ? "wait" : !isCompatible ? "not-allowed" : "pointer";
// NOTE: Because we render quite a few of these, avoiding using Chakra
// elements like Box helps with render performance!
return ( return (
<ClassNames> <ClassNames>
{({ css }) => ( {({ css }) => (
@ -904,14 +906,12 @@ function SpeciesFaceOption({
// but not when you _change_ options!) // but not when you _change_ options!)
isOpen={labelIsHovered || inputIsFocused} isOpen={labelIsHovered || inputIsFocused}
> >
<Box <label
as="label" style={{ cursor }}
cursor={cursor}
onMouseEnter={() => setLabelIsHovered(true)} onMouseEnter={() => setLabelIsHovered(true)}
onMouseLeave={() => setLabelIsHovered(false)} onMouseLeave={() => setLabelIsHovered(false)}
> >
<VisuallyHidden <input
as="input"
type="radio" type="radio"
aria-label={speciesName} aria-label={speciesName}
name="species-faces-picker" name="species-faces-picker"
@ -924,12 +924,25 @@ function SpeciesFaceOption({
onChange={() => onChange({ speciesId, colorId })} onChange={() => onChange({ speciesId, colorId })}
onFocus={() => setInputIsFocused(true)} onFocus={() => setInputIsFocused(true)}
onBlur={() => setInputIsFocused(false)} onBlur={() => setInputIsFocused(false)}
/>
<Box
overflow="hidden"
transition="all 0.2s"
position="relative"
className={css` className={css`
/* Copied from Chakra's <VisuallyHidden /> */
border: 0px;
clip: rect(0px, 0px, 0px, 0px);
height: 1px;
width: 1px;
margin: -1px;
padding: 0px;
overflow: hidden;
white-space: nowrap;
position: absolute;
`}
/>
<div
className={css`
overflow: hidden;
transition: all 0.2s;
position: relative;
input:checked + & { input:checked + & {
background: ${selectedBackgroundColorValue}; background: ${selectedBackgroundColorValue};
border-radius: 6px; border-radius: 6px;
@ -945,8 +958,7 @@ function SpeciesFaceOption({
} }
`} `}
> >
<Box <img
as="img"
src={`https://pets.neopets-asset-proxy.openneo.net/cp/${neopetsImageHash}/${emotionId}/1.png`} src={`https://pets.neopets-asset-proxy.openneo.net/cp/${neopetsImageHash}/${emotionId}/1.png`}
srcSet={ srcSet={
`https://pets.neopets-asset-proxy.openneo.net/cp/${neopetsImageHash}/${emotionId}/1.png 1x, ` + `https://pets.neopets-asset-proxy.openneo.net/cp/${neopetsImageHash}/${emotionId}/1.png 1x, ` +
@ -956,10 +968,10 @@ function SpeciesFaceOption({
width={50} width={50}
height={50} height={50}
data-is-compatible={isCompatible} data-is-compatible={isCompatible}
transition="all 0.2s"
className={css` className={css`
filter: saturate(90%); filter: saturate(90%);
opacity: 0.9; opacity: 0.9;
transition: all 0.2s;
&[data-is-compatible="false"] { &[data-is-compatible="false"] {
filter: saturate(0%); filter: saturate(0%);
@ -987,8 +999,8 @@ function SpeciesFaceOption({
} }
`} `}
/> />
</Box> </div>
</Box> </label>
</Tooltip> </Tooltip>
)} )}
</ClassNames> </ClassNames>