Adding TabIcon component

src/apps/explorer/components/TransactionsTableWidget/index.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react'
 import { faListUl, faProjectDiagram } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useHistory } from 'react-router-dom'
 
 import { useQuery } from 'hooks/useQuery'
@@ -11,9 +10,9 @@ import Spinner from 'components/common/Spinner'
 import { RedirectToNetwork, useNetworkId } from 'state/network'
 import { Order } from 'api/operator'
 import { TransactionsTableWithData } from 'apps/explorer/components/TransactionsTableWidget/TransactionsTableWithData'
-import { TabItemInterface } from 'components/common/Tabs/Tabs'
+import { TabItemInterface, TabIcon } from 'components/common/Tabs/Tabs'
 import ExplorerTabs from '../common/ExplorerTabs/ExplorerTabs'
-import { TitleAddress, FlexContainer, StyledTabLoader, Title } from 'apps/explorer/pages/styled'
+import { TitleAddress, FlexContainer, Title } from 'apps/explorer/pages/styled'
 import { BlockExplorerLink } from 'components/common/BlockExplorerLink'
 import { ConnectionStatus } from 'components/ConnectionStatus'
 import { Notification } from 'components/Notification'
@@ -43,34 +42,16 @@ function useQueryViewParams(): { tab: string } {
   return { tab: query.get('tab') || DEFAULT_TAB }
 }
 
-const tabItems = (
-  isLoadingOrders: boolean,
-  txBatchTrades: GetTxBatchTradesResult,
-  networkId: BlockchainNetwork,
-): TabItemInterface[] => {
+const tabItems = (txBatchTrades: GetTxBatchTradesResult, networkId: BlockchainNetwork): TabItemInterface[] => {
   return [
     {
       id: TAB_VIEW_ID[TabViews.ORDERS],
-      tab: (
-        <>
-          <span>
-            <FontAwesomeIcon icon={faListUl} /> Orders
-          </span>
-          <StyledTabLoader>{isLoadingOrders && <Spinner spin size="1x" />}</StyledTabLoader>
-        </>
-      ),
+      tab: <TabIcon title="Orders" iconFontName={faListUl} />,
       content: <TransactionsTableWithData />,
     },
     {
       id: TAB_VIEW_ID[TabViews.GRAPH],
-      tab: (
-        <>
-          <span>
-            <FontAwesomeIcon icon={faProjectDiagram} /> Graph
-          </span>
-          <StyledTabLoader>{txBatchTrades.isLoading && <Spinner spin size="1x" />}</StyledTabLoader>
-        </>
-      ),
+      tab: <TabIcon title="Graph" iconFontName={faProjectDiagram} />,
       content: <TransactionBatchGraph txBatchData={txBatchTrades} networkId={networkId} />,
     },
   ]
@@ -145,7 +126,7 @@ export const TransactionsTableWidget: React.FC<Props> = ({ txHash }) => {
         }}
       >
         <ExplorerTabs
-          tabItems={tabItems(isTxLoading, txBatchTrades, networkId)}
+          tabItems={tabItems(txBatchTrades, networkId)}
           defaultTab={tabSelectedId.current}
           onChange={(key: number): void => onChangeTab(key)}
         />

src/apps/explorer/pages/styled.tsx

@@ -27,10 +27,6 @@ export const Wrapper = styled.div`
   }
 `
 
-export const StyledTabLoader = styled.span`
-  padding-left: 4px;
-`
-
 export const FlexContainer = styled.div`
   display: flex;
   align-items: center;
@@ -97,18 +93,6 @@ export const Title = styled.h1`
   font-weight: ${({ theme }): string => theme.fontBold};
 `
 
-export const BVButton = styled.a`
-  color: ${({ theme }): string => theme.orange};
-  font-size: 1.3rem;
-  margin-left: auto;
-  svg {
-    margin: 0 0.75rem 0 0;
-  }
-  ${media.mobile} {
-    margin: -3rem 0 1.5rem auto;
-  }
-`
-
 export const ContentCard = styled.div`
   font-size: 1.6rem;
   border: 0.1rem solid ${({ theme }): string => theme.borderPrimary};

src/components/common/Tabs/TabIcon.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import styled from 'styled-components'
+import { IconProp } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+const TabIconWrapper = styled.div`
+  svg {
+    margin-right: 0.6rem;
+  }
+`
+
+export default function TabIcon({ title, iconFontName }: { title: string; iconFontName: IconProp }): JSX.Element {
+  return (
+    <TabIconWrapper>
+      <FontAwesomeIcon icon={iconFontName} />
+      {title}
+    </TabIconWrapper>
+  )
+}

src/components/common/Tabs/Tabs.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components'
 // Components
 import TabItem from 'components/common/Tabs/TabItem'
 import TabContent from 'components/common/Tabs/TabContent'
+export { default as TabIcon } from 'components/common/Tabs/TabIcon'
 
 type TabId = number
 export enum IndicatorTabSize {