File size: 3,031 Bytes
f52d137 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
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;
// Fun quotes about agents taking over
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...",
];
// Select quote based on progress attempt
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>
);
};
|