[open-profile-images] make loading images smoother

ioj4 · Nov 25, 2024 · 70cfc29 · 70cfc29
1 parent 18e2748
commit 70cfc29
Showing 1 changed file with 13 additions and 3 deletions.
diff --git 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}