chore: disable layout animation on mobile

pancakeswap · Oct 1, 2024 · 2275183 · 2275183
1 parent f6ef646
commit 2275183
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 16 deletions.
diff --git a/apps/web/src/components/Menu/GlobalSettings/SettingsModalV2/index.tsx b/apps/web/src/components/Menu/GlobalSettings/SettingsModalV2/index.tsx
@@ -63,7 +63,7 @@ export const SettingsModalV2 = ({ onDismiss, mode }: SettingsModalV2Props) => {
 
       default:
         return (
-          <MotionTabs activeIndex={activeTabIndex} onItemClick={onTabChange}>
+          <MotionTabs activeIndex={activeTabIndex} onItemClick={onTabChange} animateOnMobile={false}>
             <Text>{t('Settings')}</Text>
             <Text>{t('Recent Transactions')}</Text>
           </MotionTabs>

diff --git a/apps/web/src/components/Motion/MotionTabs.tsx b/apps/web/src/components/Motion/MotionTabs.tsx
@@ -6,6 +6,9 @@ interface MotionTabsProps extends FlexGapProps {
   children: React.ReactElement[]
   activeIndex?: number
   onItemClick?: (index: number) => void
+
+  /** Default: true */
+  animateOnMobile?: boolean
 }
 
 const MotionBoxUnderline = styled(MotionBox)`
@@ -28,6 +31,7 @@ export const MotionTabs: React.FC<React.PropsWithChildren<MotionTabsProps>> = ({
   children,
   onItemClick,
   activeIndex = 0,
+  animateOnMobile = true,
   ...props
 }) => {
   const { isMobile } = useMatchBreakpoints()
@@ -38,20 +42,22 @@ export const MotionTabs: React.FC<React.PropsWithChildren<MotionTabsProps>> = ({
         const color = isActive ? 'text' : 'textSubtle'
 
         return (
-          <>
-            <StyledTab position="relative" width="fit-content">
-              <Box px={['8px', '12px']} py="8px">
-                {cloneElement(child, {
-                  onClick: onItemClick ? () => onItemClick(index) : undefined,
-                  color,
-                  bold: isActive,
-                  isActive,
-                  tabIndex: 0, // TODO: fix not clickable by pressing enter or space
-                })}
-              </Box>
-              {isActive && <MotionBoxUnderline layoutId="underline" />}
-            </StyledTab>
-          </>
+          // TODO: Fix not clickable by pressing enter/space when in tab focus
+          <StyledTab
+            position="relative"
+            width="fit-content"
+            tabIndex={0}
+            onClick={onItemClick ? () => onItemClick(index) : undefined}
+          >
+            <Box px={['8px', '12px']} py="8px">
+              {cloneElement(child, {
+                color,
+                bold: isActive,
+                isactive: isActive,
+              })}
+            </Box>
+            {isActive && <MotionBoxUnderline {...(!(isMobile && !animateOnMobile) && { layoutId: 'underline' })} />}
+          </StyledTab>
         )
       })}
     </MotionFlexGap>

diff --git a/packages/uikit/src/widgets/Modal/MotionModal.tsx b/packages/uikit/src/widgets/Modal/MotionModal.tsx
@@ -59,7 +59,8 @@ export const ModalWrapper = ({
       style={{ overflow: "hidden" }}
       $minHeight={minHeight}
       // Note: Not using layout attr from framer-motion, we animate only height right now manually.
-      animate={{ height: Math.max(dimensions.height, parseInt(minHeight?.toString() || "0")) }}
+      // Note: Layout animations on mobile can be costly in performance
+      animate={!isMobile && { height: Math.max(dimensions.height, parseInt(minHeight?.toString() || "0")) }}
     >
       <Box ref={innerRef} overflow="hidden" borderRadius="32px" {...props}>
         {children}