From 1bce978d1b942d6f76a08c6e9d4a90030afd7c89 Mon Sep 17 00:00:00 2001
From: Jo du Plessis <jo@joduplessis.com>
Date: Thu, 6 Jun 2024 07:17:36 +0200
Subject: [PATCH 1/4] add extra image tag

---
 src/components/core.component.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/core.component.tsx b/src/components/core.component.tsx
index 6065cbf..98b5246 100644
--- a/src/components/core.component.tsx
+++ b/src/components/core.component.tsx
@@ -1513,6 +1513,12 @@ export const CoreComponent = () => {
                             width={1250}
                             style={{ left: 0, top: -35, transform: 'rotateZ(8deg)' }}
                             position="absolute">
+                            <img 
+                                style={{ position: 'relative', zIndex: 0, display: 'none' }}
+                                src="app-sandbox-dark.png" 
+                                height="0"
+                                width="0"
+                            />
                             <img 
                                 style={{ position: 'relative', zIndex: 0 }}
                                 src="app-sandbox-light.png" 

From 3eb3281bd9839c6fc9846cd97c124ce361b76647 Mon Sep 17 00:00:00 2001
From: Jo du Plessis <jo@joduplessis.com>
Date: Thu, 6 Jun 2024 07:22:46 +0200
Subject: [PATCH 2/4] add lazy-loading attribute

---
 src/components/core.component.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/core.component.tsx b/src/components/core.component.tsx
index 98b5246..fdf3444 100644
--- a/src/components/core.component.tsx
+++ b/src/components/core.component.tsx
@@ -1514,6 +1514,7 @@ export const CoreComponent = () => {
                             style={{ left: 0, top: -35, transform: 'rotateZ(8deg)' }}
                             position="absolute">
                             <img 
+                                loading="lazy"
                                 style={{ position: 'relative', zIndex: 0, display: 'none' }}
                                 src="app-sandbox-dark.png" 
                                 height="0"

From 838d0325233e830f73e691fa0c68851b3b51b42c Mon Sep 17 00:00:00 2001
From: Jo du Plessis <jo@joduplessis.com>
Date: Thu, 6 Jun 2024 07:36:18 +0200
Subject: [PATCH 3/4] use ghost elements

---
 src/components/core.component.tsx | 36 ++++++++++++++++++++-----------
 src/styles/globals.css            |  8 +++++++
 2 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/src/components/core.component.tsx b/src/components/core.component.tsx
index fdf3444..131bd76 100644
--- 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,12 +1506,29 @@ export const CoreComponent = () => {
                             width={1250}
                             style={{ left: 0, top: -35, transform: 'rotateZ(8deg)' }}
                             position="absolute">
-                            <img 
-                                loading="lazy"
-                                style={{ position: 'relative', zIndex: 0, display: 'none' }}
-                                src="app-sandbox-dark.png" 
-                                height="0"
-                                width="0"
+                            <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 }}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 4fe65d5..e119b58 100644
--- 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");
 }

From 412fa20e0b787de3adc5f44202676c83bf9cf45a Mon Sep 17 00:00:00 2001
From: Jo du Plessis <jo@joduplessis.com>
Date: Thu, 6 Jun 2024 07:38:29 +0200
Subject: [PATCH 4/4] bump version

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 08dbcd3..b356fd5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@fold-dev/docs",
-  "version": "24.6.5.1",
+  "version": "24.6.6.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@fold-dev/docs",
-      "version": "24.6.5.1",
+      "version": "24.6.6.1",
       "license": "ISC",
       "dependencies": {
         "@fold-dev/core": "^0.11.7",
diff --git a/package.json b/package.json
index 0e3bb1b..9b09279 100644
--- 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",