chore: merge with main

src/renderer/src/pages/game-details/game-details.tsx

@@ -1,6 +1,6 @@
 import Color from "color";
 import { average } from "color.js";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 
 import type {
@@ -33,6 +33,7 @@ export function GameDetails() {
   const { objectID, shop } = useParams();
 
   const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingRandomGame, setIsLoadingRandomGame] = useState(false);
   const [color, setColor] = useState("");
   const [gameDetails, setGameDetails] = useState<ShopDetails | null>(null);
   const [howLongToBeat, setHowLongToBeat] = useState<{
@@ -53,18 +54,10 @@ export function GameDetails() {
   const [showRepacksModal, setShowRepacksModal] = useState(false);
   const [showSelectFolderModal, setShowSelectFolderModal] = useState(false);
 
-  const randomGameObjectID = useRef<string | null>(null);
-
   const dispatch = useAppDispatch();
 
   const { game: gameDownloading, startDownload, isDownloading } = useDownload();
 
-  const getRandomGame = useCallback(() => {
-    window.electron.getRandomGame().then((objectID) => {
-      randomGameObjectID.current = objectID;
-    });
-  }, []);
-
   const handleImageSettled = useCallback((url: string) => {
     average(url, { amount: 1, format: "hex" })
       .then((color) => {
@@ -89,8 +82,6 @@ export function GameDetails() {
     setIsGamePlaying(false);
     dispatch(setHeaderTitle(""));
 
-    getRandomGame();
-
     window.electron
       .getGameShopDetails(objectID!, "steam", getSteamLanguage(i18n.language))
       .then((result) => {
@@ -107,6 +98,7 @@ export function GameDetails() {
 
         setGameDetails(result);
         dispatch(setHeaderTitle(result.name));
+        setIsLoadingRandomGame(false);
       })
       .finally(() => {
         setIsLoading(false);
@@ -114,7 +106,7 @@ export function GameDetails() {
 
     getGame();
     setHowLongToBeat({ isLoading: true, data: null });
-  }, [getGame, getRandomGame, dispatch, navigate, objectID, i18n.language]);
+  }, [getGame, dispatch, navigate, objectID, i18n.language]);
 
   const isGameDownloading = isDownloading && gameDownloading?.id === game?.id;
 
@@ -158,16 +150,15 @@ export function GameDetails() {
     });
   };
 
-  const handleRandomizerClick = () => {
-    if (!randomGameObjectID.current) return;
+  const handleRandomizerClick = async () => {
+    setIsLoadingRandomGame(true);
+    const randomGameObjectID = await window.electron.getRandomGame();
 
     const searchParams = new URLSearchParams({
       fromRandomizer: "1",
     });
 
-    navigate(
-      `/game/steam/${randomGameObjectID.current}?${searchParams.toString()}`
-    );
+    navigate(`/game/steam/${randomGameObjectID}?${searchParams.toString()}`);
   };
 
   const fromRandomizer = searchParams.get("fromRandomizer");
@@ -281,6 +272,7 @@ export function GameDetails() {
           className={styles.randomizerButton}
           onClick={handleRandomizerClick}
           theme="outline"
+          disabled={isLoadingRandomGame}
         >
           <div style={{ width: 16, height: 16, position: "relative" }}>
             <Lottie

src/renderer/src/pages/home/home.tsx

@@ -58,14 +58,12 @@ export function Home() {
   const getRandomGame = useCallback(() => {
     setIsLoadingRandomGame(true);
 
-    window.electron
-      .getRandomGame()
-      .then((objectID) => {
+    window.electron.getRandomGame().then((objectID) => {
+      if (objectID) {
         randomGameObjectID.current = objectID;
-      })
-      .finally(() => {
         setIsLoadingRandomGame(false);
-      });
+      }
+    });
   }, []);
 
   const handleRandomizerClick = () => {