From 6bf97ec1fddca528e7ddd0502e72a5f3f033a8dc Mon Sep 17 00:00:00 2001
From: Alex Recuenco <26118630+alexrecuenco@users.noreply.github.com>
Date: Thu, 16 Apr 2026 16:22:12 +0200
Subject: [PATCH] refactor: Move NodeUpdateAnimation to functional from classes
 (#27382)

Signed-off-by: alexrecuenco <26118630+alexrecuenco@users.noreply.github.com>
---
 .../node-update-animation.tsx                 | 29 +++++++++----------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/ui/src/app/applications/components/application-resource-tree/node-update-animation.tsx b/ui/src/app/applications/components/application-resource-tree/node-update-animation.tsx
index 6e868c3072..26dd293b62 100644
--- a/ui/src/app/applications/components/application-resource-tree/node-update-animation.tsx
+++ b/ui/src/app/applications/components/application-resource-tree/node-update-animation.tsx
@@ -1,18 +1,17 @@
 import * as React from 'react';
 
-export class NodeUpdateAnimation extends React.PureComponent<{resourceVersion: string}, {ready: boolean}> {
-    constructor(props: {resourceVersion: string}) {
-        super(props);
-        this.state = {ready: false};
-    }
+/**
+ * When the resource version changes, we want to trigger an animation to indicate that the resource has been updated. This component will be rendered as a child of the node and will update itself when the resource version changes leading to a re-render, which triggers the animation.
+ * @param props Resource version
+ * @returns
+ */
+export const NodeUpdateAnimation = (props: {resourceVersion: string}) => {
+    const [animate, setAnimation] = React.useState(false);
+    React.useEffect(() => {
+        return () => {
+            setAnimation(true);
+        };
+    }, [props.resourceVersion]);
 
-    public render() {
-        return this.state.ready && <div key={this.props.resourceVersion} className='application-resource-tree__node-animation' />;
-    }
-
-    public componentDidUpdate(prevProps: {resourceVersion: string}) {
-        if (prevProps.resourceVersion && this.props.resourceVersion !== prevProps.resourceVersion) {
-            this.setState({ready: true});
-        }
-    }
-}
+    return animate && <div key={props.resourceVersion} className='application-resource-tree__node-animation' />;
+};