fix(app): stop animating emoji and stickers that have no animation (#1867)

fluxer_app/src/features/emoji/hooks/useStickerAnimation.ts

@@ -6,6 +6,7 @@ import {useState} from 'react';
 interface UseStickerAnimationOptions {
 	respectUserSettings?: boolean;
 	isInteracting?: boolean;
+	isAnimated?: boolean;
 }
 
 interface UseStickerAnimationResult {
@@ -19,11 +20,12 @@ interface UseStickerAnimationResult {
 }
 
 export function useStickerAnimation(options: UseStickerAnimationOptions = {}): UseStickerAnimationResult {
-	const {respectUserSettings = true, isInteracting: isInteractingOverride} = options;
+	const {respectUserSettings = true, isInteracting: isInteractingOverride, isAnimated = true} = options;
 	const [isInteracting, setIsInteracting] = useState(false);
 	const effectiveInteraction = isInteractingOverride ?? isInteracting;
 	const shouldAnimate = useShouldAnimate({
 		kind: 'sticker',
+		isAnimated,
 		isHovering: respectUserSettings ? effectiveInteraction : true,
 		isFocused: respectUserSettings ? effectiveInteraction : true,
 	});

fluxer_app/src/features/expressions/components/modals/EditGuildStickerModal.tsx

@@ -49,7 +49,7 @@ export const EditGuildStickerModal = observer(function EditGuildStickerModal({
 	onUpdate,
 }: EditGuildStickerModalProps) {
 	const {i18n} = useLingui();
-	const {shouldAnimate} = useStickerAnimation();
+	const {shouldAnimate} = useStickerAnimation({isAnimated: sticker.animated});
 	const form = useForm<FormInputs>({
 		defaultValues: {
 			name: sticker.name,
@@ -86,6 +86,7 @@ export const EditGuildStickerModal = observer(function EditGuildStickerModal({
 	const stickerUrl = AvatarUtils.getStickerURL({
 		id: sticker.id,
 		animated: shouldAnimate,
+		isAnimatable: sticker.animated,
 		size: 320,
 	});
 	return (