perf: reactive updates

packages/website/src/components/PlaylistOrder.tsx

@@ -1,11 +1,9 @@
 import { Box, Flex } from "@radix-ui/themes";
-import { useLocale } from "../hooks/useLocale";
 import { CurrentlyPlaying } from "./CurrentlyPlaying";
 import { PlaylistActions } from "./PlaylistActions";
 import { PlaylistTable } from "./PlaylistTable";
 
 export function PlaylistOrder() {
-
   return (
     <Flex
       direction="column"

packages/website/src/components/PlaylistTankEntry.tsx

@@ -1,5 +1,6 @@
 import { MinusCircledIcon } from "@radix-ui/react-icons";
 import { Checkbox, IconButton, Table } from "@radix-ui/themes";
+import { memo } from "react";
 import { useLocale } from "../hooks/useLocale";
 import { Playlist, type PlaylistEntry } from "../stores/playlist";
 import { TankRowHeaderCell } from "./TankRowHeaderCell";
@@ -8,13 +9,8 @@ interface Props extends PlaylistEntry {
   index: number;
 }
 
-export function PlaylistTankEntry({
+export const PlaylistTankEntry = memo<Props>(
-  tank,
+  ({ tank, checked, last, battles, index }) => {
-  checked,
-  last,
-  battles,
-  index,
-}: Props) {
     const { locale, strings } = useLocale();
     const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
     const nowDays = Date.now() / (1000 * 60 * 60 * 24);
@@ -59,4 +55,11 @@ export function PlaylistTankEntry({
         </Table.Cell>
       </Table.Row>
     );
-}
+  },
+  (a, b) =>
+    a.checked === b.checked &&
+    a.battles === b.battles &&
+    a.last === b.last &&
+    a.wins === b.wins &&
+    a.index === b.index
+);

packages/website/src/pages/[...locale]/playlist/_index.tsx

@@ -16,7 +16,7 @@ export function Page({
   locale,
   skeleton,
 }: Props & MaybeSkeletonComponentProps) {
-  const list = Playlist.use((state) => state.list);
+  const generated = Playlist.use((state) => state.list !== undefined);
   const wargaming = App.use((state) => state.logins.wargaming);
 
   useEffect(() => {
@@ -30,8 +30,8 @@ export function Page({
   return (
     <LocaleProvider locale={locale}>
       <PageWrapper color="tomato" direction="row" maxWidth="unset" p="0">
-        {!list && <PlaylistGenerator />}
+        {!generated && <PlaylistGenerator />}
-        {list && <PlaylistOrder />}
+        {generated && <PlaylistOrder />}
       </PageWrapper>
     </LocaleProvider>
   );