Comes to Waiting for 0 more responses. Not to Harmonizing desires

frontend/src/pages/CreateSession.tsx

@@ -1,20 +1,24 @@
-import React from 'react';
-import { Box, Button, Typography, Container } from '@mui/material';
+import React, { useEffect } from 'react';
+import { Box, Typography, Container, CircularProgress } from '@mui/material';
 import axios from 'axios';
 import { useNavigate } from 'react-router-dom';
 
 const CreateSession = () => {
     const navigate = useNavigate();
 
-    const handleCreate = async () => {
-        try {
-            const response = await axios.post('http://localhost:8000/sessions');
-            const { sessionId } = response.data;
-            navigate(`/session/${sessionId}`);
-        } catch (error) {
-            console.error('Error creating session:', error);
-        }
-    };
+    useEffect(() => {
+        const handleCreate = async () => {
+            try {
+                const response = await axios.post('http://localhost:8000/sessions');
+                const { sessionId } = response.data;
+                navigate(`/session/${sessionId}`);
+            } catch (error) {
+                console.error('Error creating session:', error);
+            }
+        };
+
+        handleCreate();
+    }, [navigate]);
 
     return (
         <Container maxWidth="sm">
@@ -26,20 +30,10 @@ const CreateSession = () => {
                     alignItems: 'center',
                 }}
             >
-                <Typography component="h1" variant="h5">
-                    Unisono
+                <CircularProgress />
+                <Typography component="h1" variant="h6" sx={{ mt: 2 }}>
+                    Creating a new session...
                 </Typography>
-                <Box sx={{ mt: 3 }}>
-                    <Button
-                        type="button"
-                        fullWidth
-                        variant="contained"
-                        sx={{ mt: 3, mb: 2 }}
-                        onClick={handleCreate}
-                    >
-                        Create a New Session
-                    </Button>
-                </Box>
             </Box>
         </Container>
     );

frontend/src/pages/SessionPage.tsx

@@ -52,7 +52,7 @@ const SessionPage = () => {
                 {session.state === SessionState.SETUP && (
                     <Box sx={{ mt: 4, p: 3, border: '1px dashed grey', borderRadius: '4px', textAlign: 'center' }}>
                         <Typography variant="h6" component="p" gutterBottom>
-                            Set Up the Session
+                            Set Up Session
                         </Typography>
                         <TextField
                             margin="normal"