React | Как показывать заглушку пока загружается iframe?

Question

[mosikus]

У меня стоит фрейм, прогрузка которого занимает достаточно времени. Как я могу в реакте сделать для него заглушку во время прогрузки ?

<div id="loadImg"><div><img src="loading.gif" /></div></div>
<iframe src="...." onload="document.getElementById('loadImg').style.display='none';"></iframe>

Answer 1

[Антон Спирин]

const Example = () => {
  const [isLoading, setLoading] = useState(true);

  const handleOnLoad = () => {
    setLoading(false);
  };

  return (
    <>
      {isLoading && <Preloader />}
      <iframe 
        title="iframe"
        src="..."
        onLoad={handleOnLoad}
      />
    </>
  );
};

Comments

[Mikhail Osher]

Помню у React были проблемы с re-render iframe. Сейчас уже гуд работает?

[Петр Мухуров]

return (
    <elem />
    <elem />
  );

если не ошибаюсь, такая конструкция плюнет ошибку

[Антон Спирин]

Mikhail Osher, ну мне iframe всего один раз приходилось использовать. Как раз была похожая задача, надо было встроить в приложение сгенерированную статичную документацию по публичному API. Я ее загружал AJAX запросом и по загрузке добавлял свойством srcDoc, убирал прелоадер и снимал с iframe нулевой opacity.
Все работало без нареканий. Правда пришлось поломать голову как роутинг закостылить.

Петр Мухуров, да, все верно. Поправил. Спасибо!