fix calc message & format day count

src/app/page.tsx

@@ -53,21 +53,31 @@ export default function Home() {
     setInterval(updateRank, 1000 * 60 * 1); // update every minute
   }, [mounted, updateRank]);
 
-  return (
-    <main className="text-xl text-white">
-      {!playerId && <p>Invalid player ID</p>}
+  /**
+   * {!playerId && <p>Invalid player ID</p>}
       {!rank && <p>Invalid rank</p>}
       {!ppDiff && <p>Calculating...</p>}
-      {ppDiff && (
-        <div className="flex gap-1 flex-col p-2">
+   */
+  if (!playerId || !rank || !ppDiff) {
+    return (
+      <main className="text-xl text-white">
+        <p>Calculating...</p>
+      </main>
+    );
+  }
+
+  return (
+    <main className="text-xl text-white">
+      <div className="flex gap-1 flex-col p-2">
+        <p>
+          {formatNumber(ppDiff, 2)}pp until rank {formatNumber(rank)}
+        </p>
+        {startedAt && (
           <p>
-            {formatNumber(ppDiff, 2)}pp until rank {formatNumber(rank)}
+            Day {formatNumber(getDaysSince(new Date(Number(startedAt))) + 1)}
           </p>
-          {startedAt && (
-            <p>Day {getDaysSince(new Date(Number(startedAt))) + 1}</p>
-          )}
-        </div>
-      )}
+        )}
+      </div>
     </main>
   );
 }