I need to load the image once the image preload is fully completed using React Suspense, the issue is that “onLoad” event on triggers when image starts loading not once its completed. here is the implementation. createResource is a functions that makes a suspender to be used for Suspense component in react

const loadImage = (src: string) => {
  let resource = cache.get(src);
  if (resource) {
    return resource;
  }
  resource = createResource(
    () =>
      new Promise((resolve, reject) => {
        const img = new window.Image();
        img.src = src;
        img.onload = () => {
          resolve(img);
        };
        img.onerror = error => {
          reject(error);
        };
      })
  );
  cache.set(src, resource);
  return resource;
};

const Image = (src) => {
 const image = loadImage(src).read()
 <img src={image.src} />
}