|
|
import React from "react"; |
|
|
import { |
|
|
Box, |
|
|
CircularProgress, |
|
|
LinearProgress, |
|
|
Paper, |
|
|
Typography, |
|
|
} from "@mui/material"; |
|
|
|
|
|
interface ServerLoadingIndicatorProps { |
|
|
progress?: { |
|
|
attempt: number; |
|
|
maxAttempts: number; |
|
|
} | null; |
|
|
message?: string; |
|
|
} |
|
|
|
|
|
export const ServerLoadingIndicator: React.FC<ServerLoadingIndicatorProps> = ({ |
|
|
progress, |
|
|
message = "Starting server...", |
|
|
}) => { |
|
|
const progressPercentage = progress |
|
|
? Math.round((progress.attempt / progress.maxAttempts) * 100) |
|
|
: 0; |
|
|
|
|
|
|
|
|
const agentQuotes = [ |
|
|
"Agents are calibrating the space protocols...", |
|
|
"Teaching agents the fine art of space conquest...", |
|
|
"Agents are learning to navigate the cosmic frontier...", |
|
|
"Preparing agents for their intergalactic mission...", |
|
|
"Agents are studying the universe's source code...", |
|
|
"Installing agent confidence modules...", |
|
|
"Agents are fine-tuning their cosmic algorithms...", |
|
|
"Briefing agents on proper space etiquette...", |
|
|
"Agents are calculating optimal space trajectories...", |
|
|
"Teaching agents to think beyond planetary boundaries...", |
|
|
]; |
|
|
|
|
|
|
|
|
const currentQuoteIndex = progress |
|
|
? (progress.attempt - 1) % agentQuotes.length |
|
|
: 0; |
|
|
|
|
|
return ( |
|
|
<Box |
|
|
sx={{ |
|
|
display: "flex", |
|
|
alignItems: "center", |
|
|
justifyContent: "center", |
|
|
p: 2, |
|
|
}} |
|
|
> |
|
|
<Paper |
|
|
elevation={3} |
|
|
sx={{ |
|
|
display: "flex", |
|
|
flexDirection: "column", |
|
|
alignItems: "center", |
|
|
gap: 3, |
|
|
p: 4, |
|
|
borderRadius: 2, |
|
|
minWidth: 400, |
|
|
maxWidth: 500, |
|
|
}} |
|
|
> |
|
|
{/* Main spinner */} |
|
|
<CircularProgress size={48} color="secondary" /> |
|
|
|
|
|
{/* Status message */} |
|
|
<Typography |
|
|
variant="h6" |
|
|
sx={{ |
|
|
textAlign: "center", |
|
|
fontWeight: 500, |
|
|
color: "text.primary", |
|
|
}} |
|
|
> |
|
|
{message} |
|
|
</Typography> |
|
|
|
|
|
{/* Progress bar */} |
|
|
{progress && ( |
|
|
<Box sx={{ width: "100%", gap: 2, display: "flex", flexDirection: "column" }}> |
|
|
<LinearProgress |
|
|
variant="determinate" |
|
|
value={progressPercentage} |
|
|
sx={{ |
|
|
height: 8, |
|
|
borderRadius: 4, |
|
|
backgroundColor: "action.hover", |
|
|
"& .MuiLinearProgress-bar": { |
|
|
borderRadius: 4, |
|
|
}, |
|
|
}} |
|
|
/> |
|
|
|
|
|
{/* Fun rotating quote */} |
|
|
<Typography |
|
|
variant="body2" |
|
|
sx={{ |
|
|
color: "text.secondary", |
|
|
textAlign: "center", |
|
|
fontSize: "0.875rem", |
|
|
minHeight: "1.5em", |
|
|
fontStyle: "italic", |
|
|
}} |
|
|
> |
|
|
{agentQuotes[currentQuoteIndex]} |
|
|
</Typography> |
|
|
|
|
|
</Box> |
|
|
)} |
|
|
</Paper> |
|
|
</Box> |
|
|
); |
|
|
}; |
|
|
|
