From 5e7d495cc904c97917d036054bee1bf6c9d6aeca Mon Sep 17 00:00:00 2001
From: Aaron Pepper <pepdog@gmail.com>
Date: Wed, 18 Dec 2024 20:03:03 +0700
Subject: [PATCH] fix(ui): remove animation from the settings modal (#1286)

This is a small optimization to the Settings modal. In my opinion, we
don't need animation here. By removing the animation, it makes the UI
feel "snappy" and this should perform better when other elements cause
performance issues.

The user experience goal of the Settings section is to provide users
with access to these more advanced settings as quickly and smoothly as
possible. The timing of the animations actually slows access down and
gets in the way of the optimal experience.

https://www.loom.com/share/38ff2cda3b9641dba7dde2488a56e015
---
 src/containers/floating/Settings/SettingsModal.styles.ts | 8 ++------
 src/containers/floating/Settings/SettingsModal.tsx       | 9 ++-------
 2 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/containers/floating/Settings/SettingsModal.styles.ts b/src/containers/floating/Settings/SettingsModal.styles.ts
index 72c88afc7..0d0c4a037 100644
--- a/src/containers/floating/Settings/SettingsModal.styles.ts
+++ b/src/containers/floating/Settings/SettingsModal.styles.ts
@@ -1,4 +1,3 @@
-import { m } from 'framer-motion';
 import styled from 'styled-components';
 
 export const Container = styled.div`
@@ -58,11 +57,8 @@ export const variants = {
         transition,
     },
 };
-export const SectionWrapper = styled(m.div).attrs({
-    initial: 'initial',
-    animate: 'visible',
-    exit: 'exit',
-})`
+
+export const SectionWrapper = styled.div`
     max-width: 100%;
     display: flex;
     flex-direction: column;
diff --git a/src/containers/floating/Settings/SettingsModal.tsx b/src/containers/floating/Settings/SettingsModal.tsx
index ec38cca79..b91ff6c0d 100644
--- a/src/containers/floating/Settings/SettingsModal.tsx
+++ b/src/containers/floating/Settings/SettingsModal.tsx
@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { AnimatePresence } from 'framer-motion';
 import { useTranslation } from 'react-i18next';
 import { IoClose } from 'react-icons/io5';
 
@@ -23,7 +22,7 @@ import {
     ReleaseNotes,
 } from './sections';
 
-import { Container, ContentContainer, HeaderContainer, SectionWrapper, variants } from './SettingsModal.styles.ts';
+import { Container, ContentContainer, HeaderContainer, SectionWrapper } from './SettingsModal.styles.ts';
 
 const markups = {
     general: <GeneralSettings />,
@@ -65,11 +64,7 @@ export default function SettingsModal() {
                             </IconButton>
                         </HeaderContainer>
 
-                        <AnimatePresence mode="wait">
-                            <SectionWrapper variants={variants} key={activeSection}>
-                                {sectionMarkup}
-                            </SectionWrapper>
-                        </AnimatePresence>
+                        <SectionWrapper key={activeSection}>{sectionMarkup}</SectionWrapper>
                     </ContentContainer>
                 </Container>
                 <RestartDialog />