From b6c8ad070530a86cbfec6d8d7678c68ae99841d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Fri, 3 Apr 2020 14:51:56 +0100
Subject: [PATCH] fix(ui): animate multi-grid swimlane mount

---
 ui/src/Components/Grid/AlertGrid/Grid.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/ui/src/Components/Grid/AlertGrid/Grid.js b/ui/src/Components/Grid/AlertGrid/Grid.js
index 77073d3e8..d332ce7fa 100644
--- a/ui/src/Components/Grid/AlertGrid/Grid.js
+++ b/ui/src/Components/Grid/AlertGrid/Grid.js
@@ -21,6 +21,7 @@ import { APIGrid } from "Models/API";
 import { FilteringLabel } from "Components/Labels/FilteringLabel";
 import { FilteringCounterBadge } from "Components/Labels/FilteringCounterBadge";
 import { TooltipWrapper } from "Components/TooltipWrapper";
+import { MountFade } from "Components/Animations/MountFade";
 import { DefaultDetailsCollapseValue } from "./AlertGroup/DetailsToggle";
 import { AlertGroup } from "./AlertGroup";
 
@@ -163,7 +164,7 @@ const Grid = observer(
 
       return (
         <React.Fragment>
-          {grid.labelName !== "" && (
+          <MountFade in={grid.labelName !== ""} unmountOnExit>
             <h5 className="components-grid-swimlane d-flex flex-row justify-content-between rounded px-2 py-1 mt-2 mb-0 border border-dark">
               <span
                 className="flex-shrink-1 flex-grow-1"
@@ -215,7 +216,7 @@ const Grid = observer(
                 </span>
               </span>
             </h5>
-          )}
+          </MountFade>
           <MasonryInfiniteScroller
             key={settingsStore.gridConfig.config.groupWidth}
             ref={this.storeMasonryRef}