From f3ff52dac38c4b1e4ec038a33f51f650ec5a074f Mon Sep 17 00:00:00 2001
From: indykoning <15870933+indykoning@users.noreply.github.com>
Date: Fri, 8 Nov 2024 17:43:03 +0100
Subject: [PATCH 1/4] Prevent render blocking resizes

---
 resources/views/partials/head.blade.php | 26 ++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/resources/views/partials/head.blade.php b/resources/views/partials/head.blade.php
index bcdfdda..1705ea9 100644
--- a/resources/views/partials/head.blade.php
+++ b/resources/views/partials/head.blade.php
@@ -1,14 +1,18 @@
 <script>
-    window.responsiveResizeObserver = new ResizeObserver((entries) => {
-        entries.forEach(entry => {
-            const bounds = entry.target.getBoundingClientRect();
-            const imgWidth = bounds.width;
-            const imgHeight = bounds.height;
-            const pixelRatio = window.devicePixelRatio * imgWidth;
-            
-            requestAnimationFrame(() => entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                source.sizes = pixelRatio + 'px';
-            }));
+window.responsiveResizeObserver = new ResizeObserver(async (entries) => {
+    entries.forEach(entry => {
+        let imgWidth = entry.devicePixelContentBoxSize[0].inlineSize;
+
+        if (imgWidth === 0) {
+            return;
+        }
+        
+        requestAnimationFrame(() => {
+            entry.target.loading = 'lazy';
+            entry.target.parentNode.querySelectorAll('source').forEach((source) => {
+                source.sizes = imgWidth + 'px'
+            })
         });
-    });
+    })
+});
 </script>

From d99a9f79b14e9e14084bf3bf74735ea9e7a0c927 Mon Sep 17 00:00:00 2001
From: indykoning <15870933+indykoning@users.noreply.github.com>
Date: Thu, 21 Nov 2024 11:13:55 +0100
Subject: [PATCH 2/4] Prevent white flash

---
 resources/views/image.blade.php | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/resources/views/image.blade.php b/resources/views/image.blade.php
index 1240914..880ba77 100644
--- a/resources/views/image.blade.php
+++ b/resources/views/image.blade.php
@@ -26,12 +26,16 @@ class="{{ $class }}"
             <img
                     {!! $attributes ?? '' !!}
                     class="{{ $class }}"
+                    style="background-image: url('{{ $presets['placeholder'] }}'); background-size: contain; background-position: center; background-repeat: no-repeat;"
                     src="{{ $presets['placeholder'] ?? $image->url() }}"
                     alt="{{ $alt ?? $image->alt() }}"
                     width="{{ $width }}"
                     height="{{ $height }}"
                     onload="
-                        this.onload=null;
+                        this.onload=()=>{
+                            this.style.backgroundImage = null;
+                            this.onload=null
+                        };
                         window.responsiveResizeObserver.observe(this);
                     "
             >

From 76519ec2f689cf88420a214e1e13118ebfc94bfc Mon Sep 17 00:00:00 2001
From: indykoning <15870933+indykoning@users.noreply.github.com>
Date: Thu, 21 Nov 2024 11:16:51 +0100
Subject: [PATCH 3/4] Check if placeholder is available

---
 resources/views/image.blade.php | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/resources/views/image.blade.php b/resources/views/image.blade.php
index 880ba77..0d39890 100644
--- a/resources/views/image.blade.php
+++ b/resources/views/image.blade.php
@@ -26,7 +26,9 @@ class="{{ $class }}"
             <img
                     {!! $attributes ?? '' !!}
                     class="{{ $class }}"
-                    style="background-image: url('{{ $presets['placeholder'] }}'); background-size: contain; background-position: center; background-repeat: no-repeat;"
+                    @if($presets['placeholder'] ?? false)
+                        style="background-image: url('{{ $presets['placeholder'] }}'); background-size: contain; background-position: center; background-repeat: no-repeat;"
+                    @endif                    ]
                     src="{{ $presets['placeholder'] ?? $image->url() }}"
                     alt="{{ $alt ?? $image->alt() }}"
                     width="{{ $width }}"

From 1c1c8082d3efd7a0e6662e7f2ae1f17d12e9d5dc Mon Sep 17 00:00:00 2001
From: indykoning <15870933+indykoning@users.noreply.github.com>
Date: Thu, 21 Nov 2024 11:29:12 +0100
Subject: [PATCH 4/4] Fix typo

---
 resources/views/image.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/image.blade.php b/resources/views/image.blade.php
index 0d39890..a28ffa0 100644
--- a/resources/views/image.blade.php
+++ b/resources/views/image.blade.php
@@ -28,7 +28,7 @@ class="{{ $class }}"
                     class="{{ $class }}"
                     @if($presets['placeholder'] ?? false)
                         style="background-image: url('{{ $presets['placeholder'] }}'); background-size: contain; background-position: center; background-repeat: no-repeat;"
-                    @endif                    ]
+                    @endif
                     src="{{ $presets['placeholder'] ?? $image->url() }}"
                     alt="{{ $alt ?? $image->alt() }}"
                     width="{{ $width }}"