diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json index be88518f9..edb890560 100644 --- a/packages/i18n/strings/en.json +++ b/packages/i18n/strings/en.json @@ -863,7 +863,7 @@ "reset": "Reset", "shuffle": "Shuffle", "remove": "Remove played", - "tracking": "BlitzKit is tracking your playlist", + "tracking": "BlitzKit is tracking your battles", "sort": { "button": "Sort by", @@ -881,7 +881,6 @@ "wins": "Wins" }, - "no_login_warning": "You are not logged in. BlitzKit will not keep track of your played tanks.", "generate": "Generate playlist", "name": "Playlist", "description": "Tank playlist generator", diff --git a/packages/website/src/components/PlaylistGenerator.tsx b/packages/website/src/components/PlaylistGenerator.tsx index 8a7260079..c4c279102 100644 --- a/packages/website/src/components/PlaylistGenerator.tsx +++ b/packages/website/src/components/PlaylistGenerator.tsx @@ -1,7 +1,6 @@ import { fisherYates, tankIcon } from "@blitzkit/core"; import { literals } from "@blitzkit/i18n"; -import { ExclamationTriangleIcon } from "@radix-ui/react-icons"; -import { Box, Button, Flex, Grid, Text } from "@radix-ui/themes"; +import { Box, Button, Flex, Grid, Skeleton, Text } from "@radix-ui/themes"; import { useMemo } from "react"; import usePromise from "react-promise-suspense"; import { awaitableTankDefinitions } from "../core/awaitables/tankDefinitions"; @@ -10,6 +9,7 @@ import { generatePlaylist } from "../core/blitzkit/generatePlaylist"; import { useLocale } from "../hooks/useLocale"; import { App } from "../stores/app"; import { TankFilters } from "../stores/tankFilters"; +import type { MaybeSkeletonComponentProps } from "../types/maybeSkeletonComponentProps"; import { LinkI18n } from "./LinkI18n"; import { FilterControl } from "./TankSearch/components/FilterControl"; @@ -17,7 +17,7 @@ const tankDefinitions = await awaitableTankDefinitions; const POOL_HEIGHT = "16rem"; -export function PlaylistGenerator() { +export function PlaylistGenerator({ skeleton }: MaybeSkeletonComponentProps) { const { strings, locale } = useLocale(); const wargaming = App.use((state) => state.logins.wargaming); const filters = TankFilters.use(); @@ -47,15 +47,6 @@ export function PlaylistGenerator() { - - {!wargaming && ( - - - - {strings.website.tools.playlist.no_login_warning} - - - )} - {tanksTrimmed.map((tank) => ( - - ))} + {tanksTrimmed.map((tank) => + skeleton ? ( + + + + ) : ( + + ) + )} state.list !== undefined); - const wargaming = App.use((state) => state.logins.wargaming); - useEffect(() => { - if (wargaming) { - TankFilters.mutate((draft) => { - draft.ownership = "owned"; - }); - } - }, []); + if (App.state.logins.wargaming) TankFilters.state.ownership = "owned"; return ( - {!generated && } + {!generated && } {generated && }