fix(explorer): fix navigation between tabs is not working using brows…

…er arrows (#5280) * fix: update FillsTableWithData loading condition and improve query string handling * fix: remove trailing comma in useUpdateQueryString dependencies * fix: remove duplicate import of useLocation in OrderDetails component * fix(explorer): add logging for first render and adjust tab change effect dependencies * refactor(fills-table): remove debug logging for first render check --------- Co-authored-by: Leandro <[email protected]>
cowprotocol · Jan 14, 2025 · 3e1bcfe · 3e1bcfe
1 parent 94b4437
commit 3e1bcfe
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 11 deletions.
diff --git a/apps/explorer/src/components/orders/OrderDetails/FillsTableWithData.tsx b/apps/explorer/src/components/orders/OrderDetails/FillsTableWithData.tsx
@@ -21,7 +21,7 @@ export const FillsTableWithData: React.FC<Props> = ({ areTokensLoaded, order, is
   const { data: trades, tableState } = useContext(FillsTableContext)
   const isFirstRender = useFirstRender()
 
-  return isFirstRender || !areTokensLoaded ? (
+  return isFirstRender && !areTokensLoaded ? (
     <CowLoading />
   ) : (
     <FillsTable

diff --git a/apps/explorer/src/components/orders/OrderDetails/index.tsx b/apps/explorer/src/components/orders/OrderDetails/index.tsx
@@ -17,6 +17,7 @@ import TablePagination from 'explorer/components/common/TablePagination'
 import { useTable } from 'explorer/components/TokensTableWidget/useTable'
 import { TAB_QUERY_PARAM_KEY } from 'explorer/const'
 import { useQuery, useUpdateQueryString } from 'hooks/useQuery'
+import { useLocation } from 'react-router-dom'
 import { useNetworkId } from 'state/network'
 import styled from 'styled-components/macro'
 import { Errors } from 'types'
@@ -192,18 +193,22 @@ export const OrderDetails: React.FC<Props> = (props) => {
     return (): void => clearTimeout(timer)
   })
 
-  const onChangeTab = useCallback((tabId: number) => {
-    const newTabViewName = TabView[tabId]
-    if (!newTabViewName) return
+  const onChangeTab = useCallback(
+    (tabId: number) => {
+      const newTabViewName = TabView[tabId]
+      if (!newTabViewName) return
 
-    setTabViewSelected(TabView[newTabViewName])
-  }, [])
-
-  useEffect(
-    () => updateQueryString(TAB_QUERY_PARAM_KEY, TabView[tabViewSelected].toLowerCase()),
-    [tabViewSelected, updateQueryString],
+      updateQueryString(TAB_QUERY_PARAM_KEY, newTabViewName.toLowerCase())
+      setTabViewSelected(TabView[newTabViewName])
+    },
+    [updateQueryString],
   )
 
+  const location = useLocation()
+  useEffect(() => {
+    setTabViewSelected(TabView[tab])
+  }, [location, tab])
+
   if (!chainId) {
     return null
   }

diff --git a/apps/explorer/src/hooks/useQuery.ts b/apps/explorer/src/hooks/useQuery.ts
@@ -26,7 +26,7 @@ export function useUpdateQueryString(): (key: string, value: string) => void {
     (key: string, value: string) => {
       query.set(key, value)
 
-      navigate({ search: query.toString() }, { replace: true })
+      navigate({ search: query.toString() })
     },
     [navigate, query]
   )