How can I set react-lazyload placeholder prop to none when it reaches the end of an array?

Question

I'm using the react-lazyload library for my react js project .

import LazyLoad from 'react-lazyload';

I'm fetching data with useEffect at first :

const [ stuff, setStuff ] = React.useState(null);
    React.useEffect(() => {
        Axios.get('https://jsonplaceholder.typicode.com/posts')
            .then((res) => setStuff(res.data))
            .catch((err) => console.log(err.message));
    }, []);

Then I display stuff array with lazyload and it works perfectly fine :

    {stuff ? (
                stuff.map((each) => {
                    return (
                            <LazyLoad
                                offset={[ -100, 100 ]}
                                placeholder={<h2>loading...</h2>}
                                key={each.id}
                            >
                                <h3 style={{ margin: 20 }}>{each.title}</h3>
                                <LazyLoad once={true} placeholder={`https://picsum.photos/id/${each.id}/5/5`}>
                                    <img
                                        data-aos-duration="2000"
                                        data-aos="fade"
                                        src={`https://picsum.photos/id/${each.id}/200/200`}
                                    />
                                </LazyLoad>
                            </LazyLoad>
                    );
                })
            ) : null}

So first it displays the placeholder prop for each item which is

loading...

and by scrolling down it displays the actual item .

The only problem is it doesn't know when the items are finished and there are no items to display so when you reach to end of the screen and the items are finished it still shows the

loading...

.

How can I tell the length of the stuff array so it doesn't display the loading thing when it reaches the end of array ?

Answer 1

I fixed the issue by adding height and width of 100px to the tags with the loading text inside .