Faster skeleton with refs (#10063)

* don't load metadata until image has loaded

* correct class name and remove lazy loading pkg

* try refs

* hook

* don't load metadata until image has loaded

* correct class name and remove lazy loading pkg

* try refs

* hook

web/src/hooks/use-image-loaded.ts

@@ -0,0 +1,24 @@
+import { useEffect, useRef, useState } from "react";
+
+const useImageLoaded = (): [
+  React.RefObject<HTMLImageElement>,
+  boolean,
+  () => void,
+] => {
+  const [loaded, setLoaded] = useState(false);
+  const ref = useRef<HTMLImageElement>(null);
+
+  const onLoad = () => {
+    setLoaded(true);
+  };
+
+  useEffect(() => {
+    if (ref.current && ref.current?.complete) {
+      onLoad();
+    }
+  });
+
+  return [ref, loaded, onLoad];
+};
+
+export default useImageLoaded;