update

src/components/FullScreenLoaader/FullScreenLoaader.jsx

@@ -2,15 +2,15 @@ import { Box, Spinner, Text, useColorMode } from "@chakra-ui/react";
 import React from "react";
 import bannerImage from "../../assets/images/bannerImg.png";
 
-const FullScreenLoaader = () => {
+const FullScreenLoaader = ({half}) => {
   const { colorMode } = useColorMode();
   return (
     <Box
-      backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"}
+      backgroundImage={colorMode  !== "light" ? !half&& `url(${bannerImage})` : "none"}
       position={"relative"}
       backgroundSize="contain"
       backgroundRepeat="no-repeat"
-      h={"100vh"}
+      h={half ? "50vh":"100vh"}
       w={"100vw"}
       display={"flex"}
       justifyContent={"center"}

src/components/LatestTransactions/LatestTransactions.jsx

@@ -7,6 +7,7 @@ import {
   HStack,
   Icon,
   Image,
+  Spinner,
   Text,
   Tooltip,
   VStack,
@@ -27,6 +28,7 @@ import {
 } from "../../Services/api.service";
 import rbtLogoOutline from "../../assets/images/rubix-filled.svg";
 import { HiOutlineRefresh } from "react-icons/hi";
+import FullScreenLoaader from "../FullScreenLoaader/FullScreenLoaader";
 
 // Define the keyframes
 export const rotate = keyframes`
@@ -168,7 +170,7 @@ const LatestTransactions = () => {
     }
   };
   return (
-    <Container
+    isTransCountLoading? <HStack w={'100%'} justifyContent={'center'} > <Spinner color="purple.700" /></HStack>:<Container
       mt={location?.pathname === "/view-all-transaction" ? 24 : 0}
       mb={location?.pathname === "/view-all-transaction" ? 15 : 0}
       maxW="6xl"

src/components/NavBar/NavBar.jsx

@@ -48,7 +48,7 @@ const NavBar = () => {
         // color={colorMode === "light" ? "light" : "light"}
         padding={"16px 0px"}
         borderBottom={colorMode === "light" ? "1px solid #4023A6" : "none"}
-        bg={colorMode === "light"? "#4023A6":""}
+        bg={colorMode === "light"? "#230A79":""}
       >
         <Container maxW="6xl">
           <Box