From 8754e6c6613adef10fe21f6cc5e5941129985c84 Mon Sep 17 00:00:00 2001
From: SethBurkart123 <hi25S.burkart@hills.adventist.edu.au>
Date: Thu, 26 Oct 2023 09:37:57 +1100
Subject: [PATCH] fix lag when changing tabs on extension settings

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

diff --git a/interface/src/components/TabbedContainer.tsx b/interface/src/components/TabbedContainer.tsx
index 4a7108b1..4c23829f 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, AnimatePresence } from 'framer-motion';
+import { motion } from 'framer-motion';
 import type { TabbedContainerProps } from '../types/TabbedContainerProps';
 import { useSettingsContext } from '../SettingsContext';
 
@@ -94,23 +94,19 @@ const TabbedContainer: React.FC<TabbedContainerProps> = ({ tabs }) => {
           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 pb-4"
-                    initial="hidden"
-                    animate="visible"
-                    exit="hidden"
-                    transition={fastOpacityTransition}
-                    variants={contentVariants}
-                  >
-                    {tab.content}
-                  </motion.div>
-                )
-              ))}
-            </AnimatePresence>
+            {tabs.map((tab, index) => (
+              <motion.div
+                key={index}
+                className="absolute w-full pb-4"
+                initial="hidden"
+                animate={activeTab === index ? "visible" : "hidden"}
+                transition={fastOpacityTransition}
+                variants={contentVariants}
+                style={{ display: activeTab === index ? 'block' : 'none' }}  // Hide inactive tabs using CSS
+              >
+                {tab.content}
+              </motion.div>
+            ))}
           </div>
         </motion.div>
       </div>