[sanity + gatsby] Figuring out jank-free, lqip image loading

images.md

Implementing https://github.com/coreyward/gatsby-plugin-sanity-image

References

• https://hangindev.com/blog/create-a-custom-figure-block-in-sanity-that-supports-lazy-loading-effect
• https://gist.github.com/kmelve/e047d40e24d92f1b4751535a4cee1e59
• https://www.apostrof.co/blog/svelte-sanity-responsive-lazy-loaded-jank-free-images/
• https://www.sanity.io/docs/image-type#custom-asset-sources-495696608224

Figured it out

<figure
    style={{
        position: 'relative',
        overflow: 'hidden',
        margin: 0,
        width: '50%'
      }}>
      <div
      style={{
        paddingBottom: '56.25%'
      }}></div>
      <SanityImage
        {...props.mainImage}
        sx={{
          '&[data-lqip]': {
            display: 'block',
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          }
        }}
        style={{ 
          display: 'block',
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%'
        }}
      />
</figure>