Improve your iframe UX with React LoadingIframes

Iframes can take a long time to load depending on the source. While your user is waiting it's preferable to give feedback on what is happening with their page, and why they are staring at a blank screen.

Using react-loading-iframe you can show a skeleton that is displayed until the content of the iframe is ready.

Install using npm i react-loading-iframe

Then include on your react components the following way:

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}
    />
  );
};

Any suggestions on this are welcome as this is my first open source repository! Please give it a try.