upddaate

src/pages/Transaction/TransactionDetails.jsx

@@ -25,12 +25,18 @@ import rbtLogoOutline from "../../assets/images/rubix-filled.svg";
 import rbtLogoDark from "../../assets/images/RBTLogo.svg";
 import { formatUTCToDDMMYYHHMMSS } from "../../Constants/Constants";
 import NormalTable from "../../components/DataTable/NormalTable";
+import FullScreenLoaader from "../../components/FullScreenLoaader/FullScreenLoaader";
 
 const TransactionDetails = () => {
   const navigate = useNavigate();
   const params = useParams();
   const { colorMode } = useColorMode();
-  const { data, isLoading, refetch, errors } = useGetTransByIdQuery(params?.id);
+
+  const { data, 
+    isLoading, 
+    isFetching,
+    refetch, errors } = useGetTransByIdQuery(params?.id);
+
   // Scroll to top when component mounts or params change
   useEffect(() => {
     window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change
@@ -40,6 +46,7 @@ const TransactionDetails = () => {
     (item) => item?.description === params?.id
   );
   const toast = useToast();
+
   function copyToClipboard(text) {
     navigator.clipboard
       .writeText(text)
@@ -69,7 +76,6 @@ const TransactionDetails = () => {
     }
   }, [data]);
   
-  console.log(dataArray);
 
   // ===============================[ Table Header ]
   const tableHeadRow = [
@@ -94,11 +100,6 @@ const TransactionDetails = () => {
     ),
   }));
 
-  console.log(data?.data?.blockNumber);
-
-
-
-    
 
   const [ isLoadingURL, setIsLoading ] = useState(false)
 
@@ -130,7 +131,7 @@ const TransactionDetails = () => {
 
   return (
     <>
-      <Box
+      {isFetching?<FullScreenLoaader/>:<Box
         bg={colorMode === "light" ? "#f5f5f7" : "none"}
         backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"}
         backgroundSize="cover"
@@ -737,7 +738,7 @@ const TransactionDetails = () => {
 
           {dataArray && <TransactionTable data={dataArray} />}
         </Container>
-      </Box>
+      </Box>}
       <RelatedTransactions />
     </>
   );