Suspense

<Suspense> display a fallback function until its children have been finished loading.

// Adds a promise-based delay to emulate backend latency
export function sleep(ms: number): Promise<void> {
    return new Promise((resolve) => setTimeout(resolve, ms));
}

import { Suspense, lazy } from "react";
import { BrowserRouter, Routes, Route, Navigate } from "react-router";
import { sleep } from "./lib/sleep";
// lazy loading
const ChatLayout = lazy(async () => {
    await sleep(1500);
    return import("./chat/layout/ChatLayout")
});
import ChatPage from "./chat/pages/ChatPage";

export const AppRouter = () => {
    return (
        <BrowserRouter>
                <Route path="/chat" element={
                    {/* Suspense component */}
                    <Suspense
                        fallback={
                            <div className="flex h-screen w-full items-center justify-center">
                                <div className="h-10 w-10 animate-spin rounded-full border-4 border-gray-300 border-t-gray-900" />
                            </div>
                        }
                    >
                        <ChatLayout />
                    </Suspense>
                }>
                    <Route index element={<ChatPage />} />
                </Route>
                <Route path="/" element={<Navigate to="/chat" />} />
            </Routes>
        </BrowserRouter>
    )
}