WIP: refactor: add image mimeType cache

Author: flang

src/main/resources/META-INF/resources/frontend/src/image-crop.tsx

@@ -25,6 +25,9 @@ import { type Crop, ReactCrop, PixelCrop, PercentCrop, makeAspectCrop, centerCro
 
 class ImageCropElement extends ReactAdapterElement {
 
+	// Cache detected MIME per source URL to avoid repeated network calls
+	#mimeTypeCache = new Map<string, string | null>();
+
 	protected render(hooks: RenderHooks): ReactElement<any, string | JSXElementConstructor<any>> | null {
 
 		const [crop, setCrop] = hooks.useState<Crop>("crop");
@@ -180,29 +183,43 @@ class ImageCropElement extends ReactAdapterElement {
 			return null;
 		}
 
+		// Return cached result if available
+		const cacheKey = img.src;
+		const cached = this.#mimeTypeCache?.get(cacheKey);
+		if (cached !== undefined){
+			return cached;
+		}
+
 		// Case 1: data URL (e.g., data:image/png;base64,...)
 		if (img.src.startsWith("data:")) {
 			const semiIndex = img.src.indexOf(";");
 			if (semiIndex > 5) {
-				return img.src.substring(5, semiIndex);
+				const mimeType = img.src.substring(5, semiIndex);
+				this.#mimeTypeCache?.set(cacheKey, mimeType);
+				return mimeType;
 			}
+			this.#mimeTypeCache?.set(cacheKey, null);
 			return null;
 		}
 
 		try {
 			// Case 2: try a HEAD request (fast, no body)
 			const headRes = await fetch(img.src, { method: "HEAD" });
-			const mime = headRes.headers.get("Content-Type");
-			if (mime) {
-				return mime;
+			let mimeType = headRes.headers.get("Content-Type");
+			if (mimeType) {
+				this.#mimeTypeCache?.set(cacheKey, mimeType);
+				return mimeType;
 			}
 
 			// Case 3: fallback — fetch full blob
 			const blobRes = await fetch(img.src);
 			const blob = await blobRes.blob();
-			return blob.type || null;
+			mimeType = blob.type || null;
+			this.#mimeTypeCache?.set(cacheKey, mimeType);
+			return mimeType;
 		} catch (err) {
 			console.error("Error fetching image MIME type:", err);
+			this.#mimeTypeCache?.set(cacheKey, null);
 			return null;
 		}
 	}