Merge pull request #75 from fold-dev/fix/app-sandbox-image-load

fix: lazy load App Sandbox image on homepage
fold-dev · Jun 6, 2024 · f366be6 · f366be6
2 parents dd81fdf + 412fa20
commit f366be6
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fold-dev/docs",
-  "version": "24.6.6.0",
+  "version": "24.6.6.1",
   "description": "UI components for product teams.",
   "scripts": {
     "prepare": "husky install",

diff --git a/src/components/core.component.tsx b/src/components/core.component.tsx
@@ -1377,13 +1377,6 @@ export const CoreComponent = () => {
         highlightCode(snippet1, 'javascript').then((html) => setHtml(html))
     }, [])
 
-    useEffect(() => {
-        ['app-sandbox-light.png', 'app-sandbox-dark.png'].map((imageUrl) => {
-            const img = new window.Image()
-            img.src = imageUrl
-        })
-    }, [])
-
     return (
         <>
             <View
@@ -1513,6 +1506,30 @@ export const CoreComponent = () => {
                             width={1250}
                             style={{ left: 0, top: -35, transform: 'rotateZ(8deg)' }}
                             position="absolute">
+                            <img
+                                className="lazy-load-dark"
+                                style={{ 
+                                    visibility: 'hidden', 
+                                    position: 'absolute', 
+                                    zIndex: -1, 
+                                    top: 0, 
+                                    left: 0,
+                                    width: 0,
+                                    height: 0,
+                                }}
+                            />
+                            <img
+                                className="lazy-load-light"
+                                style={{ 
+                                    visibility: 'hidden', 
+                                    position: 'absolute', 
+                                    zIndex: -1, 
+                                    top: 0, 
+                                    left: 0,
+                                    width: 0,
+                                    height: 0,
+                                }}
+                            />
                             <img 
                                 style={{ position: 'relative', zIndex: 0 }}
                                 src="app-sandbox-light.png" 

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -218,6 +218,14 @@ body {
     margin: 1rem 0;
 }
 
+.lazy-load-dark {
+    content: url("../../public/app-sandbox-dark.png");
+}
+
+.lazy-load-light {
+    content: url("../../public/app-sandbox-light.png");
+}
+
 [data-theme="dark"] .pro-image {
     content: url("../../public/app-sandbox-dark.png");
 }