feat: fetch related data lazily (#68)

* feat: fetch assets within account on demand
* fix: lazy load table loading animation issue

Author: neilcampbell

src/features/accounts/components/account-asset-holdings-table-columns.tsx

@@ -1,17 +1,24 @@
 import { ColumnDef } from '@tanstack/react-table'
 import { DisplayAssetAmount } from '@/features/common/components/display-asset-amount'
 import { AssetHolding } from '../models'
-import { AssetLink } from '@/features/assets/components/asset-link'
+import { AssetIdLink } from '@/features/assets/components/asset-link'
+import { AssetSummary } from '@/features/assets/models'
+import { AsyncMaybeAtom } from '@/features/common/data/types'
+import { RenderInlineAsyncAtom } from '@/features/common/components/render-inline-async-atom'
 
 export const accountAssetHoldingsTableColumns: ColumnDef<AssetHolding>[] = [
   {
     header: 'ID',
-    accessorFn: (item) => item.asset.id,
-    cell: (c) => <AssetLink assetId={c.getValue<number>()} />,
+    accessorFn: (item) => item.assetId,
+    cell: (c) => <AssetIdLink assetId={c.getValue<number>()} />,
   },
   {
     header: 'Name',
-    accessorFn: (item) => item.asset.name,
+    accessorFn: (item) => item.asset,
+    cell: (c) => {
+      const assetSummaryAtom = c.getValue<AsyncMaybeAtom<AssetSummary>>()
+      return <RenderInlineAsyncAtom atom={assetSummaryAtom}>{(asset) => asset.name}</RenderInlineAsyncAtom>
+    },
   },
   {
     header: 'Amount',

src/features/accounts/components/account-assets-created.tsx

@@ -1,7 +1,10 @@
 import { ColumnDef } from '@tanstack/react-table'
-import { AccountAssetSummary } from '../models'
 import { DataTable } from '@/features/common/components/data-table'
-import { AssetLink } from '@/features/assets/components/asset-link'
+import { AssetIdLink } from '@/features/assets/components/asset-link'
+import { AccountAssetSummary } from '../models'
+import { AssetSummary } from '@/features/assets/models'
+import { AsyncMaybeAtom } from '@/features/common/data/types'
+import { RenderInlineAsyncAtom } from '@/features/common/components/render-inline-async-atom'
 
 type Props = {
   assetsCreated: AccountAssetSummary[]
@@ -10,16 +13,24 @@ type Props = {
 const assetsCreatedTableColumns: ColumnDef<AccountAssetSummary>[] = [
   {
     header: 'ID',
-    accessorFn: (item) => item.id,
-    cell: (c) => <AssetLink assetId={c.getValue<number>()} />,
+    accessorFn: (item) => item.assetId,
+    cell: (c) => <AssetIdLink assetId={c.getValue<number>()} />,
   },
   {
     header: 'Name',
-    accessorFn: (item) => item.name,
+    accessorFn: (item) => item.asset,
+    cell: (c) => {
+      const assetSummaryAtom = c.getValue<AsyncMaybeAtom<AssetSummary>>()
+      return <RenderInlineAsyncAtom atom={assetSummaryAtom}>{(asset) => asset.name}</RenderInlineAsyncAtom>
+    },
   },
   {
     header: 'Unit',
-    accessorFn: (item) => item.unitName,
+    accessorFn: (item) => item.asset,
+    cell: (c) => {
+      const assetSummaryAtom = c.getValue<AsyncMaybeAtom<AssetSummary>>()
+      return <RenderInlineAsyncAtom atom={assetSummaryAtom}>{(asset) => asset.unitName}</RenderInlineAsyncAtom>
+    },
   },
 ]
 

src/features/accounts/data/account-transaction-history.ts

@@ -57,9 +57,9 @@ export const createLoadableAccountTransactionsPage = (address: Address) => {
   return createLoadableViewModelPageAtom({
     fetchRawData: (nextPageToken?: string) => createAccountTransactionResultsAtom(address, nextPageToken),
     createViewModelPageAtom: (store, rawDataPage) =>
-      atom(async (get) => {
+      atom((get) => {
         return {
-          items: await get(createTransactionsAtom(store, rawDataPage.items)),
+          items: get(createTransactionsAtom(store, rawDataPage.items)),
           hasNextPage: rawDataPage.hasNextPage,
         }
       }),

src/features/accounts/data/account.ts

@@ -10,7 +10,7 @@ import { createAssetResolver } from '@/features/assets/data'
 const createAccountAtom = (store: JotaiStore, address: Address) => {
   return atom(async (get) => {
     const accountResult = await get(getAccountResultAtom(store, address))
-    return asAccount(accountResult, createAssetResolver(store, get))
+    return asAccount(accountResult, createAssetResolver(store))
   })
 }
 

src/features/accounts/mappers/index.ts

@@ -2,25 +2,10 @@ import { AssetSummary } from '@/features/assets/models'
 import { AccountResult, AssetHoldingResult, AssetResult } from '../data/types'
 import { Account, AccountAssetSummary, AssetHolding } from '../models'
 import { microAlgos } from '@algorandfoundation/algokit-utils'
+import { AsyncMaybeAtom } from '@/features/common/data/types'
 
-export const asAccount = async (
-  accountResult: AccountResult,
-  assetResolver: (assetId: number) => Promise<AssetSummary> | AssetSummary
-): Promise<Account> => {
-  const asAccountAssetSummary = createAccountSummaryMapper(assetResolver)
-
-  const assetsHoldings = await asAssetHoldings(accountResult.assets ?? [], asAccountAssetSummary)
-  const [assetsHeld, assetsOpted] = assetsHoldings.reduce(
-    (acc, asset) => {
-      if (asset.amount === 0) {
-        acc[1].push(asset)
-      } else {
-        acc[0].push(asset)
-      }
-      return acc
-    },
-    [[], []] as [AssetHolding[], AssetHolding[]]
-  )
+export const asAccount = (accountResult: AccountResult, assetResolver: (assetId: number) => AsyncMaybeAtom<AssetSummary>): Account => {
+  const [assetsHeld, assetsOpted] = asAssetHoldings(accountResult.assets ?? [], assetResolver)
 
   return {
     address: accountResult.address,
@@ -29,44 +14,43 @@ export const asAccount = async (
     applicationsCreated: (accountResult['created-apps'] ?? []).map((app) => ({ id: app.id })),
     applicationsOpted: (accountResult['apps-local-state'] ?? []).map((app) => ({ id: app.id })),
     assetsHeld,
-    assetsCreated: await asAccountAssetSummaries(accountResult['created-assets'] ?? [], asAccountAssetSummary),
+    assetsCreated: asAccountAssetSummaries(accountResult['created-assets'] ?? [], assetResolver),
     assetsOpted,
     rekeyedTo: accountResult['auth-addr'],
     json: accountResult,
   }
 }
 
-const createAccountSummaryMapper =
-  (assetResolver: (assetId: number) => Promise<AssetSummary> | AssetSummary) =>
-  async (asset: AssetResult | AssetHoldingResult): Promise<AccountAssetSummary> => {
-    const assetId = 'index' in asset ? asset.index : asset['asset-id']
-    const { clawback: _clawback, ...assetSummary } = await assetResolver(assetId)
-    return assetSummary
-  }
-
-const asAssetHoldings = async (
+const asAssetHoldings = (
   heldAssets: AssetHoldingResult[],
-  asAccountSummary: (asset: AssetHoldingResult) => Promise<AccountAssetSummary>
-): Promise<AssetHolding[]> => {
-  return Promise.all(
-    heldAssets.map(async (asset) => {
-      const assetSummary = await asAccountSummary(asset)
-      return {
-        asset: assetSummary,
-        amount: asset.amount,
-        isFrozen: asset['is-frozen'],
+  assetResolver: (assetId: number) => AsyncMaybeAtom<AssetSummary>
+): [AssetHolding[], AssetHolding[]] =>
+  heldAssets.reduce(
+    (acc, result) => {
+      const assetId = result['asset-id']
+      const asset = {
+        assetId,
+        asset: assetResolver(assetId),
+        amount: result.amount,
+        isFrozen: result['is-frozen'],
       }
-    })
+      if (result.amount === 0) {
+        acc[1].push(asset)
+      } else {
+        acc[0].push(asset)
+      }
+      return acc
+    },
+    [[], []] as [AssetHolding[], AssetHolding[]]
   )
-}
 
-const asAccountAssetSummaries = async (
+const asAccountAssetSummaries = (
   createdAssets: AssetResult[],
-  asAccountSummary: (asset: AssetResult) => Promise<AccountAssetSummary>
-): Promise<AccountAssetSummary[]> => {
-  return Promise.all(
-    createdAssets.map(async (asset) => {
-      return await asAccountSummary(asset)
-    })
-  )
-}
+  assetResolver: (assetId: number) => AsyncMaybeAtom<AssetSummary>
+): AccountAssetSummary[] =>
+  createdAssets.map((asset) => {
+    return {
+      assetId: asset.index,
+      asset: assetResolver(asset.index),
+    }
+  })

src/features/accounts/models/index.ts

@@ -2,11 +2,15 @@ import { AlgoAmount } from '@algorandfoundation/algokit-utils/types/amount'
 import { Address } from '../data/types'
 import { AssetSummary } from '@/features/assets/models'
 import { ApplicationId } from '@/features/applications/data/types'
+import { AssetId } from '@/features/assets/data/types'
+import { AsyncMaybeAtom } from '@/features/common/data/types'
 
-export type AccountAssetSummary = Omit<AssetSummary, 'clawback'>
+export type AccountAssetSummary = {
+  assetId: AssetId
+  asset: AsyncMaybeAtom<AssetSummary>
+}
 
-export type AssetHolding = {
-  asset: AccountAssetSummary
+export type AssetHolding = AccountAssetSummary & {
   amount: number | bigint
   isFrozen: boolean
 }

src/features/applications/data/application-transaction-history.ts

@@ -57,9 +57,9 @@ export const createLoadableApplicationTransactionsPage = (applicationID: Applica
   return createLoadableViewModelPageAtom({
     fetchRawData: (nextPageToken?: string) => createApplicationTransactionResultsAtom(applicationID, nextPageToken),
     createViewModelPageAtom: (store, rawDataPage) =>
-      atom(async (get) => {
+      atom((get) => {
         return {
-          items: await get(createTransactionsAtom(store, rawDataPage.items)),
+          items: get(createTransactionsAtom(store, rawDataPage.items)),
           hasNextPage: rawDataPage.hasNextPage,
         }
       }),

src/features/assets/components/asset-link.tsx

@@ -2,24 +2,62 @@ import { cn } from '@/features/common/utils'
 import { TemplatedNavLink } from '@/features/routing/components/templated-nav-link/templated-nav-link'
 import { Urls } from '@/routes/urls'
 import { PropsWithChildren } from 'react'
+import { AssetSummary } from '../models'
+import { AsyncMaybeAtom } from '@/features/common/data/types'
+import { RenderInlineAsyncAtom } from '@/features/common/components/render-inline-async-atom'
 
-type Props = PropsWithChildren<{
-  assetId: number
-  assetName?: string
+type CommonProps = {
   className?: string
-}>
+}
+
+type AssetIdLinkProps = PropsWithChildren<
+  {
+    assetId: number
+  } & CommonProps
+>
+
+type AssetIdAndNameLinkProps = PropsWithChildren<
+  {
+    assetId: number
+    assetName?: string
+  } & CommonProps
+>
 
-export function AssetLink({ assetId, assetName, className, children }: Props) {
+type AssetLinkProps = PropsWithChildren<
+  {
+    asset: AssetSummary | AsyncMaybeAtom<AssetSummary>
+  } & CommonProps
+>
+
+function Link(props: AssetIdLinkProps | AssetIdAndNameLinkProps) {
   return (
     <span>
       <TemplatedNavLink
-        className={cn(!children && 'text-primary underline', className)}
+        className={cn(!props.children && 'text-primary underline', props.className)}
         urlTemplate={Urls.Explore.Asset.ById}
-        urlParams={{ assetId: assetId.toString() }}
+        urlParams={{ assetId: props.assetId.toString() }}
       >
-        {children ? children : assetId}
+        {props.children ? props.children : props.assetId}
       </TemplatedNavLink>
-      {assetName && ` (${assetName})`}
+      {'assetName' in props && props.assetName && ` (${props.assetName})`}
     </span>
   )
 }
+
+export function AssetLink({ asset, className }: AssetLinkProps) {
+  return 'read' in asset ? (
+    <RenderInlineAsyncAtom atom={asset}>
+      {(asset) => <Link assetId={asset.id} assetName={asset.name} className={className} />}
+    </RenderInlineAsyncAtom>
+  ) : (
+    <Link assetId={asset.id} assetName={asset.name} className={className} />
+  )
+}
+
+export function AssetIdAndNameLink({ assetId, assetName, className }: AssetIdAndNameLinkProps) {
+  return <Link assetId={assetId} assetName={assetName} className={className} />
+}
+
+export function AssetIdLink({ assetId, className }: AssetIdLinkProps) {
+  return <Link assetId={assetId} className={className} />
+}

src/features/assets/data/asset-summary.ts

@@ -1,15 +1,12 @@
-import { Getter, atom } from 'jotai'
+import { atom } from 'jotai'
 import { JotaiStore } from '@/features/common/data/types'
 import { asAssetSummary } from '../mappers/asset-summary'
 import { AssetId } from './types'
 import { getAssetResultAtom } from './asset-result'
-import { AssetSummary } from '../models'
 
-export const createAssetResolver =
-  (store: JotaiStore, get: Getter) =>
-  (assetId: AssetId): Promise<AssetSummary> => {
-    return get(createAssetSummaryAtom(store, assetId))
-  }
+export const createAssetResolver = (store: JotaiStore) => (assetId: AssetId) => {
+  return createAssetSummaryAtom(store, assetId)
+}
 
 export const createAssetSummaryAtom = (store: JotaiStore, assetId: AssetId) => {
   return atom(async (get) => {

src/features/assets/data/asset-transaction-history.ts

@@ -57,9 +57,9 @@ export const createLoadableAssetTransactionsPage = (assetId: AssetId) => {
   return createLoadableViewModelPageAtom({
     fetchRawData: (nextPageToken?: string) => createAssetTransactionResultsAtom(assetId, nextPageToken),
     createViewModelPageAtom: (store, rawDataPage) =>
-      atom(async (get) => {
+      atom((get) => {
         return {
-          items: await get(createTransactionsAtom(store, rawDataPage.items)),
+          items: get(createTransactionsAtom(store, rawDataPage.items)),
           hasNextPage: rawDataPage.hasNextPage,
         }
       }),