lazy load routes

src/components/App.tsx

@@ -11,9 +11,6 @@ import {
   ReactLocation,
   Router,
 } from "@tanstack/react-location";
-import { ChatRoute } from "../routes/ChatRoute";
-import { PublicChatRoute } from "../routes/PublicChatRoute";
-import { IndexRoute } from "../routes/IndexRoute";
 import { BaseLayout } from "../layouts/Base";
 import { PublicLayout } from "../layouts/Public";
 
@@ -38,9 +35,9 @@ export function App() {
     <Router
       location={location}
       routes={[
-        { id: "root", path: "/", element: <BaseLayout><IndexRoute /></BaseLayout>},
-        { id: "chat", path: "/chats/:chatId", element: <BaseLayout><ChatRoute /></BaseLayout> },
-        { id: "public_chat", path: "/shared/chats/:chatId", element: <PublicLayout><PublicChatRoute /></PublicLayout> },
+        { id: "root", path: "/", element: () => import('../routes/IndexRoute').then((mod) => <BaseLayout><mod.IndexRoute /></BaseLayout>)},
+        { id: "chat", path: "/chats/:chatId", element: () => import('../routes/ChatRoute').then((mod) => <BaseLayout><mod.ChatRoute /></BaseLayout>) },
+        { id: "public_chat", path: "/shared/chats/:chatId", element: () => import('../routes/PublicChatRoute').then((mod) => <PublicLayout><mod.PublicChatRoute /></PublicLayout>) },
       ]}
     >
       <ColorSchemeProvider

src/components/Prompts.tsx

@@ -8,7 +8,7 @@ import { EditPromptModal } from "./EditPromptModal";
 import { useChats, usePrompts, useSettings } from "../hooks/contexts";
 import { notifications } from "@mantine/notifications";
 
-export function Prompts({
+export default function Prompts({
   onPlay,
   search,
 }: {

src/layouts/Base.tsx

@@ -14,6 +14,8 @@ import {
   Text,
   useMantineColorScheme,
   useMantineTheme,
+  Skeleton,
+  Stack,
 } from "@mantine/core";
 import {
   IconSearch,
@@ -23,13 +25,12 @@ import {
   IconX,
 } from "@tabler/icons-react";
 import { Link, useNavigate, useRouter } from "@tanstack/react-location";
-import { useEffect, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 import { Chat, detaDB, Prompt, Settings } from "../db";
 import { useChatId } from "../hooks/useChatId";
 import { Chats } from "../components/Chats";
 import { CreatePromptModal } from "../components/CreatePromptModal";
 import { LogoIcon } from "../components/Logo";
-import { Prompts } from "../components/Prompts";
 import { SettingsModal } from "../components/SettingsModal";
 import { config } from "../utils/config";
 import { ChatContext, ChatsContext, IncognitoModeContext, PromptsContext, SettingsContext } from "../hooks/contexts";
@@ -37,6 +38,9 @@ import { ChatHeader } from "../components/ChatHeader";
 import { useLocalStorage } from "@mantine/hooks";
 import { CreateChatButton } from "../components/CreateChatButton";
 import { DeleteChatsModal } from "../components/DeleteChatsModal";
+import React from "react";
+
+const Prompts = React.lazy(() => import('../components/Prompts'));
 
 export function BaseLayout({ children }: { children: React.ReactNode }) {
   const theme = useMantineTheme();
@@ -105,12 +109,15 @@ export function BaseLayout({ children }: { children: React.ReactNode }) {
     }
   }, [chatId]);
 
+  const [fetchingChats, setFetchingChats] = useState<boolean>(false);
   const [chats, setChats] = useState<Chat[]>([]);
   useEffect(() => {
     const dataFetch = async () => {
+      setFetchingChats(true);
       const { items } = await detaDB.chats.fetch(incognitoMode ? { private: true } : { 'private?ne': true });
 
       setChats(items as unknown as Chat[]);
+      setFetchingChats(false);
     };
 
     dataFetch();
@@ -270,9 +277,23 @@ export function BaseLayout({ children }: { children: React.ReactNode }) {
                       />
                     </Navbar.Section>
                     <Navbar.Section grow component={ScrollArea} id="chats">
-                      {tab === "Chats" && <Chats search={search} />}
+                      {tab === "Chats" && (fetchingChats ? (
+                        <Stack spacing="xs" mt={8} px={10}>
+                          <Skeleton height="2rem" />
+                          <Skeleton height="2rem" />
+                          <Skeleton height="2rem" />
+                        </Stack>
+                      ) : (<Chats search={search} />))}
                       {tab === "Prompts" && (
-                        <Prompts search={search} onPlay={() => setTab("Chats")} />
+                        <Suspense fallback={
+                          <Stack spacing="xs" mt={8} px={10}>
+                            <Skeleton height="2rem" />
+                            <Skeleton height="2rem" />
+                            <Skeleton height="2rem" />
+                          </Stack>
+                        }>
+                          <Prompts search={search} onPlay={() => setTab("Chats")} />
+                        </Suspense>
                       )}
                     </Navbar.Section>
                     <Navbar.Section>