From 87b1b4df4b1d0b8160254306494b67abc0a9a256 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Sat, 28 Mar 2026 21:40:51 +0000
Subject: [PATCH] Replace top_by widgets loading indicator with a skeleton

---
 .../live/stats_live/top_by_period.ex                | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/lib/music_library_web/live/stats_live/top_by_period.ex b/lib/music_library_web/live/stats_live/top_by_period.ex
index 3ca27081..aedbb09e 100644
--- a/lib/music_library_web/live/stats_live/top_by_period.ex
+++ b/lib/music_library_web/live/stats_live/top_by_period.ex
@@ -71,8 +71,17 @@ defmodule MusicLibraryWeb.StatsLive.TopByPeriod do
           </:side_actions>
           <.async_result :let={items} assign={assigns[@key]}>
             <:loading>
-              <div class="flex h-182 items-center justify-center">
-                <.loading />
+              <div class="mt-4 rounded-md bg-white p-4 shadow-sm dark:bg-zinc-800">
+                <div class="space-y-2">
+                  <div :for={_ <- 1..10} class="flex items-center space-x-3 p-2">
+                    <div class="size-12 animate-pulse rounded-md bg-zinc-200 dark:bg-zinc-700" />
+                    <div class="min-w-0 flex-1 space-y-1.5">
+                      <div class="h-3 w-24 animate-pulse rounded bg-zinc-200 dark:bg-zinc-700" />
+                      <div class="h-4 w-40 animate-pulse rounded bg-zinc-200 dark:bg-zinc-700" />
+                    </div>
+                    <div class="h-5 w-8 animate-pulse rounded-full bg-zinc-200 dark:bg-zinc-700" />
+                  </div>
+                </div>
               </div>
             </:loading>
             <div class="mt-4 rounded-md bg-white p-4 shadow-sm dark:bg-zinc-800">