From 59d903d4009b9fa492c12fb24580aee5e39bfab9 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Thu, 4 Jun 2026 10:06:22 +0200
Subject: [PATCH] refactor: consolidate skeleton styles into global css

---
 static/assets/style.css   | 27 +++++++++++++++++++++++++++
 templates/anime.gohtml    | 20 ++++++++++----------
 templates/discover.gohtml | 18 +++---------------
 templates/index.gohtml    | 24 +++++-------------------
 templates/schedule.gohtml | 12 ++++++------
 5 files changed, 51 insertions(+), 50 deletions(-)

diff --git a/static/assets/style.css b/static/assets/style.css
index 073eda2..2d795e4 100644
--- a/static/assets/style.css
+++ b/static/assets/style.css
@@ -17,6 +17,8 @@
 
 :root {
   color-scheme: light dark;
+  --skeleton-base: light-dark(#e5e5e5, #1f1f1f);
+  --skeleton-highlight: light-dark(#d4d4d4, #2a2a2a);
   --bg: var(--color-background);
   --panel: light-dark(#f7f7f7, #181818);
   --panel-soft: light-dark(#ececec, #202020);
@@ -61,6 +63,31 @@ body {
   color: var(--text);
 }
 
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--skeleton-base) 25%,
+    var(--skeleton-highlight) 50%,
+    var(--skeleton-base) 75%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s infinite;
+}
+
+.skeleton-subtle {
+  opacity: 0.7;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}
+
 [data-watchlist-toggle] .watchlist-icon,
 [data-watchlist-toggle] .watchlist-icon path {
   fill: none;
diff --git a/templates/anime.gohtml b/templates/anime.gohtml
index 3123da3..555a397 100644
--- a/templates/anime.gohtml
+++ b/templates/anime.gohtml
@@ -262,9 +262,9 @@
             <section>
               <h3 class="mb-4 text-base font-normal text-foreground">Statistics</h3>
               <div hx-get="/anime/{{$anime.MalID}}?section=statistics" hx-trigger="load" hx-swap="innerHTML">
-                <div class="flex flex-col gap-3 pt-1 animate-pulse">
+                <div class="flex flex-col gap-3 pt-1">
                   {{range (seq 5)}}
-                    <div class="h-4 rounded bg-background-surface"></div>
+                    <div class="skeleton h-4"></div>
                   {{end}}
                 </div>
               </div>
@@ -299,13 +299,13 @@
   <div hx-get="/anime/{{$anime.MalID}}?section=characters" hx-trigger="revealed" hx-swap="outerHTML">
     <div class="mt-12 w-full">
       <h2 class="mb-6 text-lg font-normal text-foreground">Characters & Cast</h2>
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 animate-pulse">
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
         {{range (seq 5)}}
-          <div class="flex gap-3 bg-background-surface p-3 h-20">
-            <div class="h-16 w-12 shrink-0 bg-background-button"></div>
+          <div class="flex h-20 gap-3 bg-background-surface p-3">
+            <div class="skeleton h-16 w-12 shrink-0"></div>
             <div class="flex flex-col justify-center gap-2 grow">
-              <div class="h-3 w-2/3 bg-background-button rounded"></div>
-              <div class="h-2 w-1/2 bg-background-button rounded"></div>
+              <div class="skeleton h-3 w-2/3"></div>
+              <div class="skeleton skeleton-subtle h-2 w-1/2"></div>
             </div>
           </div>
         {{end}}
@@ -325,11 +325,11 @@
   <div hx-get="/anime/{{$anime.MalID}}?section=recommendations" hx-trigger="revealed" hx-swap="outerHTML">
     <div class="w-full">
       <h2 class="mb-6 text-lg font-normal text-foreground">Recommendations</h2>
-      <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 animate-pulse">
+      <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
         {{range (seq 8)}}
           <div class="flex flex-col gap-2">
-            <div class="aspect-2/3 bg-background-surface"></div>
-            <div class="h-3 w-full bg-background-surface rounded"></div>
+            <div class="skeleton aspect-2/3"></div>
+            <div class="skeleton h-3 w-full"></div>
           </div>
         {{end}}
       </div>
diff --git a/templates/discover.gohtml b/templates/discover.gohtml
index 569eec7..2a67fe1 100644
--- a/templates/discover.gohtml
+++ b/templates/discover.gohtml
@@ -74,18 +74,6 @@
     grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
     gap: 1rem;
   }
-  .skeleton {
-    background: light-dark(
-      linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%),
-      linear-gradient(90deg, #1f1f1f 25%, #2a2a2a 50%, #1f1f1f 75%)
-    );
-    background-size: 200% 100%;
-    animation: skeleton-loading 1.5s infinite;
-  }
-  @keyframes skeleton-loading {
-    0% { background-position: 200% 0; }
-    100% { background-position: -200% 0; }
-  }
 </style>
 {{end}}
 
@@ -109,9 +97,9 @@
 <div class="discover-grid">
   {{range (seq 8)}}
   <div class="flex flex-col gap-2">
-    <div class="skeleton aspect-2/3 w-full rounded-xl"></div>
-    <div class="skeleton h-4 w-3/4 rounded"></div>
-    <div class="skeleton h-3 w-1/2 rounded opacity-50"></div>
+    <div class="skeleton aspect-2/3 w-full"></div>
+    <div class="skeleton h-4 w-3/4"></div>
+    <div class="skeleton skeleton-subtle h-3 w-1/2"></div>
   </div>
   {{end}}
 </div>
diff --git a/templates/index.gohtml b/templates/index.gohtml
index 229b36c..cacebe8 100644
--- a/templates/index.gohtml
+++ b/templates/index.gohtml
@@ -34,20 +34,6 @@
   </section>
 </div>
 
-<style>
-  .skeleton {
-    background: light-dark(
-      linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%),
-      linear-gradient(90deg, #1f1f1f 25%, #2a2a2a 50%, #1f1f1f 75%)
-    );
-    background-size: 200% 100%;
-    animation: skeleton-loading 1.5s infinite;
-  }
-  @keyframes skeleton-loading {
-    0% { background-position: 200% 0; }
-    100% { background-position: -200% 0; }
-  }
-</style>
 {{end}}
 
 {{define "catalog_section"}}
@@ -68,8 +54,8 @@
 <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6">
   {{range (seq 6)}}
   <div class="flex flex-col gap-2">
-    <div class="skeleton aspect-2/3 w-full rounded-xl"></div>
-    <div class="skeleton h-4 w-3/4 rounded"></div>
+    <div class="skeleton aspect-2/3 w-full"></div>
+    <div class="skeleton h-4 w-3/4"></div>
   </div>
   {{end}}
 </div>
@@ -81,9 +67,9 @@
   <div class="flex snap-x snap-mandatory gap-2 overflow-x-auto pb-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden lg:[-ms-overflow-style:auto] lg:[scrollbar-width:thin] lg:[scrollbar-color:var(--scrollbar-thumb)_var(--scrollbar-track)] lg:[&::-webkit-scrollbar]:block lg:[&::-webkit-scrollbar]:h-2 lg:[&::-webkit-scrollbar-track]:bg-[var(--scrollbar-track)] lg:[&::-webkit-scrollbar-track]:rounded-none lg:[&::-webkit-scrollbar-thumb]:bg-[var(--scrollbar-thumb)] lg:[&::-webkit-scrollbar-thumb]:rounded-none lg:[&::-webkit-scrollbar-thumb:hover]:bg-[var(--scrollbar-thumb-hover)]">
     {{range (seq 3)}}
       <div class="flex w-70 shrink-0 snap-start flex-col gap-2 2xl:w-lg">
-        <div class="skeleton aspect-video w-full overflow-hidden rounded-xl"></div>
-        <div class="skeleton h-5 w-2/3 rounded"></div>
-        <div class="skeleton h-4 w-1/2 rounded opacity-70"></div>
+        <div class="skeleton aspect-video w-full overflow-hidden"></div>
+        <div class="skeleton h-5 w-2/3"></div>
+        <div class="skeleton skeleton-subtle h-4 w-1/2"></div>
       </div>
     {{end}}
   </div>
diff --git a/templates/schedule.gohtml b/templates/schedule.gohtml
index e6161c8..83dc1f3 100644
--- a/templates/schedule.gohtml
+++ b/templates/schedule.gohtml
@@ -222,18 +222,18 @@
     <div class="flex flex-col bg-background-surface ring-1 ring-[var(--border)]">
       <div class="flex items-baseline justify-between border-b border-[var(--border-light)] px-7 py-6">
         <div class="flex flex-col gap-2">
-          <div class="h-6 w-32 bg-foreground-muted/10 animate-pulse"></div>
-          <div class="h-4 w-20 bg-foreground-muted/10 animate-pulse"></div>
+          <div class="skeleton h-6 w-32"></div>
+          <div class="skeleton skeleton-subtle h-4 w-20"></div>
         </div>
-        <div class="h-4 w-10 bg-foreground-muted/10 animate-pulse"></div>
+        <div class="skeleton skeleton-subtle h-4 w-10"></div>
       </div>
       <div class="flex flex-col pb-8 pt-4">
         {{range (seq 3)}}
           <div class="flex gap-6 px-7 py-6 border-b border-[var(--border-light)] last:border-b-0">
-            <div class="h-28 w-20 shrink-0 bg-foreground-muted/10 animate-pulse"></div>
+            <div class="skeleton h-28 w-20 shrink-0"></div>
             <div class="flex flex-1 flex-col justify-center gap-4">
-              <div class="h-5 w-full bg-foreground-muted/10 animate-pulse"></div>
-              <div class="h-4 w-2/3 bg-foreground-muted/10 animate-pulse opacity-60"></div>
+              <div class="skeleton h-5 w-full"></div>
+              <div class="skeleton skeleton-subtle h-4 w-2/3"></div>
             </div>
           </div>
         {{end}}