[Glitch] Fix icon buttons animating when they haven't changed

Port b53ee04475 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
diondiondion
2025-11-11 12:10:27 +01:00
committed by Claire
parent e265c6bd4c
commit fdfbc63199

View File

@@ -2,6 +2,8 @@ import { useCallback, forwardRef } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { usePrevious } from '../hooks/usePrevious';
import { AnimatedNumber } from './animated_number'; import { AnimatedNumber } from './animated_number';
import type { IconProp } from './icon'; import type { IconProp } from './icon';
import { Icon } from './icon'; import { Icon } from './icon';
@@ -95,12 +97,15 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(
...(active ? activeStyle : {}), ...(active ? activeStyle : {}),
}; };
const previousActive = usePrevious(active) ?? active;
const shouldAnimate = animate && active !== previousActive;
const classes = classNames(className, 'icon-button', { const classes = classNames(className, 'icon-button', {
active, active,
disabled, disabled,
inverted, inverted,
activate: animate && active, activate: shouldAnimate && active,
deactivate: animate && !active, deactivate: shouldAnimate && !active,
overlayed: overlay, overlayed: overlay,
'icon-button--with-counter': typeof counter !== 'undefined', 'icon-button--with-counter': typeof counter !== 'undefined',
}); });