From 790b8d280f972d7faca9f91ef3c13c19303f7461 Mon Sep 17 00:00:00 2001
From: Rico van Zelst <ricovzelst@pm.me>
Date: Tue, 7 Nov 2023 19:38:34 +0100
Subject: [PATCH] feat: image load animation

---
 resources/js/app.js                                   | 11 +++++++++++
 .../views/components/champions/list_all.blade.php     |  7 ++++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/resources/js/app.js b/resources/js/app.js
index 0f97a1b..50db69d 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -3,3 +3,14 @@ import "flowbite";
 import "./icons";
 import "./icons-brands";
 import "./icons-duotone";
+
+document.addEventListener("DOMContentLoaded", function () {
+    const images = document.querySelectorAll(".transition-opacity");
+
+    images.forEach((image) => {
+        image.onload = function () {
+            image.style.filter = "blur(0)";
+            image.style.opacity = "1";
+        };
+    });
+});
diff --git a/resources/views/components/champions/list_all.blade.php b/resources/views/components/champions/list_all.blade.php
index 4f1a21f..0cb61de 100644
--- a/resources/views/components/champions/list_all.blade.php
+++ b/resources/views/components/champions/list_all.blade.php
@@ -19,15 +19,16 @@
                     border border-stone-800 hover:border-orange-500/10 hover:shadow-orange-500/10">
                     <div
                         class="mx-4 mt-4 overflow-hidden h-52 rounded-2xl bg-clip-border border-2 border-orange-400/40">
-                        <img @if($key < 8) loading="auto" @else loading="lazy" @endif
+                        <img @if($key < 8) loading="eager" @else loading="lazy" @endif
                         src="//wsrv.nl/?url={{ $champion->getChampionImageAttribute() }}&w=400&output=webp&q=70"
-                             class="object-cover w-full h-full"
+                             class="object-cover w-full h-full transition-opacity filter blur-3 opacity-0"
                              alt="{{ $champion->name }} Splash Art"
                         />
                     </div>
+
                     <div class="px-4 py-2">
                         <div class="flex items-center justify-between">
-                            <p class="block text-base antialiased font-medium  text-gray-100">
+                            <p class="block text-base antialiased font-medium text-gray-100">
                                 {{ $champion->name }}
                             </p>
                             <span class="text-xsm text-stone-300">{{ $champion->title }}</span>