From 745f7058c13ae5a05f364130ff390e6a06e537a2 Mon Sep 17 00:00:00 2001
From: SethBurkart123 <hi25S.burkart@hills.adventist.edu.au>
Date: Mon, 25 Sep 2023 11:21:07 +1000
Subject: [PATCH] improved interface tab transitions

---
 interface/src/components/TabbedContainer.tsx | 52 +++++++++++++-------
 1 file changed, 34 insertions(+), 18 deletions(-)

diff --git a/interface/src/components/TabbedContainer.tsx b/interface/src/components/TabbedContainer.tsx
index e29c9137..ea5e4a29 100644
--- a/interface/src/components/TabbedContainer.tsx
+++ b/interface/src/components/TabbedContainer.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { motion } from 'framer-motion';
+import { motion, AnimatePresence } from 'framer-motion';
 import type { TabbedContainerProps } from '../types/TabbedContainerProps';
 import { useSettingsContext } from '../SettingsContext';
 
@@ -21,6 +21,13 @@ const TabbedContainer: React.FC<TabbedContainerProps> = ({ tabs }) => {
 
   const springTransition = { type: 'spring', stiffness: 250, damping: 25 };
 
+  const contentVariants = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1 },
+  };
+
+  const fastOpacityTransition = { duration: 0.2 }; 
+
   useEffect(() => {
     if (containerRef.current) {
       // @ts-expect-error for some reason its giving an error in TS but it works...
@@ -61,23 +68,32 @@ const TabbedContainer: React.FC<TabbedContainerProps> = ({ tabs }) => {
       </div>
     </div>
     <div className="h-full px-4 overflow-y-scroll overflow-x-clip">
-      <motion.div
-        initial={false}
-        animate={{ x: `${position}%` }}
-        transition={springTransition}
-      >
-        <div className="absolute flex w-full" style={{ left: `${-position}%` }}>
-          {tabs.map((tab, index) => (
-            <div
-              key={index}
-              className={`w-full ${activeTab === index ? '' : 'hidden'}`}
-            >
-              {tab.content}
-            </div>
-          ))}
-        </div>
-      </motion.div>
-    </div>
+        <motion.div
+          initial={false}
+          animate={{ x: `${position}%` }}
+          transition={springTransition}
+        >
+          <div className="absolute flex w-full" style={{ left: `${-position}%` }}>
+            <AnimatePresence>
+              {tabs.map((tab, index) => (
+                activeTab === index && (
+                  <motion.div
+                    key={index}
+                    className="absolute w-full"
+                    initial="hidden"
+                    animate="visible"
+                    exit="hidden"
+                    transition={fastOpacityTransition}
+                    variants={contentVariants}
+                  >
+                    {tab.content}
+                  </motion.div>
+                )
+              ))}
+            </AnimatePresence>
+          </div>
+        </motion.div>
+      </div>
     </>
   );
 };