limit amout of tabs in routed tabs skeleton

blockscout · Aug 26, 2024 · e5c455b · e5c455b
1 parent 035323c
commit e5c455b
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/ui/shared/Tabs/AdaptiveTabsList.tsx b/ui/shared/Tabs/AdaptiveTabsList.tsx
@@ -80,7 +80,7 @@ const AdaptiveTabsList = (props: Props) => {
           props.tabListProps)
       }
     >
-      { tabsList.map((tab, index) => {
+      { tabsList.slice(0, props.isLoading ? 5 : Infinity).map((tab, index) => {
         if (!tab.id) {
           if (props.isLoading) {
             return null;

diff --git a/ui/shared/Tabs/TabsWithScroll.tsx b/ui/shared/Tabs/TabsWithScroll.tsx
@@ -99,7 +99,7 @@ const TabsWithScroll = ({
         //    - tabs list is changed when API data is loaded
         // is to do full re-render of the tabs list
         // so we use screenWidth + tabIds as a key for the TabsList component
-        key={ screenWidth + '_' + tabsList.map((tab) => tab.id).join(':') }
+        key={ isLoading + '_' + screenWidth + '_' + tabsList.map((tab) => tab.id).join(':') }
         tabs={ tabs }
         tabListProps={ tabListProps }
         rightSlot={ rightSlot }