🐛(frontend) have a suspense fallback

the app crashed on screen changes, I don't quite get why right now… but
at least this goes around the issue…

src/frontend/src/App.tsx

@@ -1,13 +1,15 @@
 import '@livekit/components-styles'
 import '@/styles/index.css'
+import { Suspense } from 'react'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import { useLang } from 'hoofd'
 import { Route, Switch } from 'wouter'
+import { Screen } from './layout/Screen'
 import { HomeRoute } from '@/features/home'
-import { NotFound } from './routes/NotFound'
 import { RoomRoute, roomIdRegex } from '@/features/rooms'
+import { NotFound } from './routes/NotFound'
 import './i18n/init'
 
 const queryClient = new QueryClient()
@@ -17,12 +19,14 @@ function App() {
   useLang(i18n.language)
   return (
     <QueryClientProvider client={queryClient}>
-      <Switch>
+      <Suspense fallback={<Screen />}>
-        <Route path="/" component={HomeRoute} />
+        <Switch>
-        <Route path={roomIdRegex} component={RoomRoute} />
+          <Route path="/" component={HomeRoute} />
-        <Route component={NotFound} />
+          <Route path={roomIdRegex} component={RoomRoute} />
-      </Switch>
+          <Route component={NotFound} />
-      <ReactQueryDevtools initialIsOpen={false} />
+        </Switch>
+        <ReactQueryDevtools initialIsOpen={false} />
+      </Suspense>
     </QueryClientProvider>
   )
 }

src/frontend/src/layout/Screen.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react'
 import { css } from '@/styled-system/css'
 import { Header } from './Header'
 
-export const Screen = ({ children }: { children: ReactNode }) => {
+export const Screen = ({ children }: { children?: ReactNode }) => {
   return (
     <div
       className={css({