From 3d62d2689f3c0159de9e2b73c8373dea20c59736 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Wed, 14 Jun 2023 02:09:09 +0100
Subject: [PATCH] Animate progress on the homescreen

---
 src/components/FeaturedItems/FeaturedItem.astro |  1 +
 src/lib/home-progress.ts                        | 13 ++-----------
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/components/FeaturedItems/FeaturedItem.astro b/src/components/FeaturedItems/FeaturedItem.astro
index d238ebacc..0025bbe28 100644
--- a/src/components/FeaturedItems/FeaturedItem.astro
+++ b/src/components/FeaturedItems/FeaturedItem.astro
@@ -47,4 +47,5 @@ const { isUpcoming = false, isNew = false, text, url } = Astro.props;
       </span>
     )
   }
+  <span data-progress class="z-10 bg-[#172a3a] absolute top-0 left-0 bottom-0 duration-300 transition-[width] w-0"></span>
 </a>
diff --git a/src/lib/home-progress.ts b/src/lib/home-progress.ts
index 77ff521ba..58ba52369 100644
--- a/src/lib/home-progress.ts
+++ b/src/lib/home-progress.ts
@@ -37,21 +37,12 @@ async function renderProgress() {
     const totalDone = progress.done + progress.skipped;
     const percentageDone = (totalDone / progress.total) * 100;
 
-    const progressBar = document.createElement('div');
-    progressBar.style.backgroundColor = 'rgb(23 42 58)';
-    progressBar.style.position = 'absolute';
+    const progressBar: HTMLElement = element.querySelector('[data-progress]')!;
     progressBar.style.width = `${percentageDone}%`;
-    progressBar.style.height = '100%';
-    progressBar.style.bottom = '0';
-    progressBar.style.left = '0';
-    progressBar.style.top = '0';
-    progressBar.style.zIndex = '1';
-
-    element.appendChild(progressBar);
   });
 }
 
 // on DOM load
 window.addEventListener('DOMContentLoaded', () => {
-    window.setTimeout(renderProgress, 0);
+  window.setTimeout(renderProgress, 0);
 });