From 70cfc293f3f329ec0e6ea52b74711dad1cc5334f Mon Sep 17 00:00:00 2001
From: ioj4 <69911332+ioj4@users.noreply.github.com>
Date: Mon, 25 Nov 2024 22:07:54 +0100
Subject: [PATCH] [open-profile-images] make loading images smoother

---
 .../components/image-modal.jsx                   | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/plugins/open-profile-images/components/image-modal.jsx b/plugins/open-profile-images/components/image-modal.jsx
index 6c33726..40baa2c 100644
--- a/plugins/open-profile-images/components/image-modal.jsx
+++ b/plugins/open-profile-images/components/image-modal.jsx
@@ -1,20 +1,30 @@
 import classes from "../styles.jsx.scss";
+const {
+    solid: { createSignal }
+} = shelter;
 
 export default ({ url }) => {
+    const [isLoaded, setIsLoaded] = createSignal(false);
+
+    const lowResUrl = url.toString();
     const isBanner = url.pathname.startsWith("/banners/");
 
     url.searchParams.set("size", "4096");
-    const viewUrl = url.toString();
+    const fullResUrl = url.toString();
+
+    const preloadImage = new Image();
+    preloadImage.onload = () => setIsLoaded(true);
+    preloadImage.src = fullResUrl;
 
     // to .png extension
-    const browserURL = viewUrl.replace(/\.(webp)($|\?)/, ".png$2");
+    const browserURL = fullResUrl.replace(/\.(webp)($|\?)/, ".png$2");
 
     return (
         <>
             <div class={classes.wrapper}>
                 <img
                     class={`${classes.image} ${isBanner ? classes.banner : ""}`}
-                    src={viewUrl}
+                    src={isLoaded() ? fullResUrl : lowResUrl}
                 />
                 <a
                     href={browserURL}