fix: move useEffect before conditional

Author: debater-coder

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "1.5.2-beta",
+  "version": "1.5.3-beta",
   "scripts": {
     "dev": "npm-run-all --parallel dev:*",
     "dev:run": "FORCE_COLOR=1 vite",

apps/client/src/routes/Main/Home/Countdown.tsx

@@ -30,18 +30,22 @@ export default function Countdown({
   const nextPeriod =
     activeIndex && activeIndex > 0 ? dtt?.periods[activeIndex + 1] : undefined;
 
-  if (!nextPeriod) return null;
-
   useEffect(() => {
+    if (!nextPeriod) return;
+
+    const duration = DateTime.fromISO(nextPeriod.startTime).diffNow();
+
     const timer = setInterval(() => {
       setCountdown(
-        DateTime.fromISO(nextPeriod.startTime).diffNow().toFormat("hh:mm:ss")
+        duration.milliseconds > 0 ? duration.toFormat("hh:mm:ss") : "Now"
       );
     }, 500);
 
     return () => clearInterval(timer);
   });
 
+  if (!nextPeriod) return null;
+
   return (
     <Skeleton isLoaded={isLoaded}>
       <Flex