fix hero loading state (#430)

Author: michelleyeoh

app/(pages)/(hackers)/_components/HomeHacking/HeroHacking.tsx

@@ -2,8 +2,6 @@
 
 import Image from 'next/image';
 import { GoArrowRight } from 'react-icons/go';
-
-import ClientTimeProtectedDisplay from '@pages/_components/TimeProtectedDisplay/ClientTimeProtectedDisplay';
 import Countdown from './_components/Countdown';
 
 interface HeroHackingProps {
@@ -17,6 +15,7 @@ export default function HeroHacking({
   rolloutTime,
   loading,
 }: HeroHackingProps) {
+  // Adds one day to rollout time 'hacking-starts' AKA hacking ending time
   const countdownTarget = rolloutTime ? rolloutTime + ONE_DAY_MS : undefined;
 
   return (
@@ -45,18 +44,10 @@ export default function HeroHacking({
               <div className="flex items-start justify-between gap-2">
                 {/* Right: countdown (big) */}
                 <div className="flex-1 flex justify-center">
-                  <div className="text-white">
-                    <ClientTimeProtectedDisplay
-                      featureId="hacking-starts"
-                      fallback={<Countdown />}
-                    >
-                      {countdownTarget !== undefined && (
-                        <Countdown countdownTarget={countdownTarget} />
-                      )}
-                    </ClientTimeProtectedDisplay>
-
+                  <div className="text-white relative">
+                    <Countdown countdownTarget={countdownTarget} />
                     {loading && (
-                      <div className="mt-2 text-white/90 text-sm text-right">
+                      <div className="absolute top-full mt-2 text-white/90 text-sm">
                         loading…
                       </div>
                     )}

app/(pages)/(hackers)/_components/HomeHacking/_components/Countdown.tsx

@@ -6,10 +6,10 @@ interface CountdownProps {
   countdownTarget?: number;
 }
 
-const HACKING_ENDS_TIME = new Date('2026-05-10T11:00:00-07:00').getTime(); // May 10, 2026 at 11:00 AM PDT
+const FALLBACK_HACKING_ENDS = new Date('2026-05-10T11:00:00-07:00').getTime(); // May 10, 2026 at 11:00 AM PDT
 
 export default function Countdown({
-  countdownTarget = HACKING_ENDS_TIME,
+  countdownTarget = FALLBACK_HACKING_ENDS,
 }: CountdownProps) {
   const [timeLeft, setTimeLeft] = useState({
     hours: 24,