feat: faster tankopedia

src/app/components/PageLoader.tsx

@@ -0,0 +1,9 @@
+import { Flex, Spinner } from '@radix-ui/themes';
+
+export function PageLoader() {
+  return (
+    <Flex align="center" justify="center" flexGrow="1">
+      <Spinner />
+    </Flex>
+  );
+}

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) {
 
               <Checks />
 
-              <Suspense
-                fallback={
-                  <div style={{ flex: 1 }}>
-                    <Loader />
-                  </div>
-                }
-              >
-                {children}
-              </Suspense>
+              <Suspense fallback={<PageLoader />}>{children}</Suspense>
 
               {!isEmbed && <Footer />}
             </Flex>

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<string, string>)[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 (
-    <Duel.Provider data={id}>
+    <Duel.Provider
+      data={{
+        tank: awaitedTankDefinitions[id],
+        provisionDefinitions: awaitedProvisionDefinitions,
+      }}
+    >
       <title>{title}</title>
       <meta name="description" content={description} />
       <meta property="og:title" content={title} />