refactor(ui): move animations to a dedicated component

ui/src/Components/Animations/MountFade/index.css

@@ -0,0 +1,23 @@
+.components-animation-fade-appear {
+  opacity: 0.01;
+}
+.components-animation-fade-appear-active {
+  opacity: 1;
+  transition: opacity 0.15s ease-in;
+}
+
+.components-animation-fade-enter {
+  opacity: 0.01;
+}
+.components-animation-fade-enter-active {
+  opacity: 1;
+  transition: opacity 0.15s ease-in;
+}
+
+.components-animation-fade-exit {
+  opacity: 1;
+}
+.components-animation-fade-exit-active {
+  opacity: 0.01;
+  transition: opacity 0.15s ease-in;
+}

ui/src/Components/Animations/MountFade/index.js

@@ -0,0 +1,25 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { CSSTransition } from "react-transition-group";
+
+import "./index.css";
+
+const MountFade = ({ children, duration, ...props }) => (
+  <CSSTransition
+    in={true}
+    classNames="components-animation-fade"
+    timeout={150}
+    appear={true}
+    enter={true}
+    exit={true}
+    {...props}
+  >
+    {children}
+  </CSSTransition>
+);
+MountFade.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+export { MountFade };

ui/src/Components/Grid/AlertGrid/AlertGroup/index.css

@@ -1,26 +0,0 @@
-.components-grid-alertgrid-alertgroup-fade-enter {
-  opacity: 0.01;
-}
-
-.components-grid-alertgrid-alertgroup-fade-enter-active {
-  opacity: 1;
-  transition: opacity 0.4s ease-in;
-}
-
-.components-grid-alertgrid-alertgroup-fade-exit {
-  opacity: 1;
-}
-
-.components-grid-alertgrid-alertgroup-fade-exit-active {
-  opacity: 0.01;
-  transition: opacity 0.4s ease-in;
-}
-
-.components-grid-alertgrid-alertgroup-fade-appear {
-  opacity: 0.01;
-}
-
-.components-grid-alertgrid-alertgroup-fade-appear-active {
-  opacity: 1;
-  transition: opacity 0.4s ease-in;
-}

ui/src/Components/Grid/AlertGrid/AlertGroup/index.js

@@ -6,20 +6,17 @@ import { observable, action, toJS } from "mobx";
 
 import hash from "object-hash";
 
-import { CSSTransition } from "react-transition-group";
-
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPlus } from "@fortawesome/free-solid-svg-icons/faPlus";
 import { faMinus } from "@fortawesome/free-solid-svg-icons/faMinus";
 
+import { MountFade } from "Components/Animations/MountFade";
 import { Settings } from "Stores/Settings";
 import { SilenceFormStore } from "Stores/SilenceFormStore";
 import { GroupHeader } from "./GroupHeader";
 import { Alert } from "./Alert";
 import { GroupFooter } from "./GroupFooter";
 
-import "./index.css";
-
 const LoadButton = ({ icon, action }) => {
   return (
     <button type="button" className="btn btn-sm py-0 bg-white" onClick={action}>
@@ -153,15 +150,7 @@ const AlertGroup = observer(
       }
 
       return (
-        <CSSTransition
-          key={group.id}
-          in={true}
-          classNames="components-grid-alertgrid-alertgroup-fade"
-          timeout={400}
-          appear={true}
-          enter={true}
-          exit={true}
-        >
+        <MountFade>
           <div className="components-grid-alertgrid-alertgroup p-1">
             <div className="card">
               <div
@@ -214,7 +203,7 @@ const AlertGroup = observer(
               ) : null}
             </div>
           </div>
-        </CSSTransition>
+        </MountFade>
       );
     }
   }