Change sending animation, fix rerender, clean-up

*Change sending animation from keyframes to react-spring
*Fix rerender component to display sending animation correctly by wrap component by React.memo
*Remove unnused scss lines, change name of svg component

Author: thecactoos

src/components/Messages/Message/Message.js

@@ -1,39 +1,59 @@
 import React from "react";
 import { useSelector } from "react-redux";
+import { useTransition, animated } from "react-spring";
 
 // Assets
-import { ReactComponent as Plane } from "../../../assets/paper-plane.svg";
+import { ReactComponent as PlaneSVG } from "../../../assets/paper-plane.svg";
+
+// Components
 import UserImg from "../../UserImg/UserImg";
 
 // Style
 import classes from "./Message.module.scss";
 
 function Message({ content, senderId, isSending, avatar }) {
   const userId = useSelector((state) => state.auth.user._id);
+  const transitions = useTransition(isSending, null, {
+    from: {
+      opacity: 0,
+      transform: "translate(-5px, -10px)",
+    },
+    enter: {
+      opacity: 1,
+      width: "15px",
+      transform: "translateX(0px, 0px)",
+    },
+    leave: {
+      width: "0px",
+      transform: "translate(20px, -30px)",
+    },
+    config: {
+      duration: 150,
+    },
+    trail: 1000,
+  });
 
   return (
     <li
       className={`${classes.Message} ${
-        userId === senderId ? classes.MessageSender : null
+        userId === senderId ? classes.MessageSender : ""
       }`}
     >
       {userId !== senderId && <UserImg avatarUrl={avatar} small />}
       <p className={classes.Content}>{content}</p>
-      {isSending && (
-        <div
-          className={`${classes.BoxIcon} ${
-            !isSending && classes.BoxIconAnimate
-          }`}
-        >
-          <Plane
-            className={`${classes.sendingIcon} ${
-              !isSending && classes.sendingIconAnimate
-            }`}
-          />
-        </div>
-      )}
+      {transitions.map(({ item, key, props }) => {
+        return (
+          item && (
+            <animated.div key={key} style={props}>
+              <div className={`${classes.BoxSendingIcon}`}>
+                <PlaneSVG className={`${classes.SendingIcon}`} />
+              </div>
+            </animated.div>
+          )
+        );
+      })}
     </li>
   );
 }
 
-export default Message;
+export default React.memo(Message);

src/components/Messages/Message/Message.module.scss

@@ -4,14 +4,11 @@
   align-items: flex-end;
   margin-bottom: 1rem;
   transition: all 0.3s;
+  overflow: hidden;
 
   &Sender {
     grid-column: 3 / 5;
     justify-self: end;
-
-    & .MessageContent {
-      background-color: green;
-    }
   }
 }
 
@@ -21,62 +18,17 @@
   font-weight: 500;
   border-radius: 1.8rem;
   padding: 0.9rem;
-  // white-space: initial;
   white-space: pre-wrap;
   overflow: hidden;
   word-break: break-all;
 }
 
-.sendingIcon {
-  height: 1.5rem;
-  fill: var(--c-font);
-  position: relative;
-
-  &Animate {
-    animation-duration: 0.6s;
-    animation-name: flyAway;
-  }
-}
-
-.BoxIcon {
+.BoxSendingIcon {
   overflow: hidden;
-
-  &Animate {
-    animation-duration: 0.6s;
-    animation-name: shrink;
-  }
 }
 
-@keyframes flyAway {
-  0% {
-    transform: translate(0, 0);
-  }
-
-  100% {
-    transform: translate(3rem, -3rem);
-  }
-}
-
-@keyframes shrink {
-  0% {
-    width: 1rem;
-    display: auto;
-  }
-
-  100% {
-    width: 0;
-    display: none;
-  }
-}
-
-@keyframes slideIn {
-  0% {
-    opacity: 0;
-    transform: scale(0);
-  }
-
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
+.SendingIcon {
+  height: 1.5rem;
+  fill: var(--c-font);
+  position: relative;
 }