fix slot machine loading and healthchecks

client/src/main.jsx

@@ -10,7 +10,6 @@ import { Tutorial } from "./pages/Tutorial";
 import Debug from "./pages/Debug";
 import { Universe } from "./pages/Universe";
 import { SoundProvider } from "./contexts/SoundContext";
-import { ServiceStatusProvider } from "./contexts/ServiceStatusContext";
 import { GameNavigation } from "./components/GameNavigation";
 import { AppBackground } from "./components/AppBackground";
 import "./index.css";
@@ -19,19 +18,17 @@ ReactDOM.createRoot(document.getElementById("root")).render(
   <ThemeProvider theme={theme}>
     <CssBaseline />
     <SoundProvider>
-      <ServiceStatusProvider>
-        <BrowserRouter>
-          <GameNavigation />
-          <AppBackground />
-          <Routes>
-            <Route path="/" element={<Home />} />
-            <Route path="/game" element={<Game />} />
-            <Route path="/tutorial" element={<Tutorial />} />
-            <Route path="/debug" element={<Debug />} />
-            <Route path="/universe" element={<Universe />} />
-          </Routes>
-        </BrowserRouter>
-      </ServiceStatusProvider>
+      <BrowserRouter>
+        <GameNavigation />
+        <AppBackground />
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/game" element={<Game />} />
+          <Route path="/tutorial" element={<Tutorial />} />
+          <Route path="/debug" element={<Debug />} />
+          <Route path="/universe" element={<Universe />} />
+        </Routes>
+      </BrowserRouter>
     </SoundProvider>
   </ThemeProvider>
 );

client/src/pages/Game.jsx

@@ -329,8 +329,8 @@ function GameContent() {
     );
   }
 
-  // Show loading state while session is initializing
-  if (isSessionLoading) {
+  // Show loading state while session is initializing or universe is not ready
+  if (isSessionLoading || !gameUniverse || !slotMachineState.style) {
     return (
       <Box
         sx={{
@@ -356,8 +356,8 @@ function GameContent() {
     );
   }
 
-  // Afficher la slot machine pendant le chargement initial
-  if (isInitialLoading) {
+  // Afficher la slot machine seulement si on a l'univers ET les données sont initialisées
+  if (isInitialLoading && gameUniverse && slotMachineState.style) {
     return (
       <Box sx={{ width: "100%", height: "100vh", backgroundColor: "#1a1a1a" }}>
         <UniverseSlotMachine

client/src/pages/Home.jsx

@@ -5,22 +5,31 @@ import {
   useTheme,
   useMediaQuery,
   Tooltip,
+  CircularProgress,
 } from "@mui/material";
 import { motion } from "framer-motion";
 import { useNavigate } from "react-router-dom";
 import { useSoundSystem } from "../contexts/SoundContext";
-import { useServiceStatus } from "../contexts/ServiceStatusContext";
+import {
+  ServiceStatusProvider,
+  useServiceStatus,
+} from "../contexts/ServiceStatusContext";
 import { BlinkingText } from "../components/BlinkingText";
 import { BookPages } from "../components/BookPages";
 import { ServiceStatus } from "../components/ServiceStatus";
 
-export function Home() {
+function HomeContent() {
   const navigate = useNavigate();
   const { playSound } = useSoundSystem();
-  const { areServicesHealthy } = useServiceStatus();
+  const { services, areServicesHealthy } = useServiceStatus();
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
+  // Vérifier si les services sont en cours de chargement
+  const isLoading = Object.values(services).some(
+    (service) => service.status === "loading"
+  );
+
   const handlePlay = () => {
     playSound("page");
     navigate("/tutorial");
@@ -32,15 +41,40 @@ export function Home() {
       size="large"
       variant="contained"
       onClick={handlePlay}
-      disabled={!areServicesHealthy()}
+      disabled={isLoading || !areServicesHealthy()}
       sx={{
         mt: 4,
         fontSize: isMobile ? "1rem" : "1.2rem",
         padding: isMobile ? "8px 24px" : "12px 36px",
         zIndex: 10,
+        minWidth: "120px",
+        position: "relative",
       }}
     >
-      Play
+      <Box
+        sx={{
+          height: "24px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          visibility: isLoading ? "hidden" : "visible",
+        }}
+      >
+        Play
+      </Box>
+      {isLoading && (
+        <CircularProgress
+          size={24}
+          sx={{
+            color: "inherit",
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            marginTop: "-12px",
+            marginLeft: "-12px",
+          }}
+        />
+      )}
     </Button>
   );
 
@@ -119,17 +153,29 @@ export function Home() {
           Experience a unique comic book where artificial intelligence brings
           your choices to life, shaping the narrative as you explore.
         </Typography>
-        {areServicesHealthy() ? (
-          playButton
-        ) : (
+        {isLoading || !areServicesHealthy() ? (
           <Tooltip
-            title="Services are currently unavailable. Please wait..."
+            title={
+              isLoading
+                ? "Checking services availability..."
+                : "Services are currently unavailable. Please wait..."
+            }
             arrow
           >
             <span>{playButton}</span>
           </Tooltip>
+        ) : (
+          playButton
         )}
       </Box>
     </motion.div>
   );
 }
+
+export function Home() {
+  return (
+    <ServiceStatusProvider>
+      <HomeContent />
+    </ServiceStatusProvider>
+  );
+}

client/src/pages/Tutorial.jsx

@@ -69,8 +69,7 @@ export function Tutorial() {
           How to play
         </Typography>
 
-        <Typography
-          variant="body1"
+        <Box
           sx={{
             zIndex: 10,
             textAlign: "center",
@@ -79,22 +78,35 @@ export function Tutorial() {
             opacity: 0.8,
             color: "white",
             px: isMobile ? 3 : 0,
-            fontSize: "clamp(0.875rem, 2vw, 1.125rem)",
-            lineHeight: 1.6,
           }}
         >
-          Each story takes you on a journey through a unique universe.
-          <br />
-          <br />
-          At every step, you will choose between two different options. until
-          you reach the end of the story
-          <br />
+          <Typography
+            variant="body1"
+            sx={{
+              fontSize: "clamp(0.875rem, 2vw, 1.125rem)",
+              lineHeight: 1.6,
+            }}
+          >
+            Each story takes you on a journey through a unique universe.
+          </Typography>
           <br />
+          <Typography
+            variant="body1"
+            sx={{
+              fontSize: "clamp(0.875rem, 2vw, 1.125rem)",
+              lineHeight: 1.6,
+            }}
+          >
+            At every step, you will choose between two different options. until
+            you reach the end of the story
+          </Typography>
+
           <Box
             sx={{
               display: "flex",
               gap: { xs: 1, sm: 4 },
               justifyContent: "center",
+              mt: 4,
               mb: { xs: 1, sm: 2 },
               alignItems: "center",
               flexDirection: { xs: "column", sm: "row" },
@@ -218,7 +230,7 @@ export function Tutorial() {
               </Box>
             </Box>
           </Box>
-        </Typography>
+        </Box>
 
         <Button
           color="primary"