From f72121861ba5100c0007a171c0b4af9347d0c7f2 Mon Sep 17 00:00:00 2001
From: Rico van Zelst <rvzelst7@gmail.com>
Date: Thu, 15 May 2025 11:44:35 +0200
Subject: [PATCH] feat(skin-info): optimize splash loading

---
 resources/views/components/skins/grid_info.blade.php | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/resources/views/components/skins/grid_info.blade.php b/resources/views/components/skins/grid_info.blade.php
index beb7010..8a83945 100644
--- a/resources/views/components/skins/grid_info.blade.php
+++ b/resources/views/components/skins/grid_info.blade.php
@@ -29,9 +29,15 @@
 
             <!-- Splash Art -->
             <div class="relative w-full h-full">
-                <img src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=1200&output=webp&q=90&h=350&fit=cover"
-                    alt="{{ $skin->skin_name }} Splash Art"
-                    class="z-10 object-cover w-full h-full transition-transform duration-700 transform scale-100">
+                <img src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=30&h=20&fit=cover&blur=5&output=webp"
+                    class="absolute inset-0 object-cover w-full h-full blur-sm" alt="{{ $skin->skin_name }} Loading" />
+                <img src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=800&h=350&fit=cover&output=webp&q=85"
+                    srcset="//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=480&h=350&fit=cover&output=webp&q=85 480w,
+                //wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=800&h=350&fit=cover&output=webp&q=85 800w,
+                //wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=1200&h=350&fit=cover&output=webp&q=90 1200w"
+                    sizes="(max-width: 600px) 480px, (max-width: 1024px) 800px, 1200px"
+                    class="z-10 object-cover w-full h-full transition-transform duration-700 transform scale-100"
+                    alt="{{ $skin->skin_name }} Splash Art" loading="eager" />
 
                 <!-- Gradient Overlay for Text Readability -->
                 <div class="absolute inset-0 bg-gradient-to-t from-stone-900/90 via-stone-900/40 to-transparent"></div>