The behavior I'm trying to fix:
Unless I'm misunderstanding something, Suspense should be good to use here. How I implemented it in my app.js
const ChatContainer = React.lazy(() => import('./components/ChatContainer'))
<Router>
<Routes>
<Route>
<Route element={<RequireAuth/>}>
<Route path="chat" element={
<Suspense fallback={<ChatBackground><BeatLoader/></ChatBackground>}>
<ChatContainer/>
</Suspense>
}/>
<Route path="profile" element={<Profile/>}/>
<Route path="signout" element={<SignOut/>}/>
</Route>
<Route path="signup" element={<SignUp/>}/>
<Route path="signin" element={<SignIn/>}/>
<Route path="/" element={<SignIn/>}/>
</Route>
</Routes>
</Router>
The ChatContainer component contains all the other components in the app except the background. What am I missing here?
