Fix recent games dropdown loading forever when no recent games

client/src/components/screens/HomePage/RecentGames.jsx

@@ -1,43 +1,41 @@
 import ms from "pretty-ms";
 import { dispatch } from "../../../domain/gameStore";
 import { useRecentGameInfo } from "../../../hooks/useGameInfo";
-import Loading from "../../util/Loading";
 import styles from "./HomePage.module.css";
 
 const RecentGames = () => {
   const recent = useRecentGameInfo();
-
-  if (!recent || recent.length === 0) {
-    return <Loading />;
-  }
-
   return (
     <div className={styles.recentSection}>
       <div className={styles.recentTitle}>Recently Created Games:</div>
-      {recent.map(({ gameId, gameMode, rounds, timer, player, numPlayers }) => (
-        <button
-          key={gameId}
-          type="button"
-          className={styles.recentItem}
-          onClick={() => dispatch.goToLobby(gameId)}
-        >
-          <div>
-            {gameMode
-              .split("_")
-              .map(part => part[0].toUpperCase() + part.slice(1).toLowerCase())
-              .join(" ")}
-            ,&nbsp;
-            {rounds} round(s),&nbsp;
-            {ms(timer * 1000)}
-          </div>
-          <div className={styles.recentPlayerInfo}>
-            <div className={styles.recentPlayerName}>
-              {player ?? "(no players)"}
+      {recent?.map(
+        ({ gameId, gameMode, rounds, timer, player, numPlayers }) => (
+          <button
+            key={gameId}
+            type="button"
+            className={styles.recentItem}
+            onClick={() => dispatch.goToLobby(gameId)}
+          >
+            <div>
+              {gameMode
+                .split("_")
+                .map(
+                  part => part[0].toUpperCase() + part.slice(1).toLowerCase()
+                )
+                .join(" ")}
+              ,&nbsp;
+              {rounds} round(s),&nbsp;
+              {ms(timer * 1000)}
+            </div>
+            <div className={styles.recentPlayerInfo}>
+              <div className={styles.recentPlayerName}>
+                {player ?? "(no players)"}
+              </div>
+              {numPlayers > 1 ? `+${numPlayers - 1}` : ""}
             </div>
-            {numPlayers > 1 ? `+${numPlayers - 1}` : ""}
-          </div>
-        </button>
-      ))}
+          </button>
+        )
+      )}
     </div>
   );
 };