TLDR, I wrote a Suspense-like async loading, native, performant React <img> component library.

Today, I’ve published major changes to it, wanting to hear feedback from the community.

A short quote from HTML Spec on why do we need a separate library like react-shimmer :

Without the decode() method, the process of loading an img element and then displaying it might look like the following:

const img = new Image(); img.src = “nebula.jpg”;

img.onload = () => { document.body.appendChild(img); };

However, this can cause notable dropped frames, as the paint that occurs after inserting the image into the DOM causes a costly decode on the main thread.

This can instead be rewritten using the decode() method:

const img = new Image(); img.src = “nebula.jpg”;

img.decode().then(() => { document.body.appendChild(img) })

This latter form avoids the dropped frames of the original, by allowing the user agent to decode the image in parallel, and only inserting it into the DOM (and thus causing it to be painted) once the decoding process is complete.

Since we are using React, how do we suppose to use decode()?

Introducing the Release v3.0.0 🤙🏼🌠

• Source code has been rewritten in TypeScript.
• Built-indecode() before paint.
• 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!

Repo: https://github.com/gokcan/react-shimmer

CodeSandbox: https://codesandbox.io/s/nh9x1