From 98a40f93c0bc8810b18e98a010056bdb13185a60 Mon Sep 17 00:00:00 2001
From: Mat Sz <contact@matsz.dev>
Date: Wed, 25 Oct 2023 18:05:09 +0200
Subject: [PATCH] remove animations

---
 web/package.json                     |  1 -
 web/src/components/Network.tsx       | 19 +++---
 web/src/components/Status.tsx        | 21 +++----
 web/src/sections/Chat/index.tsx      | 89 +++++++++++++---------------
 web/src/sections/Transfers/Queue.tsx |  9 +--
 yarn.lock                            |  5 --
 6 files changed, 59 insertions(+), 85 deletions(-)

diff --git a/web/package.json b/web/package.json
index 1c9fee1..b7a5e83 100644
--- a/web/package.json
+++ b/web/package.json
@@ -27,7 +27,6 @@
     "matcrypt": "^1.3.0",
     "mobx": "^6.10.2",
     "mobx-react-lite": "^4.0.5",
-    "nanoanim": "^0.1.0",
     "preact": "^10.18.1",
     "preact-compat": "^3.19.0",
     "pwanow": "^0.0.1",
diff --git a/web/src/components/Network.tsx b/web/src/components/Network.tsx
index 0156474..724c313 100644
--- a/web/src/components/Network.tsx
+++ b/web/src/components/Network.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
-import { AnimatePresence } from 'nanoanim';
 
 import styles from './Network.module.scss';
 import { NetworkTile } from './NetworkTile.js';
@@ -21,16 +20,14 @@ export const Network: React.FC<NetworkProps> = observer(
 
     return (
       <div className={styles.network}>
-        <AnimatePresence>
-          {clients.map(client => (
-            <NetworkTile
-              key={client.clientId}
-              client={client}
-              onSelect={onSelect}
-              icon={icon}
-            />
-          ))}
-        </AnimatePresence>
+        {clients.map(client => (
+          <NetworkTile
+            key={client.clientId}
+            client={client}
+            onSelect={onSelect}
+            icon={icon}
+          />
+        ))}
       </div>
     );
   }
diff --git a/web/src/components/Status.tsx b/web/src/components/Status.tsx
index c8be273..208a069 100644
--- a/web/src/components/Status.tsx
+++ b/web/src/components/Status.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { useTranslation } from 'react-i18not';
-import { AnimatePresence, motion } from 'nanoanim';
 import { observer } from 'mobx-react-lite';
 import clsx from 'clsx';
 
@@ -11,16 +10,12 @@ import { connection } from '../stores/index.js';
 export const Status: React.FC = observer(() => {
   const { t } = useTranslation();
 
-  return (
-    <AnimatePresence>
-      {!connection.connected && !connection.disconnectReason ? (
-        <motion.div
-          {...animationPropsOpacity}
-          className={clsx(styles.status, styles.error)}
-        >
-          <div>{t('state.connecting')}</div>
-        </motion.div>
-      ) : null}
-    </AnimatePresence>
-  );
+  return !connection.connected && !connection.disconnectReason ? (
+    <div
+      {...animationPropsOpacity}
+      className={clsx(styles.status, styles.error)}
+    >
+      <div>{t('state.connecting')}</div>
+    </div>
+  ) : null;
 });
diff --git a/web/src/sections/Chat/index.tsx b/web/src/sections/Chat/index.tsx
index 1982a4f..eb028d6 100644
--- a/web/src/sections/Chat/index.tsx
+++ b/web/src/sections/Chat/index.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18not';
-import { AnimatePresence, motion } from 'nanoanim';
 import Textarea from 'react-expanding-textarea';
 import { observer } from 'mobx-react-lite';
 import { IoSend, IoChatbox, IoGlobe, IoClipboard } from 'react-icons/io5';
@@ -58,62 +57,54 @@ export const ChatSection: React.FC = observer(() => {
     <div className={clsx('subsection', 'mobileFlex', styles.chat)}>
       <div className={styles.channels}>
         <div className={styles.list}>
-          <AnimatePresence>
-            {channels.map(channel =>
-              channel.client ? (
-                <TargetTile
-                  className={clsx(styles.channel, {
-                    [styles.active]:
-                      chatStore.currentChannel === channel.channel,
-                  })}
-                  variant="small"
-                  key={channel.channel}
-                  client={channel.client}
-                  onClick={() => chatStore.selectChannel(channel.channel)}
-                >
-                  <NotificationCount count={channel.unread} />
-                </TargetTile>
-              ) : (
-                <div
-                  key={channel.channel}
-                  className={clsx(styles.channel, styles.global, {
-                    [styles.active]:
-                      chatStore.currentChannel === channel.channel,
-                  })}
-                  onClick={() => chatStore.selectChannel(channel.channel)}
-                >
-                  <NotificationCount count={channel.unread} />
-                  <IoGlobe />
-                </div>
-              )
-            )}
-          </AnimatePresence>
+          {channels.map(channel =>
+            channel.client ? (
+              <TargetTile
+                className={clsx(styles.channel, {
+                  [styles.active]: chatStore.currentChannel === channel.channel,
+                })}
+                variant="small"
+                key={channel.channel}
+                client={channel.client}
+                onClick={() => chatStore.selectChannel(channel.channel)}
+              >
+                <NotificationCount count={channel.unread} />
+              </TargetTile>
+            ) : (
+              <div
+                key={channel.channel}
+                className={clsx(styles.channel, styles.global, {
+                  [styles.active]: chatStore.currentChannel === channel.channel,
+                })}
+                onClick={() => chatStore.selectChannel(channel.channel)}
+              >
+                <NotificationCount count={channel.unread} />
+                <IoGlobe />
+              </div>
+            )
+          )}
         </div>
       </div>
       <React.Fragment key={chatStore.currentChannel}>
         {chat.length === 0 ? (
-          <AnimatePresence>
-            <motion.div className={styles.empty} {...animationPropsOpacity}>
-              <IoChatbox />
-              <div className={styles.title}>{t('emptyChat.title')}</div>
-              <div>
-                {chatStore.currentChannel === 'global'
-                  ? t('emptyChat.body')
-                  : t('emptyChat.bodyTarget', {
-                      target: chatStore.currentChannelName,
-                    })}
-              </div>
-            </motion.div>
-          </AnimatePresence>
+          <div className={styles.empty} {...animationPropsOpacity}>
+            <IoChatbox />
+            <div className={styles.title}>{t('emptyChat.title')}</div>
+            <div>
+              {chatStore.currentChannel === 'global'
+                ? t('emptyChat.body')
+                : t('emptyChat.bodyTarget', {
+                    target: chatStore.currentChannelName,
+                  })}
+            </div>
+          </div>
         ) : (
           <div className={styles.items}>
             <div className={styles.placeholder} />
             <ul ref={containerRef}>
-              <AnimatePresence>
-                {chat.map(item => (
-                  <ChatItem key={item.id} item={item} />
-                ))}
-              </AnimatePresence>
+              {chat.map(item => (
+                <ChatItem key={item.id} item={item} />
+              ))}
             </ul>
           </div>
         )}
diff --git a/web/src/sections/Transfers/Queue.tsx b/web/src/sections/Transfers/Queue.tsx
index 6a112a5..e8afc2e 100644
--- a/web/src/sections/Transfers/Queue.tsx
+++ b/web/src/sections/Transfers/Queue.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { AnimatePresence } from 'nanoanim';
 import { observer } from 'mobx-react-lite';
 
 import styles from './Queue.module.scss';
@@ -26,11 +25,9 @@ export const Queue: React.FC<Props> = observer(
             </div>
             <ul className={styles.queue}>
               {showTotal && <Total transfers={transfers} />}
-              <AnimatePresence>
-                {transfers.map(transfer => (
-                  <TransferInfo key={transfer.transferId} transfer={transfer} />
-                ))}
-              </AnimatePresence>
+              {transfers.map(transfer => (
+                <TransferInfo key={transfer.transferId} transfer={transfer} />
+              ))}
             </ul>
           </div>
         )}
diff --git a/yarn.lock b/yarn.lock
index 3c23115..72c771d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4493,11 +4493,6 @@ ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
-nanoanim@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/nanoanim/-/nanoanim-0.1.0.tgz#fe78f9fca42be740931ee621a28b41a2e9f7a757"
-  integrity sha512-iLLE8WPqnPMRuGV3IWGEkd5VJ+qXoEw54B92affKrHk8qnekFDwcyp3t9ZBVKO/vGZpUqSXoswnvQPEs8sAXjA==
-
 nanoid@^3.3.6:
   version "3.3.6"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"