Избегайте показа элемента, пока обещание выполняется

Question

У меня есть обещание, которое занимает немного времени , как упомянуто в этом вопросе , чтобы выполнить при разрешении значений из API.

Мы хотели показать / скрыть только функцию в определенных случаях. В общих случаях мы хотели, чтобы функция была только видимой.

Проблема в том, что до тех пор, пока обещание не будет выполнено, поле будет видимым. Выполнение обещания занимает 1-1,5 секунды в зависимости от скорости сети. Через 1-1,5 секунды элемент скрыт. Это дает странный опыт конечному пользователю.

Это временная шкала этого безумного опыта пользователя:

1. Время A - Элемент видимый
2. Сумма времени A и 1-1,5 секунды - элемент скрыт

Я пытаюсь понять, есть ли лучший способ справиться с этой ситуацией.

Answer 1

Вы можете использовать условное для этого. В следующем примере показано, как определенные элементы отображаются только после получения данных API.

const { useState } = React;
const { render } = ReactDOM;

function App() {
  const [data, setData] = useState();
  const [isLoading, setIsLoading] = useState(false);
  
  const setLoadingState = () => {
    setData();
    setIsLoading(true);
  }
  
  const getApiData = () => {
    setLoadingState();
    setTimeout(() => { // <-- Add some additional 'delay' for the sake of this demo
      fetch('https://jsonplaceholder.typicode.com/todos/1')
        .then(res => res.json())
        .then(json => setData(JSON.stringify(json, null, 2)))
        .catch(err => setData(JSON.stringify(err, null, 2)))
        .finally(() => setIsLoading(false));    
    }, 1300);
  }
  
  return (
    
      Load API Data
      {data && // <-- Conditional statement, like saying `if (data) { ... }`
        <div>
          I am some fancy html that is hidden before my API data arrives
          {data}

} {isLoading && // <- Еще одно условное .. <h3> Загрузка ... } ); } render ( , document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js"></script>