Показать загрузчик

Question

Задача

Прямо сейчас мой код показывает счетчик, указывающий, что я все еще жду ответа от API.

Я не учел, что, хотя мой ответ точен, быстр и заставляет вертеть уходить ...

Фактическая визуализация изображения медленная.

Вопрос

Как отобразить счетчик, пока изображение не отображается?

Код

Главное приложение

import React, { useState } from "react";
import ReactDOM from "react-dom";
import axios from "axios";
import Users from "./components/Users";
import Navbar from "./components/Navbar";
import "./App.css";
import Upload from "./components/Upload";
import Search from "./components/Search";
import Mix from "./components/Mix";

const App = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  const searchUsers = text => {
    axios
      .get(
        `https://api.giphy.com/v1/stickers/search?q=${text}&api_key=${
          process.env.REACT_APP_GIPHY_CLIENT_ID
        }`
      )
      /* Trigger re-render. The users data will now be present in 
       component state and accessible for use/rendering */
      .then(res => setUsers(res.data.data))
      // log error
      .catch(error => console.error(error))
      // set loading finished
      .finally(() => setLoading(false));
  };

  return (
    <div className="App">
      <Navbar />
      <Upload />
      <Search searchUsers={searchUsers} />
      <Mix />
      <div className="ui horizontal inverted divider">
        {" "}
        <i aria-hidden="true" className="youtube icon" />
      </div>
      <div container>
        <Users loading={loading} users={users} />
      </div>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

export default App;

Пользовательский компонент

import React from "react";
import UserItem from "./UserItem";
import Spinner from "./Spinner";

const Users = ({ users, loading }) => {
  if (loading) {
    return <Spinner />;
  } else {
    return (
      <div className="ui relaxed five column grid">
        {users.map(user => (
          <UserItem key={user.id} gif={user.images.original.url} />
        ))}
      </div>
    );
  }
};

export default Users;

Spinner Component

import React from "react";

const Spinner = () => {
  return (
    <div className="ui center aligned fluid container">
      <div className="ui active inline loader" />
    </div>
  );
};

export default Spinner;

Элемент пользовательского элемента

import React from "react";

const UserItem = ({ gif }) => (
  <div className="column">
    <img alt="" src={gif} className="ui image" />
  </div>
);

export default UserItem;

Answer 1

Вы можете использовать метод onLoad для тега img (это одно из двух событий изображения Поддержка React).Когда изображение завершает загрузку, вызывается функция onLoad.

В вашем UserItem компоненте:

const UserItem = ({ gif }) => {
  const [imageLoaded, setImageLoaded] = useState(false);
  return (
    <div className="column">
      { !imageLoaded && <Spinner />}
      <img alt="" src={gif} className="ui image" onLoad={() => setImageLoaded(true} />
    </div>
  )
};