fix: improve loading state management and ensure mounted check in Listings and Markets components

Author: Kay-79

src/components/Dashboard/Listings.tsx

@@ -11,11 +11,18 @@ interface ListingsProps {
 
 const Listings: React.FC<ListingsProps> = ({ filterParams }) => {
     const [listings, setListings] = useState<AuctionDto[]>([]);
+    const [loading, setLoading] = useState<boolean>(true);
     const [currentPage, setCurrentPage] = useState(1);
     const [totalListings, setTotalListings] = useState(0);
     const itemsPerPage = 12;
+    const [mounted, setMounted] = useState(false);
 
     useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    useEffect(() => {
+        setLoading(true);
         const fetchListings = async () => {
             try {
                 const params: Record<string, unknown> = {
@@ -52,13 +59,18 @@ const Listings: React.FC<ListingsProps> = ({ filterParams }) => {
             } catch (error) {
                 console.error("Error fetching Listings:", error);
             }
+            setLoading(false);
         };
 
         fetchListings();
     }, [currentPage, filterParams]);
 
     const canAddToCart = false;
 
+    if (!mounted) {
+        return null;
+    }
+
     return (
         <div>
             <div
@@ -70,7 +82,7 @@ const Listings: React.FC<ListingsProps> = ({ filterParams }) => {
                     justifyContent: "center"
                 }}
             >
-                {listings.length === 0 ? (
+                {listings.length === 0 && !loading ? (
                     <div style={{ textAlign: "center", width: "100%" }}>
                         <h2>No Listings Found</h2>
                         <p>Please adjust your filters or try again later.</p>

src/components/Dashboard/Markets.tsx

@@ -11,12 +11,19 @@ interface MarketsProps {
 
 const Markets: React.FC<MarketsProps> = ({ filterParams }) => {
     const [markets, setMarkets] = useState<AuctionDto[]>([]);
+    const [loading, setLoading] = useState<boolean>(true);
     const [currentPage, setCurrentPage] = useState(1);
     const [totalMarkets, setTotalMarkets] = useState(0);
     const itemsPerPage = 12;
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
 
     useEffect(() => {
         const fetchMarkets = async () => {
+            setLoading(true);
             try {
                 const response = await axios.get(`/api/markets`, {
                     params: {
@@ -31,13 +38,18 @@ const Markets: React.FC<MarketsProps> = ({ filterParams }) => {
             } catch (error) {
                 console.error("Error fetching markets:", error);
             }
+            setLoading(false);
         };
 
         fetchMarkets();
     }, [currentPage, filterParams]);
 
     const canAddToCart = true;
 
+    if (!mounted) {
+        return null;
+    }
+
     return (
         <div>
             <div
@@ -49,9 +61,9 @@ const Markets: React.FC<MarketsProps> = ({ filterParams }) => {
                     justifyContent: "center"
                 }}
             >
-                {markets.length === 0 ? (
+                {markets.length === 0 && !loading ? (
                     <div style={{ textAlign: "center", width: "100%" }}>
-                        <h2>No Listings Found</h2>
+                        <h2>No Listings Found {`${loading}`}</h2>
                         <p>Please adjust your filters or try again later.</p>
                     </div>
                 ) : (

src/services/erc20Contract.ts

@@ -1,16 +1,15 @@
 import { readContract } from "@wagmi/core";
 import { abiERC20 } from "@/abi/abiERC20";
-import { wagmiConfig } from "@/app/wagmi";
+import { getWagmiConfig } from "@/app/wagmi";
 import { USDT_ADDRESS } from "@/constants/constants";
 import { ethers } from "ethers";
 import { shortenNumber } from "@/utils/shorten";
 
 const getBalance = async (address: string): Promise<number> => {
-    if (!wagmiConfig) {
-        throw new Error("wagmiConfig is null");
+    if (!getWagmiConfig()) {
+        throw new Error("getWagmiConfig() is null");
     }
-    // check if the user has enough balance
-    const balance = await readContract(wagmiConfig, {
+    const balance = await readContract(getWagmiConfig(), {
         abi: abiERC20,
         address: USDT_ADDRESS,
         functionName: "balanceOf",