From 9286104391e98166007a61c64f790982ce6e0f8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Thu, 4 Dec 2025 14:19:35 -0600
Subject: [PATCH] feat: enhance Giveaway component with skeleton loading state

---
 packages/website/src/components/Giveaway.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/website/src/components/Giveaway.tsx b/packages/website/src/components/Giveaway.tsx
index 9a549cbf9..02168d4da 100644
--- a/packages/website/src/components/Giveaway.tsx
+++ b/packages/website/src/components/Giveaway.tsx
@@ -1,6 +1,7 @@
 import { Code, Flex, Heading, Link, Text } from "@radix-ui/themes";
 import { useEffect, useState, type ReactNode } from "react";
 import type { MaybeSkeletonComponentProps } from "../types/maybeSkeletonComponentProps";
+import { InlineSkeleton } from "./InlineSkeleton";
 
 const TIME = 1764898200 * 1000;
 
@@ -10,7 +11,7 @@ export function Giveaway({ skeleton }: MaybeSkeletonComponentProps) {
   useEffect(() => {
     const interval = setInterval(() => {
       setTimeLeft(TIME - Date.now());
-    });
+    }, 1000);
 
     return () => {
       clearInterval(interval);
@@ -66,7 +67,8 @@ export function Giveaway({ skeleton }: MaybeSkeletonComponentProps) {
 
           <Flex direction="column">
             <Heading size={{ initial: "4", sm: "6" }}>
-              Music Box giveaway {string}
+              Music Box giveaway {!skeleton && string}{" "}
+              {skeleton && <InlineSkeleton width="10rem" />}
             </Heading>
             <Text size={{ initial: "2", sm: "3" }}>
               Join the BlitzKit Discord server event