From cd31838887dbd5c7829161aadc9f949fca8daf47 Mon Sep 17 00:00:00 2001
From: jeffgreiner-eaton <jeffvgreiner@eaton.com>
Date: Thu, 22 Feb 2024 13:27:37 -0500
Subject: [PATCH] appbar out of sync check animating is finished

---
 components/src/core/AppBar/AppBar.tsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/components/src/core/AppBar/AppBar.tsx b/components/src/core/AppBar/AppBar.tsx
index e50a70564..e1e997213 100644
--- a/components/src/core/AppBar/AppBar.tsx
+++ b/components/src/core/AppBar/AppBar.tsx
@@ -161,15 +161,16 @@ const AppBarRender: React.ForwardRefRenderFunction<unknown, AppBarProps> = (prop
     const previousExpandedHeight = usePrevious(expandedHeight);
     const [scrolling, setScrolling] = useState(false);
     const [animating, setAnimating] = useState(false);
+    const previousAnimating = usePrevious(animating);
     const [endScrollHandled, setEndScrollHandled] = useState(false);
     const [height, setHeight] = useState(
         variant === 'collapsed'
             ? collapsedHeight
             : variant === 'expanded'
-            ? expandedHeight
-            : scrollTop > scrollThreshold
-            ? collapsedHeight
-            : expandedHeight
+                ? expandedHeight
+                : scrollTop > scrollThreshold
+                    ? collapsedHeight
+                    : expandedHeight
     );
     const isExpanded = height === expandedHeight;
 
@@ -267,7 +268,15 @@ const AppBarRender: React.ForwardRefRenderFunction<unknown, AppBarProps> = (prop
             setOffset(scrollTop);
             setEndScrollHandled(true);
         }
-    }, [scrolling, animating, offset, endScrollHandled]);
+    }, [scrolling, offset, endScrollHandled]);
+
+    // listen for animating to finish and update scroll position
+    useEffect(() => {
+        if (previousAnimating && !animating) {
+            setEndScrollHandled(false);
+            handleScroll();
+        }
+    }, [previousAnimating, animating, handleScroll]);
 
     // This function listens for scroll events on the window and sets the scrolling variable to true
     useEffect(() => {