Медленное время загрузки response-router-dom с использованиемEffect - PullRequest
Новая
       41

Медленное время загрузки response-router-dom с использованиемEffect

0 голосов
/ 29 июня 2019

Я пытаюсь получить данные с помощью useEffect, но при нажатии на ссылку маршрутизатора, сначала при получении данных и после открытия страницы / комп.Итак, это вызывает медленную загрузку страницы.Как я могу сначала открыть компонент, загружая gif и после сбора данных?

Примечание: я использую api для фотографий jsonplaceholder.Имеется 5 тыс. Фотографий.

Контекст 

const PhotosCtx = React.createContext();

const initialState = {
    photos:[],
    isLoading:true
}
const PhotoProvider = props => {
const [Photos, setPhotos] = useState(initialState)
const values = Photos;

useEffect(()=>{
    const fetchPhoto = async () => {
        const getPhotos = await axios.get('https://jsonplaceholder.typicode.com/photos')
        setPhotos({
            photos:getPhotos.data,
            isLoading:false
        });
    }
    fetchPhoto()
}, [])
    return(
        <PhotosCtx.Provider value={values}>
            {props.children}
        </PhotosCtx.Provider>
    )
}

export {PhotosCtx, PhotoProvider}

Photos.js 

const Photos = () => {
  const value = useContext(PhotosCtx);
  return (
    <div className="container mt-5">
      {value.isLoading ? (
        <div className="text-center">
          <div className="spinner-border" role="status">
            <span className="sr-only">Loading...</span>
          </div>
        </div>
      ) : (
        ""
      )}
      <div className="row">
        {value.photos.map((photo, index) => {
          return (
            <div key={index} className="col-4 mt-3">
              <div className="card" style={{ width: "18rem" }}>
                <div className="card-body">
                  <h5 className="card-title">{photo.albumId}</h5>
                  <h6 className="card-subtitle mb-2 text-muted">
                    {photo.title}
                  </h6>
                  <p className="card-text">{photo.url}</p>
                  <a href="#!" className="card-link">
                    {photo.thumbnailUrl}
                  </a>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};
...