diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js
index cf63cd407..4f87a42c8 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js
@@ -162,11 +162,15 @@ const AlertGroup = ({
 
   const mountRef = useRef(null);
 
+  const [fadeDone, setFadeDone] = useState(false);
+
   return useObserver(() => (
     <div
       ref={mountRef}
       className={`components-grid-alertgrid-alertgroup ${
-        mountRef.current ? "components-animation-fade-appear-done" : ""
+        mountRef.current && fadeDone
+          ? "components-animation-fade-appear-done"
+          : ""
       }`}
       style={{
         width: groupWidth,
@@ -180,6 +184,7 @@ const AlertGroup = ({
         in={context.animations.in}
         duration={context.animations.duration}
         wait={context.animations.duration}
+        onReveal={() => setFadeDone(true)}
       >
         <div
           className={`card ${cardBackgroundClass}`}
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js
index 5b9b9259c..05f7ecaea 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js
@@ -111,6 +111,8 @@ describe("<AlertGroup />", () => {
         .hasClass("components-animation-fade-appear-done")
     ).toBe(false);
     tree.setProps({});
+    act(() => tree.find("RevealBase").at(0).props().onReveal());
+    tree.update();
     expect(
       tree
         .find("div.components-grid-alertgrid-alertgroup")