From 9c79f5529415666d6b683a34a30722b2b52cb07d Mon Sep 17 00:00:00 2001
From: Benjamin Milde <benni@kobrakai.de>
Date: Fri, 27 Dec 2024 23:09:01 +0100
Subject: [PATCH] Animate placeholders

---
 lib/kobrakai_web/views/page_html/home.html.heex | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/lib/kobrakai_web/views/page_html/home.html.heex b/lib/kobrakai_web/views/page_html/home.html.heex
index d695033..63ecdaa 100644
--- a/lib/kobrakai_web/views/page_html/home.html.heex
+++ b/lib/kobrakai_web/views/page_html/home.html.heex
@@ -17,10 +17,12 @@
         </div>
       </.link>
       <div
-        :for={i <- [-4, -3, -2, -1] |> Enum.drop(Enum.count(@videos))}
+        :for={index <- Enum.drop(0..3//1, Enum.count(@videos))}
         class={[
-          if(i == -3, do: "hidden sm:block"),
-          if(i in [-2, -1], do: "hidden lg:block")
+          "opacity-0",
+          "animate-in-small animation-fill-mode-forwards animation-delay-#{index * 55}",
+          if(index in [0, 1], do: "hidden sm:block"),
+          if(index in [2, 3], do: "hidden lg:block")
         ]}
       >
         <div class="border-neutral-900 border-2 mb-1 aspect-[16/9]"></div>