Skip to content

Instantly share code, notes, and snippets.

@dicethedev
Last active April 24, 2023 10:59
Show Gist options
  • Save dicethedev/6231a80ffaa1d69bd153d8912dda7646 to your computer and use it in GitHub Desktop.
Save dicethedev/6231a80ffaa1d69bd153d8912dda7646 to your computer and use it in GitHub Desktop.
possible solution to make the NFT images load faster
//--------------------------------- Method 1 ----------------------------------------
//Here's an example of how you can use the fetch function to fetch an NFT from Pinata:
//In this example, the NFTImage component takes an nftHash prop that represents the hash of the NFT on Pinata.
//The component uses the useState and useEffect hooks to fetch the NFT image from Pinata using the fetch function.
// If the HTTP response is successful, the component sets the image URL in state using the setImageUrl function,
// and renders an img element with the src attribute set to the image URL.
//If the image URL is not available yet, the component displays a "Loading NFT..." message.
import { useState, useEffect } from 'react';
const NFTImage = ({ nftHash }) => {
const [imageUrl, setImageUrl] = useState(null);
useEffect(() => {
async function fetchNFT() {
const response = await fetch(`https://gateway.pinata.cloud/ipfs/${nftHash}`);
if (response.ok) {
const data = await response.json();
setImageUrl(data.url);
}
}
fetchNFT();
}, [nftHash]);
return imageUrl ? (
<img src={imageUrl} alt="NFT" />
) : (
<div>Loading NFT...</div>
);
}
// step1 - Create a new file either in the component folder name it for example "NFTImage.jsx"
//here's an example of how you can use the react-lazyload library to lazy load NFT images in your React.js application:
/* step2 - First, you'll need to install the react-lazyload library using npm or yarn:
* npm install --save react-lazyload
*/
// step3 - Next, you can use the LazyLoad component from react-lazyload to wrap your img element and lazy load the NFT image. Here's an example:
import LazyLoad from 'react-lazyload';
const NFTImage = ({ nftHash }) => {
const imageUrl = `https://gateway.pinata.cloud/ipfs/${nftHash}`;
return (
<LazyLoad height={200} once>
<img src={imageUrl} alt="NFT" />
</LazyLoad>
);
}
/* n this example, the NFTImage component takes an nftHash prop that represents the hash of the NFT on Pinata.
* The component constructs the image URL using the nftHash prop. The LazyLoad component from react-lazyload wraps the img
*element and specifies a height of 200 pixels and the once prop to only load the image once. The src attribute of the img
*element is set to the image URL constructed earlier.
* With this setup, the NFT image will be loaded lazily when the user scrolls to it in the viewport,
* reducing the initial load time of the page and improving the overall performance */
// ------------------------------------- Method 2 -----------------------------------------------
/* In this example, the NFTImage component now wraps the image element with the LazyLoad component from react-lazyload.
*The height prop is set to 200 pixels, which determines the minimum height of the placeholder element that is shown while
*the image is loading. When the LazyLoad component is scrolled into view, it will render its children, which in this case
*is either the image element or the "Loading NFT..." message. With this setup, NFT images will be loaded lazily as they are
*scrolled into view, reducing the initial load time of your page and improving the user experience. */
import { useState } from 'react';
import LazyLoad from 'react-lazyload';
const NFTImage = ({ nftHash }) => {
const [imageUrl, setImageUrl] = useState(null);
useEffect(() => {
async function fetchNFT() {
const response = await fetch(`https://gateway.pinata.cloud/ipfs/${nftHash}`);
if (response.ok) {
const data = await response.json();
setImageUrl(data.url);
}
}
fetchNFT();
}, [nftHash]);
return (
<LazyLoad height={200}>
{imageUrl ? (
<img src={imageUrl} alt="NFT" />
) : (
<div>Loading NFT...</div>
)}
</LazyLoad>
);
}
// --------------------------------------------- Method 3 -------------------------------------------
//using caching method
//npm install file-saver
import { useState, useEffect } from 'react';
import { saveAs } from 'file-saver';
const NFTImage = ({ nftHash }) => {
const [imageUrl, setImageUrl] = useState(null);
useEffect(() => {
async function fetchNFT() {
const cachedImage = localStorage.getItem(nftHash);
if (cachedImage) {
setImageUrl(cachedImage);
} else {
const response = await fetch(`https://gateway.pinata.cloud/ipfs/${nftHash}`);
if (response.ok) {
const data = await response.json();
setImageUrl(data.url);
localStorage.setItem(nftHash, data.url);
// Optional: save image file to user's device for offline viewing
const blob = await fetch(data.url).then(res => res.blob());
saveAs(blob, `${nftHash}.png`);
}
}
}
fetchNFT();
}, [nftHash]);
return imageUrl ? (
<img src={imageUrl} alt="NFT" />
) : (
<div>Loading NFT...</div>
);
}
/* In this example, the fetchNFT function first checks if a cached copy of the image exists in the user's
* browser by calling localStorage.getItem(nftHash). If a cached copy exists, it sets the image URL using the
* setImageUrl function and skips the network request. If a cached copy does not exist, the function fetches
* the NFT image from Pinata using the fetch function and stores the image URL in the user's browser cache using
* the localStorage.setItem(nftHash, data.url) function. Additionally, this example also includes an optional
* feature to save the image file to the user's device for offline viewing using the file-saver library.
* With this setup, if a user reloads the page or navigates away from it and comes back later,
* the NFT images will be loaded from the cache, reducing the load time and improving the user experience.
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment