Does anyone working with nft per page??

[bboynam99]

the market page take time with 10000 items loading doss anyone working with items load 30 per page eg... ?!?

[halfdoctor]

You might be able to use the following,

import { useContract, useNFTs, useTotalCount } from "@thirdweb-dev/react";
import React, { useCallback, useState, useEffect } from "react";
import Container from "../../components/Container/Container";
import NFTGrid from "../../components/NFT/NFTGrid";
import { NFT_COLLECTION_ADDRESS } from "../../const/contractAddresses";
import { NFT, SmartContract } from "@thirdweb-dev/sdk";
import { BaseContract } from "ethers";
import { SearchIcon } from "../../util/icons/SearchIcon";
import styles from "../../styles/Home.module.css";

const LoadSupply = (contract: SmartContract<BaseContract> | undefined) => {

  const { data: count, isLoading, error } = useTotalCount(contract);
  if (!isLoading) {
    return count?.toNumber();
  }
}

export default function Buy() {
  // Load all of the NFTs from the NFT Collection
  const { contract } = useContract(NFT_COLLECTION_ADDRESS);
  const [start, setStart] = useState(1)
  const [end, setEnd] = useState(20);
  const [searchId, setSearchId] = useState(""); // State to store the search ID
  const [searchedNFT, setSearchedNFT] = useState<NFT | null>(null);

  const loadMore = () => {
    setStart(end)
    setEnd(end + 20)
  }

  const supply = LoadSupply(contract)

  const { data, isLoading } = useNFTs(contract, { start: start, count: end });

  //const { data, isLoading } = useNFTs(contract);

  // Function to fetch NFT by ID
  const fetchNFTById = useCallback(async () => {
    try {
      if (searchId && contract) {
        const nft = await contract.erc721.get(searchId);
        setSearchedNFT(nft);
      }
    } catch (error) {
      console.error("Error fetching NFT by ID:", error);
    }
  }, [searchId, contract]);

  useEffect(() => {
    if (searchId) {
      fetchNFTById();
    }
  }, [searchId, fetchNFTById]);

  return (
    <Container maxWidth="lg">
      <h1>One Mint Genesis</h1>
      <p>Check out the dynamic NFTs from the One Mint Genesis (OMG) project.</p>

{/* Search input */}
<h3>Search:
<div className={styles.secondaryCta}>

  <SearchIcon />
  <input
    type="text"
    placeholder="Search by ID"
    value={searchId}
    onChange={(e) => setSearchId(e.target.value)}
    className={styles.secondaryCta}
  />
</div></h3> {/* Add this line for the text */}

{/* Display searched NFT if found */}
{searchedNFT ? (
  <div>
    <NFTGrid isLoading={false} data={[searchedNFT]} /> {/* Pass the searchedNFT as an array */}
  </div>
) : null}

      <NFTGrid
        data={data}
        isLoading={isLoading}
        emptyText={
          "Looks like there are no NFTs in this collection."
        }
      />
        <button
                  onClick={loadMore}
                  style={{
                    backgroundColor: "#191c1f",
                    color: "#fff",
                    padding: "10px 20px",
                    fontSize: "16px",
                    fontWeight: "500",
                    letterSpacing: "0.2px",
                    border: "1px solid hsla(0, 0%, 100%, 0.25)",
                    borderRadius: "10px",
                    cursor: "pointer",
                    position: "fixed",
                    bottom: "20px", // Adjust the distance from the bottom as needed
                    right: "15px", // Adjust the distance from the right as needed
                    transition: "all 0.15s ease-in-out",
                  }}
                >
          Load more...
        </button>
    </Container>
  );
}

[bboynam99]

Thank you very much! I will try