Added token transition for when an other user moves a token

src/components/map/MapToken.js

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useRef, useContext } from "react";
 import { Box, Image } from "theme-ui";
 
 import TokenLabel from "../token/TokenLabel";
@@ -7,9 +7,12 @@ import TokenStatus from "../token/TokenStatus";
 import usePreventTouch from "../../helpers/usePreventTouch";
 import useDataSource from "../../helpers/useDataSource";
 
+import AuthContext from "../../contexts/AuthContext";
+
 import { tokenSources } from "../../tokens";
 
 function MapToken({ token, tokenState, tokenSizePercent, className }) {
+  const { userId } = useContext(AuthContext);
   const imageSource = useDataSource(token, tokenSources);
 
   const imageRef = useRef();
@@ -22,6 +25,10 @@ function MapToken({ token, tokenState, tokenSizePercent, className }) {
         transform: `translate(${tokenState.x * 100}%, ${tokenState.y * 100}%)`,
         width: "100%",
         height: "100%",
+        transition:
+          tokenState.lastEditedBy === userId
+            ? "initial"
+            : "transform 0.5s ease",
       }}
       sx={{
         position: "absolute",
@@ -51,6 +58,8 @@ function MapToken({ token, tokenState, tokenSizePercent, className }) {
               userSelect: "none",
               touchAction: "none",
               width: "100%",
+              // Fix image from being clipped when transitioning
+              willChange: "transform",
             }}
             src={imageSource}
             // pass id into the dom element which is then used by the ProxyToken