ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Custom Emoji: Make color updates faster (#2885)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-03-30 18:25:59 -05:00
parent 0c2e40d8be
commit 3f7471920f
1 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/hooks/useDynamicColorListener.ts
View File

@ -6,8 +6,11 @@ import { getPropertyHexColor } from '../util/themeStyle';
import useResizeObserver from './useResizeObserver'; import useResizeObserver from './useResizeObserver';
import useSyncEffect from './useSyncEffect'; import useSyncEffect from './useSyncEffect';
// Delay required to prevent constant re-rendering on theme change // Transition required to detect `color` property change.
const TRANSITION_STYLE = '0.1s color linear 50ms'; // Duration parameter describes a delay between color change and color state update.
// Small values may cause large amount of re-renders.
const TRANSITION_PROPERTY = 'color';
const TRANSITION_STYLE = `60ms ${TRANSITION_PROPERTY} linear`;
export default function useDynamicColorListener(ref?: React.RefObject<HTMLElement>, isDisabled?: boolean) { export default function useDynamicColorListener(ref?: React.RefObject<HTMLElement>, isDisabled?: boolean) {
const [hexColor, setHexColor] = useState<string | undefined>(); const [hexColor, setHexColor] = useState<string | undefined>();
@ -19,7 +22,7 @@ export default function useDynamicColorListener(ref?: React.RefObject<HTMLElemen
return; return;
} }
const currentHexColor = getPropertyHexColor(getComputedStyle(ref.current), 'color'); const currentHexColor = getPropertyHexColor(getComputedStyle(ref.current), TRANSITION_PROPERTY);
setHexColor(currentHexColor); setHexColor(currentHexColor);
}, [isDisabled, ref]); }, [isDisabled, ref]);
@ -50,7 +53,7 @@ export default function useDynamicColorListener(ref?: React.RefObject<HTMLElemen
} }
function handleTransitionEnd(e: TransitionEvent) { function handleTransitionEnd(e: TransitionEvent) {
if (e.propertyName !== 'color') return; if (e.propertyName !== TRANSITION_PROPERTY) return;
updateColor(); updateColor();
} }