Long story short, I wrote a Suspense-like async loading, native, React <img> component almost two years ago. And today, I've published major changes to react-shimmer. (Thank you Mr. Quarantine 👌🏼).

Introducing the Release v3.0.0 🤙🏼🌠

• Source code has been rewritten in TypeScript.
• Native <img> component props (all of them) are preserved.
• Enforced "separation of concerns" between the actual async handling logic and "loaders". New pluggable-loader architecture.
• Better dependency management + deploy/publish process.
• Zero dependencies.

Check it out! 😇

npm i react-shimmer

yarn add react-shimmer

import React from 'react'
import Image, { Shimmer } from 'react-shimmer'
function App() {
  return (
    <div&gt
      <Image
        src='https://source.unsplash.com/random/800x600'
        fallback={<Shimmer width={800} height={600} />}
      /&gt
    </div>
  )
}

import React from 'react'
import Image from 'react-shimmer'

import Spinner from './Spinner'

function App(props) {
  return (
    <div>
      <Image
        src="https://example.com/test.jpg"
        fallback={<Spinner />}
      />
    </div>
  )
}