fix(dashboard): NFT IDs pagination

radixdlt · Jan 16, 2024 · 168bcf1 · 168bcf1
1 parent 0578575
commit 168bcf1
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/apps/dashboard/src/pages/search-pages/account/non-fungible/NonFungibleTokensPage.svelte b/apps/dashboard/src/pages/search-pages/account/non-fungible/NonFungibleTokensPage.svelte
@@ -26,7 +26,15 @@
   const loadedLaterNfts: Record<string, GeneralNft[]> = {}
   let isLoading = false
 
-  let currentCursor: string | null | undefined = null
+  let currentCursors: Record<string, string | null | undefined> = {}
+
+  $: {
+    nonFungibleResources.then((data) => {
+      data.forEach((resource) => {
+        currentCursors[resource.address] = null
+      })
+    })
+  }
 
   $: data = Promise.all([stateVersion, account, nfts])
 
@@ -39,18 +47,19 @@
   const fetchMore = (data: GetNonFungibleIdsPageWithDataRequest) => {
     if (
       isLoading ||
-      currentCursor === undefined ||
-      (data.cursor === undefined && currentCursor === null)
+      currentCursors[data.resourceAddress] === undefined ||
+      (data.cursor === undefined &&
+        currentCursors[data.resourceAddress] === null)
     ) {
       return
     }
     isLoading = true
 
     getNonFungiblesIdsPageWithData({
       ...data,
-      cursor: currentCursor || data.cursor
+      cursor: currentCursors[data.resourceAddress] || data.cursor
     }).then(([response, nftDataResponse]) => {
-      currentCursor = response.next_cursor
+      currentCursors[data.resourceAddress] = response.next_cursor
       if (!loadedLaterNfts[data.resourceAddress]) {
         loadedLaterNfts[data.resourceAddress] = []
       }
@@ -144,6 +153,7 @@
         </div>
 
         <InfiniteScroll
+          middlePageMode={true}
           on:thresholdReached={() => {
             fetchMore({
               stateVersion,

diff --git a/packages/ui/src/components/infinite-scroll/InfiniteScroll.svelte b/packages/ui/src/components/infinite-scroll/InfiniteScroll.svelte
@@ -2,6 +2,7 @@
   import { onDestroy, createEventDispatcher, onMount } from 'svelte'
 
   export let threshold = 5
+  export let middlePageMode = false
 
   const dispatch = createEventDispatcher()
   let component: HTMLElement
@@ -65,6 +66,15 @@
   })
 
   const onScroll = (e: any) => {
+    if (middlePageMode) {
+      if (
+        component.parentElement?.clientHeight &&
+        component.parentElement?.clientHeight - e.target.scrollTop < 2500
+      ) {
+        dispatch('thresholdReached')
+      }
+    }
+
     const offset =
       e.target.scrollHeight - e.target.clientHeight - e.target.scrollTop