Улучшите пользовательский интерфейс iframe с помощью React LoadingIframes

Загрузка iframe может занимать много времени в зависимости от источника. Пока пользователь ждет, желательно дать ему обратную связь о том, что происходит с его страницей, и почему он смотрит на пустой экран.

Используя react-loading-iframe, вы можете показать скелет, который будет отображаться до тех пор, пока содержимое iframe не будет готово.

Установите с помощью npm i react-loading-iframe.

Затем включите в свои компоненты react следующим образом:

import LoadingIframe from 'react-loading-iframe';

const Skeleton = () => {
  return <div>Cool loading screen</div>;
};

export const BasicExample = () => {
  return (
    <LoadingIframe
      skeleton={<Skeleton />}
      src="https://google.com"
      className="your-class"
      frameBorder={0}
    />
  );
};

Любые предложения по этому поводу приветствуются, так как это мой первый репозиторий с открытым исходным кодом! Пожалуйста, попробуйте.