From b53ee04475bc1653a83a8a33ceab2879331b84e3 Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Tue, 11 Nov 2025 12:10:27 +0100
Subject: [PATCH] Fix icon buttons animating when they haven't changed (#36824)

---
 app/javascript/mastodon/components/icon_button.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/javascript/mastodon/components/icon_button.tsx b/app/javascript/mastodon/components/icon_button.tsx
index de9cbc19bb..9f64a257f0 100644
--- a/app/javascript/mastodon/components/icon_button.tsx
+++ b/app/javascript/mastodon/components/icon_button.tsx
@@ -2,6 +2,8 @@ import { useCallback, forwardRef } from 'react';
 
 import classNames from 'classnames';
 
+import { usePrevious } from '../hooks/usePrevious';
+
 import { AnimatedNumber } from './animated_number';
 import type { IconProp } from './icon';
 import { Icon } from './icon';
@@ -91,12 +93,15 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(
       ...(active ? activeStyle : {}),
     };
 
+    const previousActive = usePrevious(active) ?? active;
+    const shouldAnimate = animate && active !== previousActive;
+
     const classes = classNames(className, 'icon-button', {
       active,
       disabled,
       inverted,
-      activate: animate && active,
-      deactivate: animate && !active,
+      activate: shouldAnimate && active,
+      deactivate: shouldAnimate && !active,
       overlayed: overlay,
       'icon-button--with-counter': typeof counter !== 'undefined',
     });