Patch: removed dependency on framer motion

Author: Akalanka47000

bun.lockb

@@ -64,7 +64,6 @@
     "@reduxjs/toolkit": "2.1.0",
     "class-variance-authority": "0.7.0",
     "d3": "7.8.5",
-    "framer-motion": "10.14.0",
     "lodash": "4.17.21",
     "lucide-react": "0.316.0",
     "react-loader-spinner": "5.3.4",

package.json

@@ -59,8 +59,7 @@ const Controls = ({ options, styles }: IControlProps) => {
         )}
       >
         <AnimatedSwitcher
-          show
-          customKey={ControlComponent.name}
+          key={ControlComponent.name}
           component={<ControlComponent options={options} styles={styles} />}
         />
       </div>

src/components/controls/index.tsx

@@ -1,39 +1,34 @@
-import { LazyMotion, domAnimation, m as motion } from "framer-motion";
+import { useEffect, useState } from "react";
 import { twMerge } from "tailwind-merge";
 
 interface AnimatedSwitcherProps {
-  customKey?: string;
+  key?: string;
   component: React.ReactNode;
-  alternateComponent?: React.ReactNode;
-  show: boolean;
   className?: string;
   style?: React.CSSProperties;
   duration?: number;
 }
 
-const AnimatedSwitcher = ({
-  customKey,
-  component,
-  alternateComponent,
-  show,
-  className,
-  style,
-  duration
-}: AnimatedSwitcherProps) => {
+const AnimatedSwitcher = ({ key, component, className, style, duration = 0.3 }: AnimatedSwitcherProps) => {
+  const [opacity, setOpacity] = useState(0);
+  const [currentComponent, setCurrentComponent] = useState(component);
+
+  useEffect(() => {
+    setOpacity(0);
+    setTimeout(() => {
+      setCurrentComponent(component);
+      setOpacity(1);
+    }, (duration / 2) * 1000);
+  }, [key]);
+
   return (
-    <LazyMotion features={domAnimation}>
-      <motion.div
-        key={customKey ?? (show ? "component" : "alternateComponent")}
-        className={twMerge("w-full h-full", className)}
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: duration ?? 0.3 }}
-        style={style}
-        exit={{ opacity: 0 }}
-      >
-        {show ? component : alternateComponent}
-      </motion.div>
-    </LazyMotion>
+    <div
+      key={key}
+      className={twMerge("w-full h-full", className)}
+      style={{ ...style, transitionDuration: `${duration / 2}s`, opacity }}
+    >
+      {currentComponent}
+    </div>
   );
 };
 

src/components/core/animated-switcher.tsx

@@ -19,15 +19,15 @@ const Footer: React.FC<ISTKProps> = ({ options: { showFooter = true } = {}, ...p
       <span className={twMerge("text-sm", styles?.title?.className)} style={styles?.title?.properties}>
         React Seat Toolkit
       </span>
-      <AnimatedSwitcher
-        show={!!selectedTool}
-        customKey={selectedTool}
-        className={twMerge("absolute top-[0.4rem] left-5 text-xs", styles?.meta?.className)}
-        style={styles?.meta?.properties}
-        component={<span>{tools[selectedTool]?.description}</span>}
-        alternateComponent={null}
-        duration={0.2}
-      />
+      {selectedTool && (
+        <AnimatedSwitcher
+          key={selectedTool}
+          className={twMerge("absolute top-[0.4rem] left-5 text-xs", styles?.meta?.className)}
+          style={styles?.meta?.properties}
+          component={<span>{tools[selectedTool]?.description}</span>}
+          duration={0.2}
+        />
+      )}
     </div>
   );
 };

src/components/footer.tsx

@@ -1,15 +1,14 @@
 import { default as GridLines } from "@mezh-hq/react-gridlines";
 import { useSelector } from "react-redux";
-import { AnimatedSwitcher } from "../core";
 
 const Grid = () => {
   const grid = useSelector((state: any) => state.editor.grid);
   if (!grid) return null;
   return (
-    <AnimatedSwitcher
-      show={grid}
-      component={<GridLines className="w-full h-full opacity-20" cellWidth={44} strokeWidth={2} />}
-      className="absolute top-0 left-0 pointer-events-none"
+    <GridLines
+      className="w-full h-full absolute top-0 left-0 pointer-events-none opacity-20"
+      cellWidth={44}
+      strokeWidth={2}
     />
   );
 };