feat(ui): speed up animations with translateZ and translate3d

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;

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;
 }

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;

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;

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>
       );
     }
   }

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;
 }

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}