fix row buttons close

src/components/Group/ButtonRow.jsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { FaPalette, FaImages, FaLightbulb } from "react-icons/fa";
 import { MdInvertColors } from "react-icons/md";
-import { motion } from "framer-motion";
+import { motion, AnimatePresence } from "framer-motion";
 
 const ButtonRow = ({
   showContainer,
@@ -20,55 +20,59 @@ const ButtonRow = ({
   };
 
   return (
-    <>
-      {showContainer !== "closed" && (
-        <motion.div
-          className="row buttons"
-          initial="closed"
-          animate={showContainer === "closed" ? "closed" : "opened"}
-          variants={barIconVariants}
-        >
-          {lightsCapabilities.includes("xy") && (
+      <AnimatePresence mode="wait">
+        {showContainer !== "closed" && (
+          <motion.div
+            key="buttons"
+            className="row buttons"
+            initial="closed"
+            animate="opened"
+            exit="closed"
+            variants={barIconVariants}
+            transition={{
+              duration: 0.2,
+            }}
+          >
+            {lightsCapabilities.includes("xy") && (
+              <motion.div
+                className={"btn"}
+                whileHover={{ scale: 1.2 }}
+                whileTap={{ scale: 0.9 }}
+              >
+                <FaPalette onClick={() => setShowContainer("colorPicker")} />
+              </motion.div>
+            )}
+
+            {lightsCapabilities.includes("ct") && (
+              <motion.div
+                className={"btn"}
+                whileHover={{ scale: 1.2 }}
+                whileTap={{ scale: 0.9 }}
+              >
+                <MdInvertColors
+                  onClick={() => setShowContainer("colorTempPicker")}
+                />
+              </motion.div>
+            )}
+
             <motion.div
               className={"btn"}
               whileHover={{ scale: 1.2 }}
               whileTap={{ scale: 0.9 }}
-              variants={barIconVariants}
             >
-              <FaPalette onClick={() => setShowContainer("colorPicker")} />
+              <FaImages onClick={() => setSceneModal(true)} />
             </motion.div>
-          )}
 
-          {lightsCapabilities.includes("ct") && (
             <motion.div
               className={"btn"}
               whileHover={{ scale: 1.2 }}
               whileTap={{ scale: 0.9 }}
             >
-              <MdInvertColors
-                onClick={() => setShowContainer("colorTempPicker")}
-              />
+              <FaLightbulb onClick={() => setShowContainer("lights")} />
             </motion.div>
-          )}
-
-          <motion.div
-            className="btn"
-            whileHover={{ scale: 1.2 }}
-            whileTap={{ scale: 0.9 }}
-          >
-            <FaImages onClick={() => setSceneModal(true)} />
-          </motion.div>
-
-          <motion.div
-            className="btn"
-            whileHover={{ scale: 1.2 }}
-            whileTap={{ scale: 0.9 }}
-          >
-            <FaLightbulb onClick={() => setShowContainer("lights")} />
           </motion.div>
-        </motion.div>
-      )}
-    </>
+        )}
+      </AnimatePresence>
   );
 };