feat: optimize awaitables

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/InfoWithDelta.tsx

@@ -1,13 +1,11 @@
-import {
-  createDefaultSkills,
-  fetchEquipmentDefinitions,
-  fetchModelDefinitions,
-  fetchProvisionDefinitions,
-  fetchSkillDefinitions,
-  fetchTankDefinitions,
-} from '@blitzkit/core';
+import { createDefaultSkills } from '@blitzkit/core';
 import { Flex, Progress, Text } from '@radix-ui/themes';
 import { useMemo, type ComponentProps } from 'react';
+import { awaitableEquipmentDefinitions } from '../../../../../../core/awaitables/equipmentDefinitions';
+import { awaitableModelDefinitions } from '../../../../../../core/awaitables/modelDefinitions';
+import { awaitableProvisionDefinitions } from '../../../../../../core/awaitables/provisionDefinitions';
+import { awaitableSkillDefinitions } from '../../../../../../core/awaitables/skillDefinitions';
+import { awaitableTankDefinitions } from '../../../../../../core/awaitables/tankDefinitions';
 import {
   tankCharacteristics,
   type TankCharacteristics,
@@ -29,11 +27,19 @@ interface InfoWithDeltaProps extends InfoProps {
   noRanking?: boolean;
 }
 
-const tankDefinitions = await fetchTankDefinitions();
-const provisionDefinitions = await fetchProvisionDefinitions();
-const equipmentDefinitions = await fetchEquipmentDefinitions();
-const tankModelDefinitions = await fetchModelDefinitions();
-const skillDefinitions = await fetchSkillDefinitions();
+const [
+  tankDefinitions,
+  provisionDefinitions,
+  equipmentDefinitions,
+  modelDefinitions,
+  skillDefinitions,
+] = await Promise.all([
+  awaitableTankDefinitions,
+  awaitableProvisionDefinitions,
+  awaitableEquipmentDefinitions,
+  awaitableModelDefinitions,
+  awaitableSkillDefinitions,
+]);
 
 export function InfoWithDelta({
   value,
@@ -90,7 +96,7 @@ export function InfoWithDelta({
           {
             equipmentDefinitions,
             provisionDefinitions,
-            tankModelDefinition: tankModelDefinitions.models[tank.id],
+            tankModelDefinition: modelDefinitions.models[tank.id],
           },
         );
       })

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/index.tsx

@@ -3,8 +3,6 @@ import {
   coefficient,
   CREW_MEMBER_NAMES,
   CrewType,
-  fetchEquipmentDefinitions,
-  fetchProvisionDefinitions,
   GUN_TYPE_NAMES,
   isExplosive,
   resolvePenetrationCoefficient,
@@ -24,6 +22,8 @@ import { debounce } from 'lodash-es';
 import { useEffect, useRef, useState } from 'react';
 import { Fragment } from 'react/jsx-runtime';
 import { lerp } from 'three/src/math/MathUtils.js';
+import { awaitableEquipmentDefinitions } from '../../../../../core/awaitables/equipmentDefinitions';
+import { awaitableProvisionDefinitions } from '../../../../../core/awaitables/provisionDefinitions';
 import { applyPitchYawLimits } from '../../../../../core/blitz/applyPitchYawLimits';
 import { tankCharacteristics } from '../../../../../core/blitzkit/tankCharacteristics';
 import { useEquipment } from '../../../../../hooks/useEquipment';
@@ -33,8 +33,10 @@ import { TankopediaEphemeral } from '../../../../../stores/tankopediaEphemeral';
 import { Info } from './components/Info';
 import { InfoWithDelta } from './components/InfoWithDelta';
 
-const equipmentDefinitions = await fetchEquipmentDefinitions();
-const provisionDefinitions = await fetchProvisionDefinitions();
+const [equipmentDefinitions, provisionDefinitions] = await Promise.all([
+  awaitableEquipmentDefinitions,
+  awaitableProvisionDefinitions,
+]);
 
 export function Characteristics() {
   const mutateDuel = Duel.useMutation();

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Consumables.tsx

@@ -1,4 +1,3 @@
-import { fetchConsumableDefinitions } from '@blitzkit/core';
 import { checkConsumableProvisionInclusivity } from '@blitzkit/core/src/blitzkit/checkConsumableProvisionInclusivity';
 import { InfoCircledIcon } from '@radix-ui/react-icons';
 import {
@@ -9,12 +8,13 @@ import {
   Popover,
   Text,
 } from '@radix-ui/themes';
+import { awaitableConsumableDefinitions } from '../../../../core/awaitables/consumableDefinitions';
 import { useEquipment } from '../../../../hooks/useEquipment';
 import { Duel } from '../../../../stores/duel';
 import { ConsumablesManager } from '../../../ConsumablesManager';
 import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
 
-const consumableDefinitions = await fetchConsumableDefinitions();
+const consumableDefinitions = await awaitableConsumableDefinitions;
 
 export function Consumables() {
   const mutateDuel = Duel.useMutation();

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Equipment.tsx

@@ -1,10 +1,10 @@
-import { fetchEquipmentDefinitions } from '@blitzkit/core';
 import { Button, Flex, Heading } from '@radix-ui/themes';
+import { awaitableEquipmentDefinitions } from '../../../../core/awaitables/equipmentDefinitions';
 import { Duel } from '../../../../stores/duel';
 import { EquipmentManager } from '../../../EquipmentManager';
 import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
 
-const equipmentDefinitions = await fetchEquipmentDefinitions();
+const equipmentDefinitions = await awaitableEquipmentDefinitions;
 
 export function Equipment() {
   const mutateDuel = Duel.useMutation();

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Modules.tsx

@@ -1,7 +1,6 @@
 import {
   asset,
   EngineDefinition,
-  fetchTankDefinitions,
   formatCompact,
   GunDefinition,
   ModuleType,
@@ -21,6 +20,7 @@ import {
   Link,
   Text,
 } from '@radix-ui/themes';
+import { awaitableTankDefinitions } from '../../../../core/awaitables/tankDefinitions';
 import { Duel } from '../../../../stores/duel';
 import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
 
@@ -138,7 +138,7 @@ function ModuleButton({
   );
 }
 
-const tankDefinitions = await fetchTankDefinitions();
+const tankDefinitions = await awaitableTankDefinitions;
 
 export function Modules() {
   const mutateDuel = Duel.useMutation();

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Provisions.tsx

@@ -1,10 +1,11 @@
-import { availableProvisions, fetchProvisionDefinitions } from '@blitzkit/core';
+import { availableProvisions } from '@blitzkit/core';
 import { Button, Flex, Heading } from '@radix-ui/themes';
+import { awaitableProvisionDefinitions } from '../../../../core/awaitables/provisionDefinitions';
 import { Duel } from '../../../../stores/duel';
 import { ProvisionsManager } from '../../../ProvisionsManager';
 import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
 
-const provisionDefinitions = await fetchProvisionDefinitions();
+const provisionDefinitions = await awaitableProvisionDefinitions;
 
 export function Provisions() {
   const mutateDuel = Duel.useMutation();

packages/website/src/components/Tankopedia/GameModeSection.tsx

@@ -1,15 +1,16 @@
-import {
-  asset,
-  fetchConsumableDefinitions,
-  fetchGameDefinitions,
-  fetchProvisionDefinitions,
-} from '@blitzkit/core';
+import { asset } from '@blitzkit/core';
 import { Box, Flex, Heading, Text } from '@radix-ui/themes';
+import { awaitableConsumableDefinitions } from '../../core/awaitables/consumableDefinitions';
+import { awaitableGameDefinitions } from '../../core/awaitables/gameDefinitions';
+import { awaitableProvisionDefinitions } from '../../core/awaitables/provisionDefinitions';
 import { Duel } from '../../stores/duel';
 
-const gameDefinitions = await fetchGameDefinitions();
-const consumableDefinitions = await fetchConsumableDefinitions();
-const provisionDefinitions = await fetchProvisionDefinitions();
+const [gameDefinitions, consumableDefinitions, provisionDefinitions] =
+  await Promise.all([
+    awaitableGameDefinitions,
+    awaitableConsumableDefinitions,
+    awaitableProvisionDefinitions,
+  ]);
 
 export function GameModeSection() {
   const tank = Duel.use((state) => state.protagonist.tank);

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Control.tsx

@@ -1,9 +1,9 @@
-import { fetchModelDefinitions } from '@blitzkit/core';
 import { OrbitControls } from '@react-three/drei';
 import { invalidate, useThree } from '@react-three/fiber';
 import { useEffect, useRef, useState } from 'react';
 import { Vector3 } from 'three';
 import { OrbitControls as OrbitControlsClass } from 'three-stdlib';
+import { awaitableModelDefinitions } from '../../../../../../core/awaitables/modelDefinitions';
 import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits';
 import { hasEquipment } from '../../../../../../core/blitzkit/hasEquipment';
 import { Pose, poseEvent } from '../../../../../../core/blitzkit/pose';
@@ -17,7 +17,7 @@ const poseDistances: Record<Pose, number> = {
   [Pose.Default]: -1,
 };
 
-const modelDefinitions = await fetchModelDefinitions();
+const modelDefinitions = await awaitableModelDefinitions;
 
 export function Controls() {
   const duelStore = Duel.useStore();

packages/website/src/components/Tankopedia/HeroSection/index.tsx

@@ -1,8 +1,9 @@
-import { fetchTankDefinitions, TankType } from '@blitzkit/core';
+import { TankType } from '@blitzkit/core';
 import { Box, Flex, Heading, Text } from '@radix-ui/themes';
 import { times } from 'lodash-es';
 import { Suspense, useEffect, useMemo, useRef } from 'react';
 import { NAVBAR_HEIGHT } from '../../../constants/navbar';
+import { awaitableTankDefinitions } from '../../../core/awaitables/tankDefinitions';
 import { Var } from '../../../core/radix/var';
 import { useFullScreen } from '../../../hooks/useFullScreen';
 import { Duel } from '../../../stores/duel';
@@ -14,7 +15,7 @@ import { Options } from './components/Options';
 import { TankSandbox } from './components/TankSandbox';
 import { TankSandboxLoader } from './components/TankSandboxLoader';
 
-const tankDefinitions = await fetchTankDefinitions();
+const tankDefinitions = await awaitableTankDefinitions;
 
 export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
   const canvas = useRef<HTMLCanvasElement>(null);

packages/website/src/components/Tankopedia/MetaSection/index.tsx

@@ -1,8 +1,6 @@
 import {
   assertSecret,
   asset,
-  fetchModelDefinitions,
-  fetchProvisionDefinitions,
   TankPriceType,
   TankType,
   TIER_ROMAN_NUMERALS,
@@ -11,6 +9,8 @@ import strings from '@blitzkit/core/lang/en-US.json';
 import { ChevronLeftIcon, MixIcon, UpdateIcon } from '@radix-ui/react-icons';
 import { Button, Code, Dialog, Flex, Link } from '@radix-ui/themes';
 import { useState } from 'react';
+import { awaitableModelDefinitions } from '../../../core/awaitables/modelDefinitions';
+import { awaitableProvisionDefinitions } from '../../../core/awaitables/provisionDefinitions';
 import { tankToDuelMember } from '../../../core/blitzkit/tankToDuelMember';
 import { App } from '../../../stores/app';
 import { Duel } from '../../../stores/duel';
@@ -20,8 +20,10 @@ import { ScienceIcon } from '../../ScienceIcon';
 import { TankSearch } from '../../TankSearch';
 import { Listing } from './components/Listing';
 
-const provisionDefinitions = await fetchProvisionDefinitions();
-const modelDefinitions = await fetchModelDefinitions();
+const [provisionDefinitions, modelDefinitions] = await Promise.all([
+  awaitableProvisionDefinitions,
+  awaitableModelDefinitions,
+]);
 
 export function MetaSection() {
   const developerMode = App.useDeferred((state) => state.developerMode, false);

packages/website/src/components/Tankopedia/TechTreeSection/components/Node.tsx

@@ -1,11 +1,7 @@
-import {
-  asset,
-  fetchAverageDefinitions,
-  fetchTankDefinitions,
-  formatCompact,
-  TIER_ROMAN_NUMERALS,
-} from '@blitzkit/core';
+import { asset, formatCompact, TIER_ROMAN_NUMERALS } from '@blitzkit/core';
 import { Box, Flex, Link, Skeleton, Text } from '@radix-ui/themes';
+import { awaitableAverageDefinitions } from '../../../../core/awaitables/averageDefinitions';
+import { awaitableTankDefinitions } from '../../../../core/awaitables/tankDefinitions';
 import { TankopediaEphemeral } from '../../../../stores/tankopediaEphemeral';
 import type { MaybeSkeletonComponentProps } from '../../../../types/maybeSkeletonComponentProps';
 
@@ -15,8 +11,10 @@ type NodeProps = MaybeSkeletonComponentProps & {
   highlight?: boolean;
 };
 
-const tankDefinitions = await fetchTankDefinitions();
-const averageDefinitions = await fetchAverageDefinitions();
+const [tankDefinitions, averageDefinitions] = await Promise.all([
+  awaitableTankDefinitions,
+  awaitableAverageDefinitions,
+]);
 
 export function Node({ id, highlight, nextIds, skeleton }: NodeProps) {
   const xpMultiplier = TankopediaEphemeral.use((state) => state.xpMultiplier);

packages/website/src/components/Tankopedia/TechTreeSection/index.tsx

@@ -1,7 +1,8 @@
-import { asset, fetchTankDefinitions, imgur, TankType } from '@blitzkit/core';
+import { asset, imgur, TankType } from '@blitzkit/core';
 import { CaretLeftIcon, CaretRightIcon, PlusIcon } from '@radix-ui/react-icons';
 import { Flex, Heading, IconButton, ScrollArea, Text } from '@radix-ui/themes';
 import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
+import { awaitableTankDefinitions } from '../../../core/awaitables/tankDefinitions';
 import { Duel } from '../../../stores/duel';
 import { TankopediaEphemeral } from '../../../stores/tankopediaEphemeral';
 import type { MaybeSkeletonComponentProps } from '../../../types/maybeSkeletonComponentProps';
@@ -10,7 +11,7 @@ import { Node } from './components/Node';
 
 type Line = number[];
 
-const tankDefinitions = await fetchTankDefinitions();
+const tankDefinitions = await awaitableTankDefinitions;
 
 export const XP_MULTIPLIERS = [1, 2, 3, 4, 5, 10];
 

packages/website/src/components/Tankopedia/VideoSection.tsx

@@ -1,12 +1,13 @@
-import { fetchReviews, youtubers } from '@blitzkit/core';
+import { youtubers } from '@blitzkit/core';
 import { Box, Flex, Heading, Link, Skeleton, Text } from '@radix-ui/themes';
+import { awaitableReviews } from '../../core/awaitables/reviews';
 import { Var } from '../../core/radix/var';
 import { Duel } from '../../stores/duel';
 import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps';
 import { PageWrapper } from '../PageWrapper';
 import { VerifiedIcon } from '../VerifiedIcon';
 
-const reviews = await fetchReviews();
+const reviews = await awaitableReviews;
 
 export function VideoSection({ skeleton }: MaybeSkeletonComponentProps) {
   const tank = Duel.use((state) => state.protagonist.tank);