make tab switch animations less trash

getsentry · Sep 22, 2024 · 524c1ae · 524c1ae
1 parent 2345d0d
commit 524c1ae
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 13 deletions.
diff --git a/static/app/components/draggableTabs/draggableTabList.tsx b/static/app/components/draggableTabs/draggableTabList.tsx
@@ -227,7 +227,7 @@ function Tabs({
               data-key={item.key}
               dragConstraints={dragConstraints} // dragConstraints are the bounds that the tab can be dragged within
               dragElastic={0} // Prevents the tab from being dragged outside of the dragConstraints (w/o this you can drag it outside but it'll spring back)
-              dragTransition={{bounceStiffness: 400, bounceDamping: 40}} // Recovers spring behavior thats lost when using dragElastic=0
+              dragTransition={{bounceStiffness: 300, bounceDamping: 40}} // Recovers spring behavior thats lost when using dragElastic=0
               transition={{delay: -0.1}} // Skips the first few frames of the animation that make the tab appear to shrink before growing
               layout
               onDrag={() => setIsDragging(true)}

diff --git a/static/app/views/issueList/groupSearchViewTabs/draggableTabBar.tsx b/static/app/views/issueList/groupSearchViewTabs/draggableTabBar.tsx
@@ -3,6 +3,7 @@ import 'intersection-observer'; // polyfill
 import {useCallback, useContext, useEffect, useState} from 'react';
 import styled from '@emotion/styled';
 import type {Node} from '@react-types/shared';
+import {motion} from 'framer-motion';
 
 import {
   DraggableTabList,
@@ -387,24 +388,34 @@ export function DraggableTabBar({
           disabled={tab.key === editingTabKey}
         >
           <TabContentWrap>
-            <EditableTabTitle
-              label={tab.label}
-              isEditing={editingTabKey === tab.key}
-              setIsEditing={isEditing => setEditingTabKey(isEditing ? tab.key : null)}
-              onChange={newLabel => handleOnTabRenamed(newLabel.trim(), tab.key)}
-              tabKey={tab.key}
-            />
+            <motion.div layout="position">
+              <EditableTabTitle
+                label={tab.label}
+                isEditing={editingTabKey === tab.key}
+                setIsEditing={isEditing => setEditingTabKey(isEditing ? tab.key : null)}
+                onChange={newLabel => handleOnTabRenamed(newLabel.trim(), tab.key)}
+                tabKey={tab.key}
+              />
+            </motion.div>
             {/* If tablistState isn't initialized, we want to load the elipsis menu
                 for the initial tab, that way it won't load in a second later
                 and cause the tabs to shift and animate on load.
             */}
             {((tabListState && tabListState?.selectedKey === tab.key) ||
               (!tabListState && tab.key === initialTabKey)) && (
-              <DraggableTabMenuButton
-                hasUnsavedChanges={!!tab.unsavedChanges}
-                menuOptions={makeMenuOptions(tab)}
-                aria-label={`${tab.label} Tab Options`}
-              />
+              <motion.div
+                // This stops the ellipsis menu from animating in on load (when tabListState isn't initialized yet),
+                // but enables the animation later on when switching tabs
+                initial={tabListState ? {opacity: 0} : false}
+                animate={{opacity: 1}}
+                transition={{delay: 0.01}}
+              >
+                <DraggableTabMenuButton
+                  hasUnsavedChanges={!!tab.unsavedChanges}
+                  menuOptions={makeMenuOptions(tab)}
+                  aria-label={`${tab.label} Ellipsis Menu`}
+                />
+              </motion.div>
             )}
           </TabContentWrap>
         </DraggableTabList.Item>