ギャラリー内のすべての画像がReactのAPIから（フックを使用して）（完全に）読み込まれるまで、読み込みインジケーターを表示します

私はReactを学んでいて、APIを使用して基本的にGiphy検索エンジンである単純なサイトを作成しようとしています。

これまでのところ、データ（トレンドのGiphy画像）を取得して表示しています。問題は、ロードインジケーターの動作が気に入らないことです。少し表示されますが、表示されなくなっても、（40）個の画像がまだコンテナに入力されています。

すべてがロードされたときにのみロードインジケーターを非表示にする方法はありますか？

<Loader>私のローディングインジケーターです。また、いくつかのReactstrapコンポーネントを使用しています。

これが私の現在の2つのコンポーネントです：

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（これが必要かどうかはわかりませんが、念のため）

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