Fix display 'No results found' message before displaying results (#890)

* use isMounted hook

* PoolTransactions display fix

* removed unnecessary hook

* get results after loading

* no network seleted

* compute jobs history fixes

* display correct message if no result found

* pool shares loading fix

* pool transactions loading fix

* transactions loading fix

src/components/molecules/PoolTransactions/index.tsx

@@ -10,10 +10,11 @@ import { fetchDataForMultipleChains } from '../../../utils/subgraph'
 import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 import NetworkName from '../../atoms/NetworkName'
 import { retrieveDDOListByDIDs } from '../../../utils/aquarius'
-import axios, { CancelToken } from 'axios'
+import { CancelToken } from 'axios'
 import Title from './Title'
 import styles from './index.module.css'
 import { DDO, Logger } from '@oceanprotocol/lib'
+import { useCancelToken } from '../../../hooks/useCancelToken'
 
 const REFETCH_INTERVAL = 20000
 
@@ -130,11 +131,12 @@ export default function PoolTransactions({
   accountId: string
 }): ReactElement {
   const [transactions, setTransactions] = useState<PoolTransaction[]>()
-  const [isLoading, setIsLoading] = useState<boolean>(true)
+  const [isLoading, setIsLoading] = useState<boolean>(false)
   const { chainIds } = useUserPreferences()
   const { appConfig } = useSiteMetadata()
   const [dataFetchInterval, setDataFetchInterval] = useState<NodeJS.Timeout>()
   const [data, setData] = useState<PoolTransaction[]>()
+  const cancelToken = useCancelToken()
 
   const getPoolTransactionData = useCallback(async () => {
     const variables = {
@@ -161,8 +163,9 @@ export default function PoolTransactions({
 
   const getPoolTransactions = useCallback(
     async (cancelToken: CancelToken) => {
-      if (!data) return
-
+      if (!data) {
+        return
+      }
       const poolTransactions: PoolTransaction[] = []
       const didList: string[] = []
 
@@ -173,7 +176,10 @@ export default function PoolTransactions({
           .replace('0x', 'did:op:')
         didList.push(did)
       }
-      if (didList.length === 0) return
+      if (didList.length === 0) {
+        setIsLoading(false)
+        return
+      }
       const ddoList = await retrieveDDOListByDIDs(
         didList,
         chainIds,
@@ -189,9 +195,11 @@ export default function PoolTransactions({
       const sortedTransactions = poolTransactions.sort(
         (a, b) => b.timestamp - a.timestamp
       )
+
       setTransactions(sortedTransactions)
+      setIsLoading(false)
     },
-    [data]
+    [data, chainIds, setIsLoading]
   )
 
   //
@@ -203,7 +211,6 @@ export default function PoolTransactions({
     async function getTransactions() {
       try {
         await getPoolTransactionData()
-
         if (dataFetchInterval) return
         const interval = setInterval(async () => {
           await getPoolTransactionData()
@@ -224,24 +231,21 @@ export default function PoolTransactions({
   // Transform to final transactions
   //
   useEffect(() => {
-    const cancelTokenSource = axios.CancelToken.source()
-
+    if (!cancelToken()) return
     async function transformData() {
       try {
         setIsLoading(true)
-        await getPoolTransactions(cancelTokenSource.token)
+        await getPoolTransactions(cancelToken())
       } catch (error) {
         Logger.error('Error fetching pool transactions: ', error.message)
-      } finally {
-        setIsLoading(false)
       }
     }
     transformData()
 
     return () => {
-      cancelTokenSource.cancel()
+      cancelToken()
     }
-  }, [getPoolTransactions])
+  }, [cancelToken, getPoolTransactions])
 
   return accountId ? (
     <Table

src/components/pages/Profile/History/ComputeJobs/index.tsx

@@ -77,7 +77,7 @@ export default function ComputeJobs({
   const { ocean, account, config, connect } = useOcean()
   const { accountId, networkId } = useWeb3()
   const { ddo } = useAsset()
-  const [isLoading, setIsLoading] = useState(true)
+  const [isLoading, setIsLoading] = useState(false)
   const { chainIds } = useUserPreferences()
   const [jobs, setJobs] = useState<ComputeJobMetaData[]>([])
   const isMounted = useIsMounted()
@@ -95,21 +95,20 @@ export default function ComputeJobs({
   }, [networkId, ocean, connect])
 
   const fetchJobs = useCallback(async () => {
-    if (!chainIds || !accountId) {
+    if (!chainIds || chainIds.length === 0 || !accountId) {
+      setJobs([])
       setIsLoading(false)
       return
     }
-
     try {
       setIsLoading(true)
       const jobs = await getComputeJobs(chainIds, config, ocean, account, ddo)
-      isMounted() && setJobs(jobs)
+      isMounted() && setJobs(jobs.computeJobs)
+      setIsLoading(jobs.isLoaded)
     } catch (error) {
       Logger.error(error.message)
-    } finally {
-      setIsLoading(false)
     }
-  }, [account, accountId, chainIds, ddo, config, ocean])
+  }, [chainIds, accountId, config, ocean, account, ddo, isMounted])
 
   useEffect(() => {
     fetchJobs()

src/components/pages/Profile/History/PoolShares.tsx

@@ -18,6 +18,7 @@ import Decimal from 'decimal.js'
 import { useProfile } from '../../../../providers/Profile'
 import { DDO } from '@oceanprotocol/lib'
 import { useCancelToken } from '../../../../hooks/useCancelToken'
+import { useIsMounted } from '../../../../hooks/useIsMounted'
 import { useUserPreferences } from '../../../../providers/UserPreferences'
 
 Decimal.set({ toExpNeg: -18, precision: 18, rounding: 1 })
@@ -172,10 +173,11 @@ export default function PoolShares({
   const [dataFetchInterval, setDataFetchInterval] = useState<NodeJS.Timeout>()
   const { chainIds } = useUserPreferences()
   const newCancelToken = useCancelToken()
+  const isMounted = useIsMounted()
 
   const fetchPoolSharesAssets = useCallback(
     async (cancelToken: CancelToken) => {
-      if (!poolShares || isPoolSharesLoading) return
+      if (!poolShares || isPoolSharesLoading || !isMounted()) return
 
       try {
         const assets = await getPoolSharesAssets(
@@ -186,9 +188,11 @@ export default function PoolShares({
         setAssets(assets)
       } catch (error) {
         console.error('Error fetching pool shares: ', error.message)
+      } finally {
+        setLoading(false)
       }
     },
-    [poolShares, isPoolSharesLoading]
+    [poolShares, isPoolSharesLoading, isMounted]
   )
 
   useEffect(() => {
@@ -196,7 +200,6 @@ export default function PoolShares({
     async function init() {
       setLoading(true)
       await fetchPoolSharesAssets(cancelToken)
-      setLoading(false)
 
       if (dataFetchInterval) return
       const interval = setInterval(async () => {

src/utils/compute.ts

@@ -66,6 +66,11 @@ interface TokenOrder {
   timestamp: number
 }
 
+interface ComputeResults {
+  computeJobs: ComputeJobMetaData[]
+  isLoaded: boolean
+}
+
 async function getAssetMetadata(
   queryDtList: string,
   cancelToken: CancelToken,
@@ -221,9 +226,13 @@ export async function getComputeJobs(
   ocean: Ocean,
   account: Account,
   ddo?: DDO
-): Promise<ComputeJobMetaData[]> {
+): Promise<ComputeResults> {
   const assetDTAddress = ddo?.dataTokenInfo?.address
-
+  let computeResult: ComputeResults = {
+    computeJobs: [],
+    isLoaded: false
+  }
+  let isLoading = true
   const variables = assetDTAddress
     ? {
         user: account?.getId().toLowerCase(),
@@ -239,16 +248,18 @@ export async function getComputeJobs(
     assetDTAddress ? [ddo?.chainId] : chainIds
   )
   let data: TokenOrder[] = []
-
   for (let i = 0; i < result.length; i++) {
-    if (!result[i]?.tokenOrders) continue
+    if (!result[i]?.tokenOrders || result[i].tokenOrders.length === 0) continue
     result[i]?.tokenOrders.forEach((tokenOrder: TokenOrder) => {
       data.push(tokenOrder)
     })
   }
-
   if (!ocean || !account || !data) return
 
+  if (data.length === 0) {
+    return computeResult
+  }
+
   data = data.sort((a, b) => b.timestamp - a.timestamp)
   const queryDtList = getDtList(data)
   if (queryDtList === '') return
@@ -262,8 +273,13 @@ export async function getComputeJobs(
     ocean
   )
   const computeJobs = await getJobs(providers, account, assets)
+  isLoading = false
+  computeResult = {
+    computeJobs: computeJobs,
+    isLoaded: isLoading
+  }
 
-  return computeJobs
+  return computeResult
 }
 
 export async function createTrustedAlgorithmList(