From 51b18cf6028af2cb7f78ae9c5565bd60a5c4d0d2 Mon Sep 17 00:00:00 2001
From: Michael Sun <55160142+MichaelSun48@users.noreply.github.com>
Date: Thu, 17 Oct 2024 13:49:41 -0700
Subject: [PATCH] fix(issue-views): Fix tabs animating on initial load (#79310)

Fixes a regression where the tab bar is animating on initial load.
---
 .../issueList/groupSearchViewTabs/draggableTabBar.tsx  |  5 ++++-
 .../issueList/groupSearchViewTabs/editableTabTitle.tsx | 10 +++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/static/app/views/issueList/groupSearchViewTabs/draggableTabBar.tsx b/static/app/views/issueList/groupSearchViewTabs/draggableTabBar.tsx
index de52a560976fc..22b85ee17490e 100644
--- a/static/app/views/issueList/groupSearchViewTabs/draggableTabBar.tsx
+++ b/static/app/views/issueList/groupSearchViewTabs/draggableTabBar.tsx
@@ -462,7 +462,10 @@ export function DraggableTabBar({
               isEditing={editingTabKey === tab.key}
               setIsEditing={isEditing => setEditingTabKey(isEditing ? tab.key : null)}
               onChange={newLabel => handleOnTabRenamed(newLabel.trim(), tab.key)}
-              tabKey={tab.key}
+              isSelected={
+                (tabListState && tabListState?.selectedKey === tab.key) ||
+                (!tabListState && tab.key === initialTabKey)
+              }
             />
             {/* 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
diff --git a/static/app/views/issueList/groupSearchViewTabs/editableTabTitle.tsx b/static/app/views/issueList/groupSearchViewTabs/editableTabTitle.tsx
index 9ebbb643f7125..d503023f81200 100644
--- a/static/app/views/issueList/groupSearchViewTabs/editableTabTitle.tsx
+++ b/static/app/views/issueList/groupSearchViewTabs/editableTabTitle.tsx
@@ -1,29 +1,27 @@
-import {useContext, useEffect, useMemo, useRef, useState} from 'react';
+import {useEffect, useMemo, useRef, useState} from 'react';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 import {motion} from 'framer-motion';
 
 import {GrowingInput} from 'sentry/components/growingInput';
-import {TabsContext} from 'sentry/components/tabs';
 import {Tooltip} from 'sentry/components/tooltip';
 
 interface EditableTabTitleProps {
   isEditing: boolean;
+  isSelected: boolean;
   label: string;
   onChange: (newLabel: string) => void;
   setIsEditing: (isEditing: boolean) => void;
-  tabKey: string;
 }
 
 function EditableTabTitle({
   label,
   onChange,
   isEditing,
-  tabKey,
+  isSelected,
   setIsEditing,
 }: EditableTabTitleProps) {
   const [inputValue, setInputValue] = useState(label);
-  const {tabListState} = useContext(TabsContext);
 
   useEffect(() => {
     setInputValue(label);
@@ -33,8 +31,6 @@ function EditableTabTitle({
   const inputRef = useRef<HTMLInputElement>(null);
   const isEmpty = !inputValue.trim();
 
-  const isSelected = tabListState?.selectedKey === tabKey;
-
   const memoizedStyles = useMemo(() => {
     return {fontWeight: isSelected ? theme.fontWeightBold : theme.fontWeightNormal};
   }, [isSelected, theme.fontWeightBold, theme.fontWeightNormal]);