Показывать индикатор загрузки до тех пор, пока все изображения в галерее (полностью) не будут загружены из API в React (с помощью хуков) - PullRequest
Новая
       24

Показывать индикатор загрузки до тех пор, пока все изображения в галерее (полностью) не будут загружены из API в React (с помощью хуков)

1 голос
/ 17 января 2020

Я изучаю React и пытаюсь сделать простой сайт, который по сути является поисковой системой Giphy, используя их API.

Пока все хорошо, я получаю и отображаю данные (популярный Giphy картинки). Проблема в том, что мне не нравится, как работает мой индикатор загрузки. Это показывает немного, но когда это исчезает, (40) изображения все еще заполняются в контейнере.

Можно ли сделать так, чтобы индикатор загрузки исчезал только тогда, когда все загружено?

<Loader> - мой индикатор загрузки. Я также использую некоторые компоненты Reactstrap.

Вот мои текущие 2 компонента:

Приложение. 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

Ответы [ 2 ]

0 голосов
/ 17 января 2020

Отметив эту ссылку, вы можете вести подсчет в состоянии и гарантировать, что все изображения загружаются нажатием 0. Поэтому loading = loading.state и imageload.state.count! = 0.

https://www.javascriptstuff.com/detect-image-load/

0 голосов
/ 17 января 2020

Глядя на этот вопрос SO похоже, вы можете предоставить onLoad реквизит для img (я предполагаю, что это то, что вы используете под капотом CardImg). Если это так, вы можете отключить функцию каждой из этих функций после их загрузки, отслеживать их в родительском компоненте, и когда количество изображений, полученных вами из fetch, будет соответствовать количеству загруженных изображений, затем вы можете удалить индикатор загрузки.

Это делает несколько предположений. Дайте мне знать, если вы хотите, чтобы я наметил этот поток для вас.

...