code split views

src/app.tsx

@@ -1,35 +1,35 @@
-import React from "react";
+import React, { Suspense } from "react";
 import { createBrowserRouter, Navigate, Outlet, RouterProvider, useLocation } from "react-router-dom";
-import { HomeView } from "./views/home";
+import { Button, Flex, Spinner, Text } from "@chakra-ui/react";
 import { ErrorBoundary } from "./components/error-boundary";
 import { Page } from "./components/page";
-import { SettingsView } from "./views/settings";
-import { LoginView } from "./views/login";
-import { ProfileView } from "./views/profile";
-import accountService from "./services/account";
-import { FollowingTab } from "./views/home/following-tab";
-import { DiscoverTab } from "./views/home/discover-tab";
-import { GlobalTab } from "./views/home/global-tab";
 import { normalizeToHex } from "./helpers/nip19";
-import UserView from "./views/user";
-import UserNotesTab from "./views/user/notes";
-import UserFollowersTab from "./views/user/followers";
-import UserRelaysTab from "./views/user/relays";
-import UserFollowingTab from "./views/user/following";
-import NoteView from "./views/note";
-import { LoginStartView } from "./views/login/start";
-import { LoginNpubView } from "./views/login/npub";
-import NotificationsView from "./views/notifications";
-import { RelaysView } from "./views/relays";
-import useSubject from "./hooks/use-subject";
-import { LoginNip05View } from "./views/login/nip05";
-import { Button, Flex, Spinner, Text } from "@chakra-ui/react";
 import { deleteDatabase } from "./services/db";
-import { LoginNsecView } from "./views/login/nsec";
-import UserZapsTab from "./views/user/zaps";
-import PopularTab from "./views/home/popular";
-import DirectMessagesView from "./views/dm";
-import DirectMessageChatView from "./views/dm/chat";
+import accountService from "./services/account";
+import useSubject from "./hooks/use-subject";
+
+const HomeView = React.lazy(() => import("./views/home"));
+const SettingsView = React.lazy(() => import("./views/settings"));
+const LoginView = React.lazy(() => import("./views/login"));
+const ProfileView = React.lazy(() => import("./views/profile"));
+const FollowingTab = React.lazy(() => import("./views/home/following-tab"));
+const DiscoverTab = React.lazy(() => import("./views/home/discover-tab"));
+const GlobalTab = React.lazy(() => import("./views/home/global-tab"));
+const UserView = React.lazy(() => import("./views/user"));
+const UserNotesTab = React.lazy(() => import("./views/user/notes"));
+const UserFollowersTab = React.lazy(() => import("./views/user/followers"));
+const UserRelaysTab = React.lazy(() => import("./views/user/relays"));
+const UserFollowingTab = React.lazy(() => import("./views/user/following"));
+const NoteView = React.lazy(() => import("./views/note"));
+const LoginStartView = React.lazy(() => import("./views/login/start"));
+const LoginNpubView = React.lazy(() => import("./views/login/npub"));
+const NotificationsView = React.lazy(() => import("./views/notifications"));
+const RelaysView = React.lazy(() => import("./views/relays"));
+const LoginNip05View = React.lazy(() => import("./views/login/nip05"));
+const LoginNsecView = React.lazy(() => import("./views/login/nsec"));
+const UserZapsTab = React.lazy(() => import("./views/user/zaps"));
+const DirectMessagesView = React.lazy(() => import("./views/dm"));
+const DirectMessageChatView = React.lazy(() => import("./views/dm/chat"));
 
 const RequireCurrentAccount = ({ children }: { children: JSX.Element }) => {
   let location = useLocation();
@@ -146,6 +146,8 @@ const router = createBrowserRouter([
 
 export const App = () => (
   <ErrorBoundary>
-    <RouterProvider router={router} />
+    <Suspense fallback={<Spinner />}>
+      <RouterProvider router={router} />
+    </Suspense>
   </ErrorBoundary>
 );

src/providers/post-modal-provider.tsx

@@ -12,7 +12,7 @@ export const PostModalContext = React.createContext<PostModalContextType>({
 });
 
 export const PostModalProvider = ({ children }: { children: React.ReactNode }) => {
-  const {isOpen, onOpen, onClose} = useDisclosure();
+  const { isOpen, onOpen, onClose } = useDisclosure();
   const [draft, setDraft] = useState<Partial<DraftNostrEvent> | undefined>(undefined);
   const openModal = useCallback(
     (draft?: Partial<DraftNostrEvent>) => {

src/views/home/discover-tab.tsx

@@ -59,7 +59,7 @@ class DiscoverContacts {
   }
 }
 
-export const DiscoverTab = () => {
+export default function DiscoverTab() {
   useAppTitle("discover");
   const account = useCurrentAccount();
   const relays = useReadRelayUrls();
@@ -85,4 +85,4 @@ export const DiscoverTab = () => {
       {loading ? <Spinner ml="auto" mr="auto" mt="8" mb="8" /> : <Button onClick={() => loadMore()}>Load More</Button>}
     </Flex>
   );
-};
+}

src/views/home/following-tab.tsx

@@ -11,7 +11,7 @@ import { PostModalContext } from "../../providers/post-modal-provider";
 import { useReadRelayUrls } from "../../hooks/use-client-relays";
 import { useCurrentAccount } from "../../hooks/use-current-account";
 
-export const FollowingTab = () => {
+export default function FollowingTab() {
   const account = useCurrentAccount();
   const relays = useReadRelayUrls();
   const { openModal } = useContext(PostModalContext);
@@ -49,4 +49,4 @@ export const FollowingTab = () => {
       {loading ? <Spinner ml="auto" mr="auto" mt="8" mb="8" /> : <Button onClick={() => loadMore()}>Load More</Button>}
     </Flex>
   );
-};
+}

src/views/home/global-tab.tsx

@@ -8,7 +8,7 @@ import { useAppTitle } from "../../hooks/use-app-title";
 import { useReadRelayUrls } from "../../hooks/use-client-relays";
 import { useTimelineLoader } from "../../hooks/use-timeline-loader";
 
-export const GlobalTab = () => {
+export default function GlobalTab() {
   useAppTitle("global");
   const defaultRelays = useReadRelayUrls();
   const [searchParams, setSearchParams] = useSearchParams();
@@ -62,4 +62,4 @@ export const GlobalTab = () => {
       {loading ? <Spinner ml="auto" mr="auto" mt="8" mb="8" /> : <Button onClick={() => loadMore()}>Load More</Button>}
     </Flex>
   );
-};
+}

src/views/home/index.tsx

@@ -8,7 +8,7 @@ const tabs = [
   { label: "Global", path: "/global" },
 ];
 
-export const HomeView = () => {
+export default function HomeView() {
   const navigate = useNavigate();
   const matches = useMatches();
 
@@ -38,4 +38,4 @@ export const HomeView = () => {
       </TabPanels>
     </Tabs>
   );
-};
+}

src/views/login/index.tsx

@@ -3,7 +3,7 @@ import { Navigate, Outlet, useLocation } from "react-router-dom";
 import useSubject from "../../hooks/use-subject";
 import accountService from "../../services/account";
 
-export const LoginView = () => {
+export default function LoginView() {
   const current = useSubject(accountService.current);
   const location = useLocation();
 
@@ -25,4 +25,4 @@ export const LoginView = () => {
       <Outlet />
     </Flex>
   );
-};
+}

src/views/login/nip05.tsx

@@ -21,7 +21,7 @@ import dnsIdentityService from "../../services/dns-identity";
 import { CheckIcon } from "../../components/icons";
 import { CloseIcon } from "@chakra-ui/icons";
 
-export const LoginNip05View = () => {
+export default function LoginNip05View() {
   const navigate = useNavigate();
   const toast = useToast();
 
@@ -137,4 +137,4 @@ export const LoginNip05View = () => {
       </Flex>
     </Flex>
   );
-};
+}

src/views/login/npub.tsx

@@ -6,7 +6,7 @@ import { normalizeToHex } from "../../helpers/nip19";
 import accountService from "../../services/account";
 import clientRelaysService from "../../services/client-relays";
 
-export const LoginNpubView = () => {
+export default function LoginNpubView() {
   const navigate = useNavigate();
   const toast = useToast();
   const [npub, setNpub] = useState("");
@@ -60,4 +60,4 @@ export const LoginNpubView = () => {
       </Flex>
     </Flex>
   );
-};
+}

src/views/login/nsec.tsx

@@ -24,7 +24,7 @@ import clientRelaysService from "../../services/client-relays";
 import { generatePrivateKey, getPublicKey } from "nostr-tools";
 import signingService from "../../services/signing";
 
-export const LoginNsecView = () => {
+export default function LoginNsecView() {
   const navigate = useNavigate();
   const toast = useToast();
 
@@ -150,4 +150,4 @@ export const LoginNsecView = () => {
       </Flex>
     </Flex>
   );
-};
+}

src/views/login/start.tsx

@@ -5,7 +5,7 @@ import AccountCard from "./components/account-card";
 import useSubject from "../../hooks/use-subject";
 import accountService from "../../services/account";
 
-export const LoginStartView = () => {
+export default function LoginStartView() {
   const navigate = useNavigate();
   const [loading, setLoading] = useState(false);
   const accounts = useSubject(accountService.accounts);
@@ -66,4 +66,4 @@ export const LoginStartView = () => {
       )}
     </Flex>
   );
-};
+}

src/views/profile/index.tsx

@@ -1,5 +1,5 @@
 import { ProfileEditView } from "./edit";
 
-export const ProfileView = () => {
+export default function ProfileView() {
   return <ProfileEditView />;
-};
+}

src/views/relays/index.tsx

@@ -27,7 +27,7 @@ import { RelayStatus } from "../../components/relay-status";
 import relayScoreboardService from "../../services/relay-scoreboard";
 import { validateRelayUrl } from "../../helpers/url";
 
-export const RelaysView = () => {
+export default function RelaysView() {
   const relays = useSubject(clientRelaysService.relays);
   const toast = useToast();
 
@@ -154,4 +154,4 @@ export const RelaysView = () => {
       </Flex>
     </Flex>
   );
-};
+}

src/views/settings/index.tsx

@@ -21,7 +21,7 @@ import accountService from "../../services/account";
 import useSubject from "../../hooks/use-subject";
 import { LogoutIcon } from "../../components/icons";
 
-export const SettingsView = () => {
+export default function SettingsView() {
   const blurImages = useSubject(settings.blurImages);
   const autoShowMedia = useSubject(settings.autoShowMedia);
   const proxyUserMedia = useSubject(settings.proxyUserMedia);
@@ -178,4 +178,4 @@ export const SettingsView = () => {
       </Flex>
     </Flex>
   );
-};
+}