mitigate flickering

ui/shared/RoutedTabs/RoutedTabs.tsx

@@ -67,7 +67,13 @@ const RoutedTabs = ({ tabs, defaultActiveTab }: Props) => {
                 activeTab={ tabs[activeTab] }
                 tabsCut={ tabsCut }
                 isActive={ activeTab >= tabsCut }
-                styles={ tabsCut < tabs.length ? {} : hiddenItemStyles }
+                styles={ tabsCut < tabs.length ?
+                  // initially our cut is 0 and we don't want to show the menu button too
+                  // but we want to keep it in the tabs row so it won't collapse
+                  // that's why we only change opacity but not the position itself
+                  { opacity: tabsCut === 0 ? 0 : 1 } :
+                  hiddenItemStyles
+                }
                 onItemClick={ handleItemInMenuClick }
                 buttonRef={ tabsRefs[index] }
               />

ui/shared/RoutedTabs/useAdaptiveTabs.tsx

@@ -6,7 +6,9 @@ import type { RoutedTab } from './types';
 import { menuButton } from './utils';
 
 export default function useAdaptiveTabs(tabs: Array<RoutedTab>) {
-  const [ tabsCut, setTabsCut ] = React.useState(tabs.length);
+  // to avoid flickering we set initial value to 0
+  // so there will be no displayed tabs initially
+  const [ tabsCut, setTabsCut ] = React.useState(0);
   const [ tabsRefs, setTabsRefs ] = React.useState<Array<React.RefObject<HTMLButtonElement>>>([]);
   const listRef = React.useRef<HTMLDivElement>(null);