improve loading state of players

src/components/databases/PlayerCard.tsx

@@ -1,28 +1,33 @@
 import { commands } from "@/bindings";
 import { Player, PlayerGameInfo } from "@/utils/db";
 import { unwrap } from "@/utils/invoke";
-import { Loader } from "@mantine/core";
+import { Center, Group, Loader, Paper, Stack, Text } from "@mantine/core";
 import { useEffect, useState } from "react";
 import PersonalPlayerCard from "../home/PersonalCard";
+import useSWRImmutable from "swr/immutable";
 
 function PlayerCard({ player, file }: { player: Player; file: string }) {
-  const [info, setInfo] = useState<PlayerGameInfo | null>(null);
-
-  useEffect(() => {
-    async function fetchGames() {
-      const games = await commands.getPlayersGameInfo(file, player.id);
-      setInfo(unwrap(games));
-    }
-    fetchGames();
-  }, [file, player]);
+  const { data: info, isLoading } = useSWRImmutable(
+    ["player-game-info", file, player.id],
+    async ([key, file, id]) => {
+      const games = await commands.getPlayersGameInfo(file, id);
+      return unwrap(games);
+    },
+  );
 
   return (
     <>
-      {info ? (
-        <PersonalPlayerCard name={player.name} info={info} />
-      ) : (
-        <Loader />
+      {isLoading && (
+        <Paper withBorder h="100%">
+          <Center h="100%">
+            <Stack align="center">
+              <Text fw="bold">Processing player data...</Text>
+              <Loader />
+            </Stack>
+          </Center>
+        </Paper>
       )}
+      {info && <PersonalPlayerCard name={player.name} info={info} />}
     </>
   );
 }