Tribes2/t2-mapper
1
0
Fork 0
mirror of https://github.com/exogen/t2-mapper.git synced 2026-04-25 14:25:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

move LoadingSpinner

Browse source
This commit is contained in:
Brian Beck 2025-12-02 22:16:40 -08:00
parent 2f23934de0
commit 5d0a8a3fab
12 changed files with 55 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/components/Mission.tsx
View file

@ -1,5 +1,4 @@
import { useQuery } from "@tanstack/react-query";
import { Html } from "@react-three/drei";
import picomatch from "picomatch";
import { loadMission } from "../loaders";
import { type ParsedMission } from "../mission";
@ -86,34 +85,25 @@ function useExecutedMission(
return missionGroup;
}
function LoadingSpinner() {
return (
<Html>
<div
style={{
position: "fixed",
top: "50%",
left: "50%",
width: 48,
height: 48,
border: "4px solid rgba(255, 255, 255, 0.2)",
borderTopColor: "white",
borderRadius: "50%",
animation: "spin 1s linear infinite",
pointerEvents: "none",
}}
/>
<style>{`@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } from { transform: translate(-50%, -50%) rotate(0deg); } }`}</style>
</Html>
);
interface MissionProps {
name: string;
onLoadingChange?: (isLoading: boolean) => void;
}
export const Mission = memo(function Mission({ name }: { name: string }) {
export const Mission = memo(function Mission({
name,
onLoadingChange,
}: MissionProps) {
const { data: parsedMission } = useParsedMission(name);
const missionGroup = useExecutedMission(name, parsedMission);
const isLoading = !missionGroup;
if (!missionGroup) {
return <LoadingSpinner />;
useEffect(() => {
onLoadingChange?.(isLoading);
}, [isLoading, onLoadingChange]);
if (isLoading) {
return null;
}
return <TickProvider>{renderObject(missionGroup)}</TickProvider>;