feat: loader in between renders of pages (#137)

* feat: loader in between renders of pages

* chore: remove unused import

Author: wainola

src/components/ExplorerTable/ExplorerTable.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Table, TableHead, TableCell, TableBody, TableRow } from "@mui/material"
+import { Table, TableHead, TableCell, TableBody, TableRow, CircularProgress } from "@mui/material"
 import clsx from "clsx"
 import { Link } from "react-router-dom"
 import { EvmBridgeConfig, ResourceTypes, SharedConfigDomain, Transfer } from "../../types"
@@ -144,21 +144,16 @@ const ExplorerTable: React.FC<ExplorerTable> = ({ state, sharedConfig }: Explore
           <TableCell sx={{ borderTopRightRadius: "12px !important" }}>Value</TableCell>
         </TableRow>
       </TableHead>
-      <TableBody>
-        {state.loading === "done" ? (
-          renderTransferList(state.transfers)
-        ) : (
+      {state.loading === "done" && <TableBody>{renderTransferList(state.transfers)}</TableBody>}
+      {state.loading === "loading" && (
+        <TableBody>
           <TableRow>
-            <TableCell>Loading</TableCell>
+            <TableCell colSpan={8} align="center">
+              <CircularProgress />
+            </TableCell>
           </TableRow>
-        )}
-
-        {state.error && (
-          <TableRow>
-            <TableCell>{state.error}</TableCell>
-          </TableRow>
-        )}
-      </TableBody>
+        </TableBody>
+      )}
     </Table>
   )
 }

src/pages/ExplorerPage/hooks/useGetTransferData.ts

@@ -15,6 +15,10 @@ const transferData = async (page: number, limit: number, routes: Routes, dispatc
       type: "fetch_transfers",
       payload: sanitizedTransfers,
     })
+
+    dispatcher({
+      type: "loading_done",
+    })
   } catch (e) {
     dispatcher({
       type: "fetch_transfer_error",
@@ -57,19 +61,14 @@ export function useGetTransferData(
   state: ExplorerPageState,
   explorerContextState: ExplorerContextState,
 ): void {
-  useEffect(() => {
-    if (state.loading === "loading" && state.transfers.length) {
-      dispatcher({
-        type: "loading_done",
-      })
-    }
-  }, [state.loading, state.transfers])
-
   useEffect(() => {
     if (!explorerContextState.account) {
       const {
         queryParams: { page, limit },
       } = explorerContextState
+      dispatcher({
+        type: "loading_transfers",
+      })
       void transferData(page, limit, routes, dispatcher)
     } else {
       const { account } = explorerContextState

src/pages/ExplorerPage/reducer.ts

@@ -6,6 +6,7 @@ export type TransferActions =
   | { type: "fetch_transfer_by_sender"; payload: Transfer[] }
   | { type: "fetch_transfer_by_sender_error"; payload: string }
   | { type: "loading_done" }
+  | { type: "loading_transfers" }
 
 export type ExplorerPageState = {
   transfers: Transfer[]
@@ -20,7 +21,6 @@ export function reducer(state: ExplorerPageState, action: TransferActions): Expl
       return {
         ...state,
         transfers: action.payload,
-        loading: "loading",
         error: undefined,
       }
     case "fetch_transfer_error":
@@ -47,6 +47,11 @@ export function reducer(state: ExplorerPageState, action: TransferActions): Expl
         ...state,
         loading: "done",
       }
+    case "loading_transfers":
+      return {
+        ...state,
+        loading: "loading",
+      }
     default:
       return state
   }