I'm learning React and I'm trying to make a simple site which is basically a Giphy search engine by using their API.
So far so good I am fetching and displaying data (the trending Giphy images). The problem is that I don't like how my loading indicator works. It shows for a bit but when it disappears, the (40) images are still being populated in the container.
Is there a way that I can make the loading indicator disappear only when everything is loaded?
<Loader>
is my loading indicator. I'm also using some Reactstrap components.
Here are my current 2 components:
App.js
import React, { useState, useEffect } from 'react'
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css"
import Loader from 'react-loader-spinner'
import Results from './Components/Results'
import { UncontrolledAlert } from 'reactstrap'
function App() {
const [isLoading, setLoading] = useState(true)
const [gifsData, setGifsData] = useState([])
const [errorMessage, setErrorMessage] = useState('')
useEffect(() => {
const giphyTrending = async () => {
await fetch(`https://api.giphy.com/v1/gifs/trending?api_key=OGINPHAsY1NNNhf6XIlpX1OygKXDFfXV&limit=50&rating=R`)
.then(res => res.json())
.then(data => {
setGifsData(data.data)
setLoading(false)
})
.catch(err => setErrorMessage(err.message))
}
giphyTrending()
}, [])
if (errorMessage) {
return (
<div>
<UncontrolledAlert color="secondary">{errorMessage}</UncontrolledAlert>
</div>
)
}
return (
<div className='App'>
{isLoading ?
<Loader className='loader' type="Circles" color="yellow" height={120} width={120} />
:
<Results isLoading={isLoading} gifsData={gifsData} />}
</div>
)
}
export default App
Results.jsx (not sure this one is needed but just in case)
const Results = (props) => {
return (
<div className='gifsContainer'>
{props.gifsData.map(gif => (
<div key={gif.id}>
<CardImg className='gifs' src={gif.images.fixed_height_small.url} alt={gif.title} />
</div>))}
</div>
)
}
export default Results