diff --git a/src/app/tools/components/Loader.tsx b/src/app/tools/components/Loader.tsx index fd293d61f..f56e9088d 100644 --- a/src/app/tools/components/Loader.tsx +++ b/src/app/tools/components/Loader.tsx @@ -1,5 +1,5 @@ import { blackA } from '@radix-ui/colors'; -import { Flex } from '@radix-ui/themes'; +import { Flex, Text } from '@radix-ui/themes'; import { PuffLoader } from 'react-spinners'; import { theme } from '../../../stitches.config'; @@ -8,11 +8,26 @@ const NAV_HEIGHT = 52.65; interface LoaderProps { naked?: boolean; color?: string; + progress?: number; } -export function Loader({ naked, color }: LoaderProps) { +export function Loader({ naked, color, progress }: LoaderProps) { const animation = ( - +
+ {progress !== undefined && ( + + {Math.round(progress * 100)}% + + )} + +
); if (naked) return animation; diff --git a/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx b/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx index 6f8b5fd7c..fd90ffa34 100644 --- a/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx +++ b/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx @@ -1,24 +1,22 @@ import { Card, Flex, Tabs, Theme } from '@radix-ui/themes'; -import { Html } from '@react-three/drei'; import { Canvas } from '@react-three/fiber'; import { Suspense, use, useEffect, useRef, useState } from 'react'; import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits'; import { modelDefinitions } from '../../../../../../core/blitzkrieg/modelDefinitions'; import { modelTransformEvent } from '../../../../../../core/blitzkrieg/modelTransform'; import { Pose, poseEvent } from '../../../../../../core/blitzkrieg/pose'; -import { theme } from '../../../../../../stitches.config'; import { TankopediaMode, mutateTankopediaTemporary, useTankopediaTemporary, } from '../../../../../../stores/tankopedia'; -import { Loader } from '../../../../components/Loader'; import { Duel } from '../../page'; import { Controls } from '../Control'; import { Lighting } from '../Lighting'; import { QuickEquipments } from '../QuickEquipments'; import { RotationInputs } from '../RotationInputs'; import { SceneProps } from '../SceneProps'; +import { ModelLoader } from './components/ModelLoader'; import { Options } from './components/Options'; import { TankArmor } from './components/TankArmor'; import { TankModel } from './components/TankModel'; @@ -164,16 +162,7 @@ export function TankSandbox({ duel }: TankSandboxProps) { - - - - } - > + }> diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/ModelLoader.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/ModelLoader.tsx new file mode 100644 index 000000000..1e93ac2ef --- /dev/null +++ b/src/app/tools/tankopedia/[id]/components/Model/components/ModelLoader.tsx @@ -0,0 +1,17 @@ +import { Html, useProgress } from '@react-three/drei'; +import { theme } from '../../../../../../../stitches.config'; +import { Loader } from '../../../../../components/Loader'; + +export function ModelLoader() { + const { progress } = useProgress(); + + return ( + + + + ); +}