From ef952d0a03b2cc3490b65535f1c5707b6578836d Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Tue, 5 Dec 2023 17:55:26 +0330
Subject: [PATCH] style: remove layout animation

---
 src/components/buttons/play/play.tsx | 6 ++----
 src/components/category/category.tsx | 6 ++----
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/components/buttons/play/play.tsx b/src/components/buttons/play/play.tsx
index 05715aa..20960f7 100644
--- a/src/components/buttons/play/play.tsx
+++ b/src/components/buttons/play/play.tsx
@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
 import { BiPause, BiPlay } from 'react-icons/bi/index';
-import { motion } from 'framer-motion';
 
 import { useSoundStore } from '@/store';
 import { useSnackbar } from '@/contexts/snackbar';
@@ -27,10 +26,9 @@ export function PlayButton() {
   }, [isPlaying, pause, noSelected]);
 
   return (
-    <motion.button
+    <button
       aria-disabled={noSelected}
       className={cn(styles.playButton, noSelected && styles.disabled)}
-      layout
       onClick={handleClick}
     >
       {isPlaying ? (
@@ -48,6 +46,6 @@ export function PlayButton() {
           Play
         </>
       )}
-    </motion.button>
+    </button>
   );
 }
diff --git a/src/components/category/category.tsx b/src/components/category/category.tsx
index a421a41..fcc6b53 100644
--- a/src/components/category/category.tsx
+++ b/src/components/category/category.tsx
@@ -1,5 +1,3 @@
-import { motion } from 'framer-motion';
-
 import { Sounds } from '@/components/sounds';
 
 import styles from './category.module.css';
@@ -18,7 +16,7 @@ export function Category({
   title,
 }: CategoryProps) {
   return (
-    <motion.div className={styles.category}>
+    <div className={styles.category}>
       <div className={styles.iconContainer}>
         <div className={styles.tail} />
         <div className={styles.icon}>{icon}</div>
@@ -27,6 +25,6 @@ export function Category({
       <h2 className={styles.title}>{title}</h2>
 
       <Sounds functional={functional} id={id} sounds={sounds} />
-    </motion.div>
+    </div>
   );
 }