From 557eaab44c52adbf39b0a18a332df5d347c00c32 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Fri, 9 Dec 2022 03:05:48 -0800
Subject: [PATCH] Prevent initial animation on settings modal

---
 .../features/settings/components/settings.tsx | 75 ++++++++++---------
 1 file changed, 39 insertions(+), 36 deletions(-)

diff --git a/packages/renderer/src/features/settings/components/settings.tsx b/packages/renderer/src/features/settings/components/settings.tsx
index 139a8f3d0..4650fde79 100644
--- a/packages/renderer/src/features/settings/components/settings.tsx
+++ b/packages/renderer/src/features/settings/components/settings.tsx
@@ -1,5 +1,6 @@
 import { Box } from '@mantine/core';
 import type { Variants } from 'framer-motion';
+import { AnimatePresence } from 'framer-motion';
 import { motion } from 'framer-motion';
 import { Tabs } from '/@/components';
 import { GeneralTab } from '/@/features/settings/components/general-tab';
@@ -29,42 +30,44 @@ export const Settings = () => {
       m={5}
       sx={{ height: '800px', maxHeight: '50vh', overflowX: 'hidden' }}
     >
-      <Tabs
-        keepMounted={false}
-        orientation="vertical"
-        styles={{
-          tab: {
-            fontSize: '1.1rem',
-            padding: '0.5rem 1rem',
-          },
-        }}
-        value={currentTab}
-        variant="pills"
-        onTabChange={(e) => e && update({ tab: e })}
-      >
-        <Tabs.List>
-          <Tabs.Tab value="general">General</Tabs.Tab>
-          <Tabs.Tab value="playback">Playback</Tabs.Tab>
-        </Tabs.List>
-        <Tabs.Panel value="general">
-          <motion.div
-            animate="in"
-            initial="out"
-            variants={tabVariants}
-          >
-            <GeneralTab />
-          </motion.div>
-        </Tabs.Panel>
-        <Tabs.Panel value="playback">
-          <motion.div
-            animate="in"
-            initial="out"
-            variants={tabVariants}
-          >
-            <PlaybackTab />
-          </motion.div>
-        </Tabs.Panel>
-      </Tabs>
+      <AnimatePresence initial={false}>
+        <Tabs
+          keepMounted={false}
+          orientation="vertical"
+          styles={{
+            tab: {
+              fontSize: '1.1rem',
+              padding: '0.5rem 1rem',
+            },
+          }}
+          value={currentTab}
+          variant="pills"
+          onTabChange={(e) => e && update({ tab: e })}
+        >
+          <Tabs.List>
+            <Tabs.Tab value="general">General</Tabs.Tab>
+            <Tabs.Tab value="playback">Playback</Tabs.Tab>
+          </Tabs.List>
+          <Tabs.Panel value="general">
+            <motion.div
+              animate="in"
+              initial="out"
+              variants={tabVariants}
+            >
+              <GeneralTab />
+            </motion.div>
+          </Tabs.Panel>
+          <Tabs.Panel value="playback">
+            <motion.div
+              animate="in"
+              initial="out"
+              variants={tabVariants}
+            >
+              <PlaybackTab />
+            </motion.div>
+          </Tabs.Panel>
+        </Tabs>
+      </AnimatePresence>
     </Box>
   );
 };