Rewrite image-sizes.fetch to avoid mixing async styles

src/lib/media/image-sizes.ts

@@ -9,27 +9,31 @@ export function get(uri: string): Dimensions | undefined {
   return sizes.get(uri)
 }
 
-export async function fetch(uri: string): Promise<Dimensions> {
+export function fetch(uri: string): Promise<Dimensions> {
-  const Dimensions = sizes.get(uri)
+  const dims = sizes.get(uri)
-  if (Dimensions) {
+  if (dims) {
-    return Dimensions
+    return Promise.resolve(dims)
   }
-
+  const activeRequest = activeRequests.get(uri)
-  const prom =
+  if (activeRequest) {
-    activeRequests.get(uri) ||
+    return activeRequest
-    new Promise<Dimensions>(resolve => {
+  }
+  const prom = new Promise<Dimensions>((resolve, reject) => {
     Image.getSize(
       uri,
-        (width: number, height: number) => resolve({width, height}),
+      (width: number, height: number) => {
+        const size = {width, height}
+        sizes.set(uri, size)
+        resolve(size)
+      },
       (err: any) => {
         console.error('Failed to fetch image dimensions for', uri, err)
-          resolve({width: 0, height: 0})
+        reject(new Error('Could not fetch dimensions'))
       },
     )
+  }).finally(() => {
+    activeRequests.delete(uri)
   })
   activeRequests.set(uri, prom)
-  const res = await prom
+  return prom
-  activeRequests.delete(uri)
-  sizes.set(uri, res)
-  return res
 }