diff --git a/src/renderer/src/hooks/use-library.ts b/src/renderer/src/hooks/use-library.ts
index 0edd29ba..f7310df0 100644
--- a/src/renderer/src/hooks/use-library.ts
+++ b/src/renderer/src/hooks/use-library.ts
@@ -7,25 +7,9 @@ export function useLibrary() {
const library = useAppSelector((state) => state.library.value);
const updateLibrary = useCallback(async () => {
- return window.electron.getLibrary().then(async (updatedLibrary) => {
- const libraryWithAchievements = await Promise.all(
- updatedLibrary.map(async (game) => {
- const unlockedAchievements =
- await window.electron.getUnlockedAchievements(
- game.objectId,
- game.shop
- );
-
- return {
- ...game,
- unlockedAchievementCount:
- game.unlockedAchievementCount || unlockedAchievements.length,
- };
- })
- );
-
- dispatch(setLibrary(libraryWithAchievements));
- });
+ return window.electron
+ .getLibrary()
+ .then((updatedLibrary) => dispatch(setLibrary(updatedLibrary)));
}, [dispatch]);
return { library, updateLibrary };
diff --git a/src/renderer/src/pages/library/library-game-card-large.tsx b/src/renderer/src/pages/library/library-game-card-large.tsx
index 292290ca..9aba4b08 100644
--- a/src/renderer/src/pages/library/library-game-card-large.tsx
+++ b/src/renderer/src/pages/library/library-game-card-large.tsx
@@ -1,7 +1,7 @@
import { LibraryGame } from "@types";
import { useGameCard } from "@renderer/hooks";
import { ClockIcon, AlertFillIcon, TrophyIcon } from "@primer/octicons-react";
-import { memo, useMemo } from "react";
+import { memo, useEffect, useMemo, useState } from "react";
import "./library-game-card-large.scss";
interface LibraryGameCardLargeProps {
@@ -48,6 +48,20 @@ export const LibraryGameCardLarge = memo(function LibraryGameCardLarge({
]
);
+ const [unlockedAchievementsCount, setUnlockedAchievementsCount] = useState(
+ game.unlockedAchievementCount ?? 0
+ );
+
+ useEffect(() => {
+ if (game.unlockedAchievementCount) return;
+
+ window.electron
+ .getUnlockedAchievements(game.objectId, game.shop)
+ .then((achievements) => {
+ setUnlockedAchievementsCount(achievements.length);
+ });
+ }, [game]);
+
const backgroundStyle = useMemo(
() =>
backgroundImage ? { backgroundImage: `url(${backgroundImage})` } : {},
@@ -56,9 +70,9 @@ export const LibraryGameCardLarge = memo(function LibraryGameCardLarge({
const achievementBarStyle = useMemo(
() => ({
- width: `${((game.unlockedAchievementCount ?? 0) / (game.achievementCount ?? 1)) * 100}%`,
+ width: `${(unlockedAchievementsCount / (game.achievementCount ?? 1)) * 100}%`,
}),
- [game.unlockedAchievementCount, game.achievementCount]
+ [unlockedAchievementsCount, game.achievementCount]
);
const logoImage = game.customLogoImageUrl ?? game.logoImageUrl;
@@ -116,14 +130,12 @@ export const LibraryGameCardLarge = memo(function LibraryGameCardLarge({
className="library-game-card-large__achievement-trophy"
/>
- {game.unlockedAchievementCount ?? 0} /{" "}
- {game.achievementCount ?? 0}
+ {unlockedAchievementsCount} / {game.achievementCount ?? 0}
{Math.round(
- ((game.unlockedAchievementCount ?? 0) /
- (game.achievementCount ?? 1)) *
+ (unlockedAchievementsCount / (game.achievementCount ?? 1)) *
100
)}
%