code optimisation

frontend/src/App.tsx

@@ -164,7 +164,7 @@ function AppContent() {
                                 flexWrap: 'wrap',
                             }}>
                                 <SettingsEthernet></SettingsEthernet>
-                                <span>&nbsp;{settings.serverAddr}</span>
+                                <span>&nbsp;{status.connected ? settings.serverAddr : 'not connected'}</span>
                             </div>
                         </Toolbar>
                     </AppBar>

frontend/src/Home.tsx

@@ -30,6 +30,7 @@ export default function Home({ socket }: Props) {
     const [url, setUrl] = useState('');
     const [workingUrl, setWorkingUrl] = useState('');
     const [showBackdrop, setShowBackdrop] = useState(false);
+    const [showToast, setShowToast] = useState(true);
 
     /* -------------------- Effects -------------------- */
     /* WebSocket connect event handler*/
@@ -330,10 +331,10 @@ export default function Home({ socket }: Props) {
                 }
             </Grid>
             <Snackbar
-                open={status.connected}
+                open={showToast === status.connected}
                 autoHideDuration={1500}
                 message="Connected"
-                onClose={() => dispatch(disconnected())}
+                onClose={() => setShowToast(false)}
             />
         </Container>
     );

frontend/src/Settings.tsx

@@ -62,7 +62,7 @@ export default function Settings({ socket }: Props) {
     }
 
     /**
-     * Language toggler handler 
+     * Theme toggler handler 
      */
     const handleThemeChange = (event: SelectChangeEvent<ThemeUnion>) => {
         dispatch(setTheme(event.target.value as ThemeUnion));
@@ -76,7 +76,6 @@ export default function Settings({ socket }: Props) {
         dispatch(alreadyUpdated())
     }
 
-
     return (
         <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
             <Grid container spacing={3}>