maintain (loader): react upgrade to the loader component

client/components/animation.js

@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from "react";
+
+/**
+ * Back when I started this project, there used to be a library for animation made by facebook
+ * named: react-addons-css-transition-group
+ * Facebook got away from it and things haven't stayed backward compatible at the point where I got
+ * to realise it would be easier to write this simpler wrapper than migrate things over
+ */
+export function CSSTransition({ transitionName = "animate", children = null, transitionAppearTimeout = 300 }) {
+    const [child, setChildren] = useState(React.cloneElement(children, {
+        className: `${children.props.className} ${transitionName}-appear`
+    }));
+
+    useEffect(() => {
+        setChildren(React.cloneElement(child, {
+            className: `${children.props.className} ${transitionName}-appear ${transitionName}-appear-active`
+        }))
+        const timeout = setTimeout(() => {
+            setChildren(React.cloneElement(child, {
+                className: `${children.props.className}`
+            }))
+        }, transitionAppearTimeout);
+
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, []);
+
+    return child;
+}

client/components/loader.js

@@ -1,10 +1,10 @@
 import React from "react";
-import ReactCSSTransitionGroup from "react-addons-css-transition-group";
+import { CSSTransition } from "./animation";
 import "./loader.scss";
 
 export const Loader = () => {
     return (
-        <ReactCSSTransitionGroup transitionName="loader" transitionLeave={false} transitionEnter={false} transitionAppear={true} transitionAppearTimeout={400}>
+        <CSSTransition transitionName="loader" transitionAppearTimeout={700}>
           <div className="component_loader">
             <svg width="120px" height="120px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
               <rect x="0" y="0" width="100" height="100" fill="none"></rect>
@@ -15,6 +15,6 @@ export const Loader = () => {
               </circle>
             </svg>
           </div>
-        </ReactCSSTransitionGroup>
+        </CSSTransition>
     );
 };

client/components/loader.scss

@@ -7,7 +7,7 @@
     opacity: 0;
 }
 .loader-appear.loader-appear-active{
-    transition: opacity 0.1s ease-out;
-    transition-delay: 0.3s;
+    transition: opacity 0.2s ease-out;
+    transition-delay: 0.5s;
     opacity: 1;
 }