From c7c141bef9f73b6462777b8c863feec43eb5f755 Mon Sep 17 00:00:00 2001
From: Mat Sz <contact@matsz.dev>
Date: Wed, 25 Oct 2023 18:06:51 +0200
Subject: [PATCH] fix nanoanim removal

---
 web/src/animationSettings.ts                  | 11 -----------
 web/src/components/NetworkTile.tsx            | 10 ++--------
 web/src/components/Status.tsx                 |  6 +-----
 web/src/sections/Chat/ChatItem.tsx            |  7 ++-----
 web/src/sections/Chat/index.tsx               |  3 +--
 web/src/sections/Transfers/Transfer/index.tsx |  6 ++----
 6 files changed, 8 insertions(+), 35 deletions(-)
 delete mode 100644 web/src/animationSettings.ts

diff --git a/web/src/animationSettings.ts b/web/src/animationSettings.ts
deleted file mode 100644
index a6bbd22..0000000
--- a/web/src/animationSettings.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export const animationPropsOpacity = {
-  initial: { opacity: 0 },
-  animate: { opacity: 1 },
-  exit: { opacity: 0 },
-};
-
-export const animationPropsSlide = {
-  initial: { x: -100, opacity: 0 },
-  animate: { x: 0, opacity: 1 },
-  exit: { x: -100, opacity: 0 },
-};
diff --git a/web/src/components/NetworkTile.tsx b/web/src/components/NetworkTile.tsx
index 173050c..e7b53b4 100644
--- a/web/src/components/NetworkTile.tsx
+++ b/web/src/components/NetworkTile.tsx
@@ -1,12 +1,10 @@
 import React from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18not';
-import { motion } from 'nanoanim';
 import { IoAdd } from 'react-icons/io5';
 import { ClientModel } from '@filedrop/types';
 
 import styles from './NetworkTile.module.scss';
-import { animationPropsOpacity } from '../animationSettings.js';
 import { TargetTile } from './TargetTile.js';
 import { networkStore } from '../stores/index.js';
 
@@ -34,11 +32,7 @@ export const NetworkTile: React.FC<NetworkTileProps> = ({
   };
 
   return (
-    <motion.div
-      {...animationPropsOpacity}
-      onClick={onClick}
-      className={styles.wrapper}
-    >
+    <div onClick={onClick} className={styles.wrapper}>
       <TargetTile client={client} variant="big" className={clsx(styles.tile)}>
         {!onSelect && (
           <input
@@ -60,6 +54,6 @@ export const NetworkTile: React.FC<NetworkTileProps> = ({
         </div>
       </TargetTile>
       <div className={styles.name}>{client.clientName}</div>
-    </motion.div>
+    </div>
   );
 };
diff --git a/web/src/components/Status.tsx b/web/src/components/Status.tsx
index 208a069..9d14a19 100644
--- a/web/src/components/Status.tsx
+++ b/web/src/components/Status.tsx
@@ -4,17 +4,13 @@ import { observer } from 'mobx-react-lite';
 import clsx from 'clsx';
 
 import styles from './Status.module.scss';
-import { animationPropsOpacity } from '../animationSettings.js';
 import { connection } from '../stores/index.js';
 
 export const Status: React.FC = observer(() => {
   const { t } = useTranslation();
 
   return !connection.connected && !connection.disconnectReason ? (
-    <div
-      {...animationPropsOpacity}
-      className={clsx(styles.status, styles.error)}
-    >
+    <div className={clsx(styles.status, styles.error)}>
       <div>{t('state.connecting')}</div>
     </div>
   ) : null;
diff --git a/web/src/sections/Chat/ChatItem.tsx b/web/src/sections/Chat/ChatItem.tsx
index 900aec1..8f44539 100644
--- a/web/src/sections/Chat/ChatItem.tsx
+++ b/web/src/sections/Chat/ChatItem.tsx
@@ -1,11 +1,9 @@
 import React, { useLayoutEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18not';
-import { motion } from 'nanoanim';
 import { observer } from 'mobx-react-lite';
 import clsx from 'clsx';
 
 import styles from './ChatItem.module.scss';
-import { animationPropsSlide } from '../../animationSettings.js';
 import { ChatItemModel } from '../../types/Models.js';
 import { copy } from '../../utils/copy.js';
 import { TargetTile } from '../../components/TargetTile.js';
@@ -45,11 +43,10 @@ export const ChatItem: React.FC<ChatItemProps> = observer(({ item }) => {
   }, [setExpanded]);
 
   return (
-    <motion.li
+    <li
       className={clsx(styles.item, {
         [styles.expanded]: expanded,
       })}
-      {...animationPropsSlide}
     >
       <div className={styles.info}>
         {client && <TargetTile client={client} />}
@@ -67,6 +64,6 @@ export const ChatItem: React.FC<ChatItemProps> = observer(({ item }) => {
           {t('chat.showMore')}
         </button>
       )}
-    </motion.li>
+    </li>
   );
 });
diff --git a/web/src/sections/Chat/index.tsx b/web/src/sections/Chat/index.tsx
index eb028d6..8646b3e 100644
--- a/web/src/sections/Chat/index.tsx
+++ b/web/src/sections/Chat/index.tsx
@@ -7,7 +7,6 @@ import clsx from 'clsx';
 
 import styles from './index.module.scss';
 import { ChatItem } from './ChatItem.js';
-import { animationPropsOpacity } from '../../animationSettings.js';
 import { IconButton } from '../../components/IconButton.js';
 import { applicationStore, chatStore } from '../../stores/index.js';
 import { TargetTile } from '../../components/TargetTile.js';
@@ -87,7 +86,7 @@ export const ChatSection: React.FC = observer(() => {
       </div>
       <React.Fragment key={chatStore.currentChannel}>
         {chat.length === 0 ? (
-          <div className={styles.empty} {...animationPropsOpacity}>
+          <div className={styles.empty}>
             <IoChatbox />
             <div className={styles.title}>{t('emptyChat.title')}</div>
             <div>
diff --git a/web/src/sections/Transfers/Transfer/index.tsx b/web/src/sections/Transfers/Transfer/index.tsx
index 2c68ed8..8aff67a 100644
--- a/web/src/sections/Transfers/Transfer/index.tsx
+++ b/web/src/sections/Transfers/Transfer/index.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
 import { useTranslation } from 'react-i18not';
-import { motion } from 'nanoanim';
 import { observer } from 'mobx-react-lite';
 
 import styles from './index.module.scss';
-import { animationPropsSlide } from '../../../animationSettings.js';
 import { TransferState } from '../../../types/TransferState.js';
 import { formatFileName, formatFileSize } from '../../../utils/file.js';
 import { humanTime } from '../../../utils/time.js';
@@ -31,7 +29,7 @@ export const TransferInfo: React.FC<TransferProps> = observer(
     const left = humanTime(transfer.timeLeft());
 
     return (
-      <motion.li className={styles.transfer} {...animationPropsSlide}>
+      <li className={styles.transfer}>
         <TransferIcon transfer={transfer} />
         <div className={styles.state}>
           <div className={styles.filename}>
@@ -68,7 +66,7 @@ export const TransferInfo: React.FC<TransferProps> = observer(
           </div>
         </div>
         <TransferActions transfer={transfer} />
-      </motion.li>
+      </li>
     );
   }
 );