diff --git a/src/app/components/PageLoader.tsx b/src/app/components/PageLoader.tsx
new file mode 100644
index 000000000..6c36d4b5d
--- /dev/null
+++ b/src/app/components/PageLoader.tsx
@@ -0,0 +1,9 @@
+import { Flex, Spinner } from '@radix-ui/themes';
+
+export function PageLoader() {
+ return (
+
+
+
+ );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c9912d2c8..bb5b82e8a 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -7,11 +7,11 @@ import { Roboto_Flex } from 'next/font/google';
import { usePathname } from 'next/navigation';
import { ReactNode, Suspense } from 'react';
import { Footer } from '../components/Footer';
-import { Loader } from '../components/Loader';
import Navbar, { NAVBAR_HEIGHT } from '../components/Navbar';
import { Party3 } from '../components/Party3';
import * as App from '../stores/app';
import { Checks } from './components/Checks';
+import { PageLoader } from './components/PageLoader';
import './layout.css';
config();
@@ -75,15 +75,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
-
-
-
- }
- >
- {children}
-
+ }>{children}
{!isEmbed && }
diff --git a/src/app/tools/tankopedia/[id]/layout.tsx b/src/app/tools/tankopedia/[id]/layout.tsx
index bdf20e7bc..83463f37b 100644
--- a/src/app/tools/tankopedia/[id]/layout.tsx
+++ b/src/app/tools/tankopedia/[id]/layout.tsx
@@ -1,7 +1,9 @@
import { ReactNode } from 'react';
+import { provisionDefinitions } from '../../../../core/blitzkit/provisionDefinitions';
import { tankDefinitions } from '../../../../core/blitzkit/tankDefinitions';
import { TIER_ROMAN_NUMERALS } from '../../../../core/blitzkit/tankDefinitions/constants';
import { tankIcon } from '../../../../core/blitzkit/tankIcon';
+import { useAwait } from '../../../../hooks/useAwait';
import strings from '../../../../lang/en-US.json';
import * as Duel from '../../../../stores/duel';
@@ -18,10 +20,16 @@ export default async function Layout({
const title = `${tank.name} - Tier ${TIER_ROMAN_NUMERALS[tank.tier]} ${
(strings.common.nations_adjectives as Record)[tank.nation]
} ${strings.common.tank_class_short[tank.class]}`;
- const description = `Statistics, armor profiles, and equipment for ${tank.name}`;
+ const description = `Statistics, armor, and equipment for ${tank.name}`;
+ const awaitedProvisionDefinitions = useAwait(provisionDefinitions);
return (
-
+
{title}
diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx
deleted file mode 100644
index d3be25895..000000000
--- a/src/components/Loader.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { blackA } from '@radix-ui/colors';
-import { Flex, Spinner, Text } from '@radix-ui/themes';
-import { theme } from '../stitches.config';
-
-const NAV_HEIGHT = 52.65;
-
-interface LoaderProps {
- naked?: boolean;
- progress?: number;
-}
-
-export function Loader({ naked, progress }: LoaderProps) {
- const animation = (
-
-
- {progress !== undefined && (
- {Math.round(progress * 100)}%
- )}
-
- );
-
- if (naked) return animation;
-
- return (
-
- {animation}
-
- );
-}
diff --git a/src/core/zustand/createNextSafeStore.tsx b/src/core/zustand/createNextSafeStore.tsx
index 0b7eb8762..368b18543 100644
--- a/src/core/zustand/createNextSafeStore.tsx
+++ b/src/core/zustand/createNextSafeStore.tsx
@@ -1,12 +1,5 @@
import { Draft, produce } from 'immer';
-import {
- createContext,
- ReactNode,
- useContext,
- useMemo,
- use as useReact,
- useRef,
-} from 'react';
+import { createContext, ReactNode, useContext, useRef } from 'react';
import { StoreApi, useStore as useStoreZustand } from 'zustand';
type StoreProviderProps = {
@@ -21,7 +14,7 @@ type ExtractState = S extends {
: never;
export function createNextSafeStore, InitData>(
- initialize: (data: InitData) => Store | Promise,
+ initialize: (data: InitData) => Store,
) {
type Type = Store extends StoreApi ? T : never;
@@ -29,12 +22,9 @@ export function createNextSafeStore, InitData>(
function Provider(props: StoreProviderProps) {
const storeRef = useRef();
- const storePromise = useMemo(
- async () => await initialize((props as { data: InitData }).data),
- [],
- );
- const awaitedStore = useReact(storePromise);
- if (!storeRef.current) storeRef.current = awaitedStore;
+ if (!storeRef.current) {
+ storeRef.current = initialize((props as { data: InitData }).data);
+ }
return (
diff --git a/src/stores/duel/index.ts b/src/stores/duel/index.ts
index fc90294e4..ba215defc 100644
--- a/src/stores/duel/index.ts
+++ b/src/stores/duel/index.ts
@@ -2,13 +2,12 @@
import { create } from 'zustand';
import { subscribeWithSelector } from 'zustand/middleware';
-import { provisionDefinitions } from '../../core/blitzkit/provisionDefinitions';
+import { ProvisionDefinitions } from '../../core/blitzkit/provisionDefinitions';
import {
EngineDefinition,
GunDefinition,
ShellDefinition,
TankDefinition,
- tankDefinitions,
TrackDefinition,
TurretDefinition,
} from '../../core/blitzkit/tankDefinitions';
@@ -50,11 +49,14 @@ export interface Duel {
}
export const { Provider, use, useMutation, useStore } = createNextSafeStore(
- async (id: number) => {
- const awaitedTankDefinitions = await tankDefinitions;
- const awaitedProvisionDefinitions = await provisionDefinitions;
- const tank = awaitedTankDefinitions[id];
- const protagonist = tankToDuelMember(tank, awaitedProvisionDefinitions);
+ ({
+ tank,
+ provisionDefinitions,
+ }: {
+ tank: TankDefinition;
+ provisionDefinitions: ProvisionDefinitions;
+ }) => {
+ const protagonist = tankToDuelMember(tank, provisionDefinitions);
return create()(
subscribeWithSelector(() => ({