This package has components representing Next.js Image components based a Sanity image objects. It also has a few utility functions and hooks related to working with Sanity images and measuring DOM-elements.
Yes, we should have it.
- The getSanityImage function is useful and intended for server side components, but due to how this package is built it cannot be used in a purely server side component. The issue is that the package has a single bundle and it contains he SanityProjectDetailsProvider that calls "createContext" at the global scope. "createContext" is not exported by react in a server side component context, causing a crash as soon as the package is imported. We need to figure out a way to separate client and server components in different bundles in the package so they can be imported separately.
- We are probably a bit inefficient in how we scale images. Right now we use Sanity to scale the originals according to the crop rectangle and then pass that still huge image to Next's image component for further scaling. It would probably be more efficient to do all cropping and scaling in the Next image component, if possible.
- We should load the 16x16 blur image into a data-URL rather than refering to the URL of the scaled variant. Right now we have an issue where we rarely see the blur image because it takes just as long to scale and return as the final, full size image variant it's supposed to stand in for. To make this all work we would have to make Server Component variants of all the image components so we could do an async load of the blur image at build time.