From e540e1e8e324234643a34b3ecf95810e505f9dce Mon Sep 17 00:00:00 2001
From: Bram Suurd <78373894+BramSuurdje@users.noreply.github.com>
Date: Sun, 29 Jun 2025 22:54:19 +0200
Subject: [PATCH] Enhance skin loading in index.php with lazy loading
 implementation for improved performance; update style.css to adjust
 dimensions and styling of skin images and modal overlay for better UI
 experience.

---
 website/index.php | 44 ++++++++++++++++++++++++++++++++++++++------
 website/style.css | 13 +++++++++----
 2 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/website/index.php b/website/index.php
index 2ca19a76..90e41dd7 100644
--- a/website/index.php
+++ b/website/index.php
@@ -486,17 +486,49 @@ if (isset($_SESSION['steamid'])) {
 				// Clear previous skins
 				skinGrid.innerHTML = '';
 
-				// Populate skins
-				Object.entries(skinsData[weaponId]).forEach(([paintId, skin]) => {
+				// Populate skins with lazy loading
+				const skinEntries = Object.entries(skinsData[weaponId]);
+				
+				skinEntries.forEach(([paintId, skin], index) => {
 					const skinItem = document.createElement('div');
 					skinItem.className = 'skin-item';
 					skinItem.onclick = () => equipSkin(weaponId, paintId);
 					
-					skinItem.innerHTML = `
-						<img src="${skin.image_url}" alt="${skin.paint_name}" class="skin-image">
-						<div class="skin-name">${skin.paint_name}</div>
-					`;
+					// Create image element with lazy loading
+					const img = document.createElement('img');
+					img.alt = skin.paint_name;
+					img.className = 'skin-image';
 					
+					// Add loading placeholder
+					img.style.background = 'linear-gradient(145deg, #333, #222)';
+					img.style.minHeight = '180px';
+					
+					// Lazy load: only load first 12 images immediately, rest on scroll/delay
+					if (index < 12) {
+						img.src = skin.image_url;
+					} else {
+						// Load after a delay or when scrolled into view
+						setTimeout(() => {
+							img.src = skin.image_url;
+						}, index * 50); // Stagger loading
+					}
+					
+					img.onerror = function() {
+						console.log('Failed to load image:', skin.image_url);
+						this.style.background = '#333';
+						this.style.content = '""';
+					};
+					img.onload = function() {
+						this.style.background = 'transparent';
+						console.log('Successfully loaded image:', skin.image_url);
+					};
+					
+					const nameDiv = document.createElement('div');
+					nameDiv.className = 'skin-name';
+					nameDiv.textContent = skin.paint_name;
+					
+					skinItem.appendChild(img);
+					skinItem.appendChild(nameDiv);
 					skinGrid.appendChild(skinItem);
 				});
 
diff --git a/website/style.css b/website/style.css
index 8a6ab3d9..494f6ac9 100644
--- a/website/style.css
+++ b/website/style.css
@@ -403,8 +403,9 @@ body {
 }
 
 .overlay-content {
-	width: 900px;
-	height: 600px;
+	width: 1000px;
+	height: 700px;
+	max-height: 85vh;
 }
 
 .modal-content {
@@ -471,10 +472,14 @@ body {
 
 .skin-item .skin-image {
 	width: 100%;
-	height: 250px;
+	height: 180px;
 	object-fit: contain;
 	background: linear-gradient(145deg, #333, #222);
-	padding: 0.5rem;
+	padding: 0.75rem;
+	display: block;
+	box-sizing: border-box;
+	transform: scale(1.2);
+	transform-origin: center;
 }
 
 .skin-name {