From e94f66f8815866347e29967a866de7e9785cc1f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sat, 4 May 2019 12:57:40 +0100
Subject: [PATCH] feat(ui): speed up animations with translateZ and translate3d

---
 ui/src/Components/Animations/DropdownSlide/index.css |  5 +++++
 ui/src/Components/Animations/MountFade/index.css     |  7 ++++++-
 ui/src/Components/Animations/MountModal/index.scss   |  5 +++++
 ui/src/Components/Animations/NavBarSlide/index.css   |  5 +++++
 ui/src/Components/Grid/AlertGrid/AlertGroup/index.js | 11 +++++++----
 ui/src/Components/Grid/AlertGrid/index.css           |  9 ++++++---
 ui/src/Components/Grid/AlertGrid/index.js            |  1 +
 7 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/ui/src/Components/Animations/DropdownSlide/index.css b/ui/src/Components/Animations/DropdownSlide/index.css
index 26c42a5d7..7a9c64032 100644
--- a/ui/src/Components/Animations/DropdownSlide/index.css
+++ b/ui/src/Components/Animations/DropdownSlide/index.css
@@ -1,3 +1,8 @@
+.components-animation-slide {
+  will-change: opacity, height;
+  transform: translateZ(0);
+}
+
 .components-animation-slide-enter,
 .components-animation-slide-appear {
   opacity: 0.25;
diff --git a/ui/src/Components/Animations/MountFade/index.css b/ui/src/Components/Animations/MountFade/index.css
index ae5a758ab..079c6c290 100644
--- a/ui/src/Components/Animations/MountFade/index.css
+++ b/ui/src/Components/Animations/MountFade/index.css
@@ -1,7 +1,12 @@
+.components-animation-fade {
+  will-change: opacity;
+  transform: translateZ(0);
+}
+
 .components-animation-fade-appear {
   opacity: 0.01;
 }
 .components-animation-fade-appear-active {
   opacity: 1;
-  transition: all 0.3s ease-in;
+  transition: opacity 0.3s ease-in;
 }
diff --git a/ui/src/Components/Animations/MountModal/index.scss b/ui/src/Components/Animations/MountModal/index.scss
index fa9c40525..1187115b3 100644
--- a/ui/src/Components/Animations/MountModal/index.scss
+++ b/ui/src/Components/Animations/MountModal/index.scss
@@ -3,6 +3,11 @@
 
 $duration: 0.2s;
 
+.components-animation-modal {
+  will-change: opacity, transform;
+  transform: translateZ(0);
+}
+
 .components-animation-modal-appear,
 .components-animation-modal-enter {
   opacity: 0.01;
diff --git a/ui/src/Components/Animations/NavBarSlide/index.css b/ui/src/Components/Animations/NavBarSlide/index.css
index 3f97215e9..36173329f 100644
--- a/ui/src/Components/Animations/NavBarSlide/index.css
+++ b/ui/src/Components/Animations/NavBarSlide/index.css
@@ -1,3 +1,8 @@
+.components-animation-navbar {
+  will-change: opacity;
+  transform: translateZ(0);
+}
+
 .components-animation-navbar-appear,
 .components-animation-navbar-enter {
   opacity: 0.01;
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js
index f7f425d7b..e952ec5ca 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js
@@ -195,8 +195,11 @@ const AlertGroup = observer(
       }
 
       return (
-        <div className="components-grid-alertgrid-alertgroup p-1" style={style}>
-          <MountFade in={true}>
+        <MountFade in={true}>
+          <div
+            className="components-grid-alertgrid-alertgroup p-1"
+            style={style}
+          >
             <div className={`card ${cardBackgroundClass}`}>
               <GroupHeader
                 collapseStore={this.collapse}
@@ -258,8 +261,8 @@ const AlertGroup = observer(
                 />
               ) : null}
             </div>
-          </MountFade>
-        </div>
+          </div>
+        </MountFade>
       );
     }
   }
diff --git a/ui/src/Components/Grid/AlertGrid/index.css b/ui/src/Components/Grid/AlertGrid/index.css
index 3f4667fad..756dd044b 100644
--- a/ui/src/Components/Grid/AlertGrid/index.css
+++ b/ui/src/Components/Grid/AlertGrid/index.css
@@ -1,5 +1,8 @@
-.components-grid-alertgrid-alertgroup {
-  transition-property: top, left;
-  transition-duration: 0.3s;
+.components-grid-alertgrid-alertgroup.components-animation-fade-appear-done {
+  will-change: transform;
+  transform: translateZ(0);
+
+  transition-property: transform;
+  transition-duration: 0.4s;
   transition-timing-function: ease;
 }
diff --git a/ui/src/Components/Grid/AlertGrid/index.js b/ui/src/Components/Grid/AlertGrid/index.js
index 8cb15912d..0c1a6ab3a 100644
--- a/ui/src/Components/Grid/AlertGrid/index.js
+++ b/ui/src/Components/Grid/AlertGrid/index.js
@@ -215,6 +215,7 @@ const AlertGrid = observer(
           <MasonryInfiniteScroller
             key={settingsStore.gridConfig.config.groupWidth}
             ref={this.storeMasonryRef}
+            position={false}
             pack={true}
             sizes={this.viewport.gridSizesConfig}
             loadMore={this.loadMore}