From dbc2496b8f42323333582e1fd9cf4ab46830db54 Mon Sep 17 00:00:00 2001
From: SeanM322 <sean@rair.tech>
Date: Tue, 15 Oct 2024 14:39:51 +0300
Subject: [PATCH] add loader for next page in CollectionPage

---
 .../MockUpPage/NftList/NftData/NftCollectionPage.tsx |  5 +++--
 rair-front/src/redux/tokenSlice.ts                   | 12 ++++++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/rair-front/src/components/MockUpPage/NftList/NftData/NftCollectionPage.tsx b/rair-front/src/components/MockUpPage/NftList/NftData/NftCollectionPage.tsx
index 8644f28b..c85a3f60 100644
--- a/rair-front/src/components/MockUpPage/NftList/NftData/NftCollectionPage.tsx
+++ b/rair-front/src/components/MockUpPage/NftList/NftData/NftCollectionPage.tsx
@@ -70,7 +70,8 @@ const NftCollectionPageComponent: FC<INftCollectionPageComponent> = ({
     currentCollection,
     currentCollectionTotal,
     currentCollectionStatus,
-    currentCollectionMetadata
+    currentCollectionMetadata,
+    currentCollectionNextPageStatus
   } = useAppSelector((store) => store.tokens);
 
   const { width } = useWindowDimensions();
@@ -781,7 +782,7 @@ const NftCollectionPageComponent: FC<INftCollectionPageComponent> = ({
           </div>
         )}
       </div>
-      {isLoading && (
+      {currentCollectionNextPageStatus && (
         <div className="progress-token">
           <CircularProgress
             style={{
diff --git a/rair-front/src/redux/tokenSlice.ts b/rair-front/src/redux/tokenSlice.ts
index 29d28d55..7b553caa 100644
--- a/rair-front/src/redux/tokenSlice.ts
+++ b/rair-front/src/redux/tokenSlice.ts
@@ -94,6 +94,7 @@ export interface TokensState {
   currentCollectionStatus: dataStatuses;
   currentCollectionTotal: number;
   currentCollection: { [index: string]: CollectionTokens };
+  currentCollectionNextPageStatus: boolean;
   currentCollectionMetadata: MetadataForCollection;
   currentCollectionMetadataStatus: dataStatuses;
   itemsPerPage: number;
@@ -110,6 +111,7 @@ const initialState: TokensState = {
   currentCollectionStatus: dataStatuses.Uninitialized,
   currentCollectionTotal: 0,
   currentCollection: {},
+  currentCollectionNextPageStatus: false,
   currentCollectionParams: undefined,
   // Collection contract data
   currentCollectionMetadataStatus: dataStatuses.Uninitialized,
@@ -314,6 +316,7 @@ export const tokenSlice = createSlice({
       state.currentCollectionStatus = dataStatuses.Uninitialized;
       state.currentCollectionTotal = 0;
       state.currentCollection = {};
+      state.currentCollectionNextPageStatus = false;
       state.currentCollectionMetadataStatus = dataStatuses.Uninitialized;
       state.currentCollectionMetadata = {};
       state.currentCollectionParams = undefined;
@@ -360,6 +363,10 @@ export const tokenSlice = createSlice({
       })
 
       // Reuse collection data for next page
+      .addCase(loadNextCollectionPage.pending, (state) => {
+        state.currentCollectionNextPageStatus = true;
+      })
+
       .addCase(
         loadNextCollectionPage.fulfilled,
         (state, action: PayloadAction<GetCollectionResponse | undefined>) => {
@@ -368,10 +375,15 @@ export const tokenSlice = createSlice({
               state.currentCollection[token.uniqueIndexInContract.toString()] =
                 token;
             });
+            state.currentCollectionNextPageStatus = false;
           }
         }
       )
 
+      .addCase(loadNextCollectionPage.rejected, (state) => {
+        state.currentCollectionNextPageStatus = false;
+      })
+
       // Load metadata for collection
       .addCase(loadCollectionMetadata.pending, (state) => {
         state.currentCollectionMetadataStatus = dataStatuses.Loading;