BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-06 03:34:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix lag when changing tabs on extension settings

Browse Source
This commit is contained in:
SethBurkart123
2023-10-26 09:37:57 +11:00
parent c1b5799e94
commit 8754e6c661
1 changed files with 14 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
interface/src/components/TabbedContainer.tsx
+14 -18
View File
@@ -1,5 +1,5 @@
import React, { useState, useRef, useEffect } from 'react'; 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 type { TabbedContainerProps } from '../types/TabbedContainerProps';
import { useSettingsContext } from '../SettingsContext'; import { useSettingsContext } from '../SettingsContext';
@@ -94,23 +94,19 @@ const TabbedContainer: React.FC<TabbedContainerProps> = ({ tabs }) => {
transition={springTransition} transition={springTransition}
> >
<div className="absolute flex w-full" style={{ left: `${-position}%` }}> <div className="absolute flex w-full" style={{ left: `${-position}%` }}>
<AnimatePresence> {tabs.map((tab, index) => (
{tabs.map((tab, index) => ( <motion.div
activeTab === index && ( key={index}
<motion.div className="absolute w-full pb-4"
key={index} initial="hidden"
className="absolute w-full pb-4" animate={activeTab === index ? "visible" : "hidden"}
initial="hidden" transition={fastOpacityTransition}
animate="visible" variants={contentVariants}
exit="hidden" style={{ display: activeTab === index ? 'block' : 'none' }} // Hide inactive tabs using CSS
transition={fastOpacityTransition} >
variants={contentVariants} {tab.content}
> </motion.div>
{tab.content} ))}
</motion.div>
)
))}
</AnimatePresence>
</div> </div>
</motion.div> </motion.div>
</div> </div>