optimize imports

src/app.tsx

@@ -11,42 +11,20 @@ import useSetColorMode from "./hooks/use-set-color-mode";
 
 import TaskManagerProvider from "./views/task-manager/provider";
 
-const getScrollKey = (location: Location) => location.pathname + location.search + location.hash;
-
-const RootPage = () => {
-  useSetColorMode();
-
-  return (
-    <RouteProviders>
-      <ScrollRestoration getKey={getScrollKey} />
-      <AppLayout />
-    </RouteProviders>
-  );
-};
-const NoLayoutPage = () => {
-  return (
-    <RouteProviders>
-      <ScrollRestoration getKey={getScrollKey} />
-      <Suspense fallback={<Spinner />}>
-        <Outlet />
-      </Suspense>
-    </RouteProviders>
-  );
-};
-
 // one off views
 import NostrLinkView from "./views/link";
-const HomeView = lazy(() => import("./views/home"));
-const ProfileView = lazy(() => import("./views/profile"));
-const MapView = lazy(() => import("./views/map"));
-const LaunchpadView = lazy(() => import("./views/launchpad"));
-const OtherStuffView = lazy(() => import("./views/other-stuff"));
-const ThreadView = lazy(() => import("./views/thread"));
-const NotificationsView = lazy(() => import("./views/notifications"));
+import HomeView from "./views/home";
+import ThreadView from "./views/thread";
+import SupportView from "./views/support";
+import ProfileView from "./views/profile";
+import SearchView from "./views/search";
+import LaunchpadView from "./views/launchpad";
+import NotificationsView from "./views/notifications";
+import OtherStuffView from "./views/other-stuff";
+
 const RelayView = lazy(() => import("./views/relays/relay"));
-const SearchView = lazy(() => import("./views/search"));
-const SupportView = lazy(() => import("./views/support"));
 const TracksView = lazy(() => import("./views/tracks"));
+const MapView = lazy(() => import("./views/map"));
 const HashTagView = lazy(() => import("./views/hashtag"));
 
 // routes
@@ -75,6 +53,28 @@ import emojisRoutes from "./views/emojis/routes";
 import walletRoutes from "./views/wallet/routes";
 import podcastsRoutes from "./views/podcasts/routes";
 
+const getScrollKey = (location: Location) => location.pathname + location.search + location.hash;
+
+const RootPage = () => {
+  useSetColorMode();
+
+  return (
+    <RouteProviders>
+      <ScrollRestoration getKey={getScrollKey} />
+      <AppLayout />
+    </RouteProviders>
+  );
+};
+
+const NoLayoutPage = () => {
+  return (
+    <RouteProviders>
+      <ScrollRestoration getKey={getScrollKey} />
+      <Outlet />
+    </RouteProviders>
+  );
+};
+
 const router = createBrowserRouter([
   {
     path: "signin",

src/components/timeline-page/generic-note-timeline/timeline-item.tsx

@@ -1,17 +1,14 @@
-import { ReactNode, memo } from "react";
+import { ReactNode, Suspense, lazy, memo } from "react";
 import { kinds } from "nostr-tools";
-import { Box } from "@chakra-ui/react";
+import { Box, Spinner } from "@chakra-ui/react";
 
 import { ErrorBoundary } from "../../error-boundary";
 import ReplyNote from "./reply-note";
 import ShareEvent from "./share-event";
-import StreamNote from "./stream-note";
 import RelayRecommendation from "./relay-recommendation";
-import BadgeAwardCard from "../../../views/badges/components/badge-award-card";
 import { isReply } from "../../../helpers/nostr/event";
 import { NostrEvent } from "../../../types/nostr-event";
 import { FLARE_VIDEO_KIND } from "../../../helpers/nostr/video";
-import EmbeddedFlareVideo from "../../embed-event/event-types/embedded-flare-video";
 import { TimelineNote } from "../../note/timeline-note";
 import useEventIntersectionRef from "../../../hooks/use-event-intersection-ref";
 import ArticleCard from "../../../views/articles/components/article-card";
@@ -19,6 +16,11 @@ import EmbeddedUnknown from "../../embed-event/event-types/embedded-unknown";
 import { MEDIA_POST_KIND } from "../../../helpers/nostr/media";
 import MediaPost from "../../media-post/media-post-card";
 
+// other stuff
+const StreamNote = lazy(() => import("./stream-note"));
+const BadgeAwardCard = lazy(() => import("../../../views/badges/components/badge-award-card"));
+const EmbeddedFlareVideo = lazy(() => import("../../embed-event/event-types/embedded-flare-video"));
+
 function TimelineItem({ event, visible, minHeight }: { event: NostrEvent; visible: boolean; minHeight?: number }) {
   const ref = useEventIntersectionRef(event);
 
@@ -57,7 +59,7 @@ function TimelineItem({ event, visible, minHeight }: { event: NostrEvent; visibl
   return (
     <ErrorBoundary event={event}>
       <Box minHeight={minHeight + "px"} ref={ref}>
-        {visible && content}
+        {visible && <Suspense fallback={<Spinner />}>{content}</Suspense>}
       </Box>
     </ErrorBoundary>
   );

src/views/articles/routes.tsx

@@ -1,8 +1,6 @@
-import { lazy } from "react";
 import { RouteObject } from "react-router";
-
-const ArticlesHomeView = lazy(() => import("."));
-const ArticleView = lazy(() => import("./article"));
+import ArticlesHomeView from ".";
+import ArticleView from "./article";
 
 export default [
   { index: true, Component: ArticlesHomeView },

src/views/bookmarks/routes.tsx

@@ -1,7 +1,5 @@
-import { lazy } from "react";
 import { RouteObject } from "react-router";
-
-const BookmarksView = lazy(() => import("."));
+import BookmarksView from ".";
 
 export default [
   { index: true, element: <BookmarksView /> },

src/views/discovery/routes.tsx

@@ -1,12 +1,10 @@
 import { Outlet, RouteObject } from "react-router";
 import RequireCurrentAccount from "../../components/router/require-current-account";
-import { lazy } from "react";
-
-const DiscoveryHomeView = lazy(() => import("."));
-const DVMFeedView = lazy(() => import("./dvm-feed/feed"));
-const BlindspotHomeView = lazy(() => import("./blindspot"));
-const BlindspotFeedView = lazy(() => import("./blindspot/feed"));
-const RelayDiscoveryView = lazy(() => import("./relays"));
+import DiscoveryHomeView from ".";
+import DVMFeedView from "./dvm-feed/feed";
+import BlindspotHomeView from "./blindspot";
+import BlindspotFeedView from "./blindspot/feed";
+import RelayDiscoveryView from "./relays";
 
 export default [
   { index: true, Component: DiscoveryHomeView },

src/views/media/routes.tsx

@@ -1,8 +1,6 @@
-import { lazy } from "react";
 import { RouteObject } from "react-router";
-
-const MediaFeedView = lazy(() => import("."));
-const MediaPostView = lazy(() => import("./media-post"));
+import MediaFeedView from ".";
+import MediaPostView from "./media-post";
 
 export default [
   { index: true, Component: MediaFeedView },

src/views/messages/routes.tsx

@@ -1,9 +1,7 @@
-import { lazy } from "react";
 import { Center } from "@chakra-ui/react";
 import { RouteObject } from "react-router";
-
-const DirectMessagesView = lazy(() => import("."));
-const DirectMessageChatView = lazy(() => import("./chat"));
+import DirectMessagesView from ".";
+import DirectMessageChatView from "./chat";
 
 export default [
   {

src/views/relays/routes.tsx

@@ -1,20 +1,19 @@
 import { lazy } from "react";
 import { RouteObject } from "react-router";
-
-const RelaysView = lazy(() => import("."));
-const AppRelaysView = lazy(() => import("./app"));
-const CacheRelayView = lazy(() => import("./cache"));
-const DatabaseView = lazy(() => import("./cache/database"));
-const MailboxesView = lazy(() => import("./mailboxes"));
-const SearchRelaysView = lazy(() => import("./search"));
-const MediaServersView = lazy(() => import("../settings/media-servers"));
-const NIP05RelaysView = lazy(() => import("./nip05"));
-const ContactListRelaysView = lazy(() => import("./contact-list"));
+import RelaysView from ".";
+import AppRelaysView from "./app";
+import CacheRelayView from "./cache";
+import DatabaseView from "./cache/database";
+import MailboxesView from "./mailboxes";
+import SearchRelaysView from "./search";
+import MediaServersView from "../settings/media-servers";
+import NIP05RelaysView from "./nip05";
+import ContactListRelaysView from "./contact-list";
 const WebRtcRelaysView = lazy(() => import("./webrtc"));
 const WebRtcConnectView = lazy(() => import("./webrtc/connect"));
 const WebRtcPairView = lazy(() => import("./webrtc/pair"));
-const BrowseRelaySetsView = lazy(() => import("./browse-sets"));
-const RelaySetView = lazy(() => import("./relay-set"));
+import BrowseRelaySetsView from "./browse-sets";
+import RelaySetView from "./relay-set";
 
 export default [
   {

src/views/settings/routes.tsx

@@ -1,19 +1,21 @@
 import { lazy } from "react";
 import { Outlet, RouteObject } from "react-router";
+import RequireCurrentAccount from "../../components/router/require-current-account";
 
-const SettingsView = lazy(() => import("."));
-const DisplaySettings = lazy(() => import("./display"));
-const RequireCurrentAccount = lazy(() => import("../../components/router/require-current-account"));
-const AccountSettings = lazy(() => import("./accounts"));
-const MailboxesView = lazy(() => import("../relays/mailboxes"));
-const MediaServersView = lazy(() => import("./media-servers"));
-const SearchRelaysView = lazy(() => import("../relays/search"));
-const AppRelaysView = lazy(() => import("../relays/app"));
-const CacheRelayView = lazy(() => import("../relays/cache"));
-const PostSettings = lazy(() => import("./post"));
-const PrivacySettings = lazy(() => import("./privacy"));
-const LightningSettings = lazy(() => import("./lightning"));
-const PerformanceSettings = lazy(() => import("./performance"));
+import SettingsView from ".";
+import DisplaySettings from "./display";
+import AccountSettings from "./accounts";
+import MailboxesView from "../relays/mailboxes";
+import MediaServersView from "./media-servers";
+import SearchRelaysView from "../relays/search";
+import AppRelaysView from "../relays/app";
+import CacheRelayView from "../relays/cache";
+import PostSettings from "./post";
+import PrivacySettings from "./privacy";
+import LightningSettings from "./lightning";
+import PerformanceSettings from "./performance";
+
+// bakery settings
 const BakeryConnectView = lazy(() => import("./bakery/connect"));
 const RequireBakery = lazy(() => import("../../components/router/require-bakery"));
 const BakeryGeneralSettingsView = lazy(() => import("./bakery/general-settings"));

src/views/signin/routes.tsx

@@ -1,13 +1,11 @@
-import { lazy } from "react";
 import { RouteObject } from "react-router";
-
-const LoginView = lazy(() => import("."));
-const LoginStartView = lazy(() => import("./start"));
-const LoginNpubView = lazy(() => import("./npub"));
-const LoginNsecView = lazy(() => import("./nsec"));
-const LoginNostrAddressView = lazy(() => import("./address"));
-const LoginNostrAddressCreate = lazy(() => import("./address/create"));
-const LoginNostrConnectView = lazy(() => import("./nostr-connect"));
+import LoginView from ".";
+import LoginStartView from "./start";
+import LoginNpubView from "./npub";
+import LoginNsecView from "./nsec";
+import LoginNostrAddressView from "./address";
+import LoginNostrAddressCreate from "./address/create";
+import LoginNostrConnectView from "./nostr-connect";
 
 export default [
   {

src/views/streams/routes.tsx

@@ -1,8 +1,9 @@
+import { lazy } from "react";
 import { RouteObject } from "react-router";
 
 import StreamHomeView from ".";
 import StreamView from "./stream";
-import StreamModerationView from "./dashboard";
+const StreamModerationView = lazy(() => import("./dashboard"));
 
 export default [
   { index: true, Component: StreamHomeView },

src/views/torrents/routes.tsx

@@ -1,9 +1,7 @@
-import { lazy } from "react";
 import { RouteObject } from "react-router";
-
-const TorrentsView = lazy(() => import("."));
-const NewTorrentView = lazy(() => import("./new"));
-const TorrentDetailsView = lazy(() => import("./torrent"));
+import TorrentsView from ".";
+import NewTorrentView from "./new";
+import TorrentDetailsView from "./torrent";
 
 export default [
   { index: true, Component: TorrentsView },

src/views/user/routes.tsx

@@ -1,11 +1,12 @@
 import { lazy } from "react";
 import { RouteObject } from "react-router";
+import UserView from ".";
+import UserAboutTab from "./about";
+import UserNotesTab from "./notes";
+import UserArticlesTab from "./articles";
+import UserMediaPostsTab from "./media-posts";
 
-const UserView = lazy(() => import("."));
-const UserAboutTab = lazy(() => import("./about"));
-const UserNotesTab = lazy(() => import("./notes"));
-const UserArticlesTab = lazy(() => import("./articles"));
-const UserMediaPostsTab = lazy(() => import("./media-posts"));
+// other stuff
 const UserStreamsTab = lazy(() => import("./streams"));
 const UserTracksTab = lazy(() => import("./tracks"));
 const UserFilesTab = lazy(() => import("./files"));

vite.config.ts

@@ -34,11 +34,11 @@ export default defineConfig({
         minify: false,
         sourcemap: true,
         // This increase the cache limit to 4mB
-        maximumFileSizeToCacheInBytes: 1024 * 1024 * 4,
+        maximumFileSizeToCacheInBytes: 1024 * 1024 * 8,
       },
       workbox: {
         // This increase the cache limit to 4mB
-        maximumFileSizeToCacheInBytes: 1024 * 1024 * 4,
+        maximumFileSizeToCacheInBytes: 1024 * 1024 * 8,
       },
       manifest: {
         name: "noStrudel",