perf(react): remove lazy imports again

apps/web/src/components/callPopout.tsx

@@ -1,15 +1,8 @@
-import { lazy, Suspense } from "react";
-
 import { useCall } from "@tensamin/call/state";
-
+import Popout from "@tensamin/call/popout";
-const Popout = lazy(() => import("@tensamin/call/popout"));
 
 export default function CallPopout() {
   const active = useCall((state) => state.state !== "closed");
 
-  return active ? (
+  return active ? <Popout /> : null;
-    <Suspense fallback={null}>
-      <Popout />
-    </Suspense>
-  ) : null;
 }

apps/web/src/components/callSidebarBox.tsx

@@ -1,15 +1,8 @@
-import { lazy, Suspense } from "react";
-
 import { useCall } from "@tensamin/call/state";
-
+import SidebarBox from "@tensamin/call/sidebarBox";
-const SidebarBox = lazy(() => import("@tensamin/call/sidebarBox"));
 
 export default function CallSidebarBox() {
   const active = useCall((state) => state.state !== "closed");
 
-  return active ? (
+  return active ? <SidebarBox /> : null;
-    <Suspense fallback={null}>
-      <SidebarBox />
-    </Suspense>
-  ) : null;
 }

apps/web/src/components/navbar.tsx

@@ -28,6 +28,7 @@ import { useState } from "react";
 import { SidebarTrigger, useSidebar } from "@methanium/ui";
 import { WindowControls as Controls } from "@methanium/ui";
 import { useSession } from "@tensamin/identity/session";
+import { joinCall } from "@tensamin/call/store";
 import Profile from "./modals/profile";
 
 export default function Navbar({ forMobile }: { forMobile: boolean }) {
@@ -139,11 +140,7 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
             {currentCalls.length === 0 ? (
               <Button
                 disabled={callState !== "closed"}
-                onClick={() => {
+                onClick={() => void joinCall(id)}
-                  void import("@tensamin/call/store").then(({ joinCall }) =>
-                    joinCall(id),
-                  );
-                }}
                 className="w-9 h-9! aspect-square rounded-lg"
                 variant="outline"
               >
@@ -153,12 +150,10 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
               <Button
                 disabled={callState !== "closed"}
                 onClick={() => {
-                  void import("@tensamin/call/store").then(({ joinCall }) =>
+                  void joinCall(
-                    joinCall(
                     id,
                     currentCalls[0].CallSecret,
                     currentCalls[0].CallId,
-                    ),
                   );
                 }}
                 className="w-9 h-9! aspect-square rounded-lg"
@@ -185,12 +180,9 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
                       <SelectItem
                         value={call.CallId}
                         key={call.CallId}
-                        onSelect={() => {
+                        onSelect={() =>
-                          void import("@tensamin/call/store").then(
+                          void joinCall(id, call.CallSecret, call.CallId)
-                            ({ joinCall }) =>
+                        }
-                              joinCall(id, call.CallSecret, call.CallId),
-                          );
-                        }}
                       >
                         {displayCallId(call.CallId)}
                       </SelectItem>

apps/web/src/index.tsx

@@ -13,8 +13,13 @@ import "@methanium/ui/index.css";
 
 import NotFound from "@/routes/404";
 import RouteLoader from "@/components/routeLoader";
+import Home from "@/routes/app/home";
+import AppShell from "@/routes/app/shell";
+import Login from "@/routes/screens/login";
 
 import { createSettingsRoute } from "@tensamin/settings";
+import ChatScreen from "@tensamin/chat/screen";
+import CallScreen from "@tensamin/call/screen";
 
 import DeeplinkContext from "@tensamin/tauri/deeplinkHandler";
 import PwaRuntime from "@tensamin/pwa/runtime";
@@ -22,14 +27,7 @@ import PwaRuntime from "@tensamin/pwa/runtime";
 import { ErrorScreen, ThemeProvider, useTheme } from "@methanium/ui";
 import z from "zod";
 
-import {
+import { useEffect, useRef, useState, type ReactNode } from "react";
-  lazy,
-  Suspense,
-  useEffect,
-  useRef,
-  useState,
-  type ReactNode,
-} from "react";
 
 import Storage from "@tensamin/storage/context";
 import { log } from "@tensamin/shared/log";
@@ -39,13 +37,6 @@ import { useLocation, useNavigate } from "@tanstack/react-router";
 import { useIsMobile, Toaster, TooltipProvider } from "@methanium/ui";
 import { HotkeysProvider } from "@tensamin/hotkeys";
 
-const Home = lazy(() => import("@/routes/app/home"));
-const ChatScreen = lazy(() => import("@tensamin/chat/screen"));
-const CallScreen = lazy(() => import("@tensamin/call/screen"));
-const Login = lazy(() => import("@/routes/screens/login"));
-const appShellImport = import("@/routes/app/shell");
-const AppShell = lazy(() => appShellImport);
-
 const wrapper = document.getElementById("root");
 
 if (!wrapper) {
@@ -260,9 +251,7 @@ function RootShell() {
               <HotkeysProvider>
                 <ThemeStorageBridge />
                 <LoginWrapper>
-                  <Suspense fallback={<RouteLoader />}>
                   <Outlet />
-                  </Suspense>
                 </LoginWrapper>
               </HotkeysProvider>
             </Storage>

apps/web/src/routes/app/shell.tsx

@@ -1,7 +1,6 @@
-import { Suspense, useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 import { Outlet, useNavigate } from "@tanstack/react-router";
 
-import RouteLoader from "@/components/routeLoader";
 import AppLayout from "./layout";
 import CallInit from "@/components/callRuntimeInit";
 import CacheSync from "@tensamin/cache/sync";
@@ -61,9 +60,7 @@ export default function AppShell() {
                   <AppLayout>
                     <ChatContext>
                       <NotificationsProvider>
-                        <Suspense fallback={<RouteLoader />}>
                         <Outlet />
-                        </Suspense>
                       </NotificationsProvider>
                     </ChatContext>
                   </AppLayout>

packages/chat/src/components/input.tsx

@@ -10,14 +10,7 @@ import {
   PopoverTrigger,
 } from "@methanium/ui";
 import { useStorage } from "@tensamin/storage/context";
-import React, {
+import React, { useCallback, useEffect, useState, useRef } from "react";
-  lazy,
-  Suspense,
-  useCallback,
-  useEffect,
-  useState,
-  useRef,
-} from "react";
 import { Button } from "@methanium/ui";
 
 import { Plus, Laugh, FileVideo, SendHorizonal } from "lucide-react";
@@ -33,9 +26,8 @@ import ReplyBox from "./replyBox";
 import { useHotkey } from "@tensamin/hotkeys";
 import { editLastMessageHotkey } from "../hotkeys";
 import { useUser } from "@tensamin/identity/context";
-
+import EmojiPicker from "./emoji/emojiPicker";
-const EmojiPicker = lazy(() => import("./emoji/emojiPicker"));
+import GifPicker from "./media/gifPicker";
-const GifPicker = lazy(() => import("./media/gifPicker"));
 
 export default function InputComponent({
   value,
@@ -359,7 +351,6 @@ export default function InputComponent({
                   )}
                 />
                 <PopoverContent className="w-auto p-0">
-                  <Suspense fallback={null}>
                   <EmojiPicker
                     onSelect={(shortcode) => {
                       setValue(`${value}${shortcode} `);
@@ -367,7 +358,6 @@ export default function InputComponent({
                       setEmojiPopoverOpen(false);
                     }}
                   />
-                  </Suspense>
                 </PopoverContent>
               </Popover>
               {isMobile ? (
@@ -381,14 +371,12 @@ export default function InputComponent({
                   </DrawerTrigger>
                   <DrawerContent className="h-[80dvh]">
                     <div className="min-h-0 flex-1 p-3">
-                      <Suspense fallback={null}>
                       <GifPicker
                         onSelect={(url) => {
                           void handleSubmit(url, true);
                           setGifPopoverOpen(false);
                         }}
                       />
-                      </Suspense>
                     </div>
                   </DrawerContent>
                 </Drawer>
@@ -420,7 +408,6 @@ export default function InputComponent({
                       className="absolute left-0 top-0 z-10 h-4 w-4 cursor-nwse-resize"
                       onPointerDown={handleGifPopoverResizeStart}
                     />
-                    <Suspense fallback={null}>
                     <GifPicker
                       resizeHeight={gifPopoverSize?.height}
                       resizeWidth={gifPopoverSize?.width}
@@ -429,7 +416,6 @@ export default function InputComponent({
                         setGifPopoverOpen(false);
                       }}
                     />
-                    </Suspense>
                   </PopoverContent>
                 </Popover>
               )}

packages/chat/src/components/message.tsx

@@ -1,7 +1,11 @@
 import type { RawMessage } from "../values";
 import { AlertTriangle, Check, CheckLine, RefreshCw } from "lucide-react";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
-import { type SelectedUser, useUserFields } from "@tensamin/identity/context";
+import {
+  type SelectedUser,
+  useUser,
+  useUserFields,
+} from "@tensamin/identity/context";
 
 import {
   Avatar,
@@ -69,6 +73,7 @@ function MessageComponent({
   // Message states
   const { load } = useStorage();
   const { send, sendSealedRelay } = useMTP();
+  const { getIota } = useUser();
   const [ownId, setOwnId] = useState(0);
   useEffect(() => {
     load("user_id").then(setOwnId);
@@ -76,38 +81,34 @@ function MessageComponent({
   const messageStateReadUpdate = useCallback(async () => {
     const readConfirmations = await load("settings.read_confirmations");
 
-    if (!user?.UserId || !message.RelayMessageId || ownId === 0) return;
+    if (!user?.UserId || ownId === 0) return;
     const [ownIota, peerIota] = await Promise.all([
-      send("GetIotaData", { UserId: ownId }),
+      getIota(ownId),
-      send("GetIotaData", { UserId: user.UserId }),
+      getIota(user.UserId),
     ]);
-    if (ownIota.type !== "GetIotaData" || peerIota.type !== "GetIotaData") {
-      throw new Error("Could not resolve an Iota for this receipt");
-    }
     const response = await sendSealedRelay(
       "MessageState",
       {
         ChatPartnerId: user.UserId,
-        RelayMessageId: message.RelayMessageId,
         EventAt: Date.now(),
         MessageState: readConfirmations ? "read" : "received",
         ReceiverId: user.UserId,
       },
       {
-        nextHop: { kind: "iota", id: ownIota.data.IotaId },
+        nextHop: { kind: "iota", id: ownIota.IotaId },
         finalRecipientId: user.UserId,
         metadataRecipients: [
-          { value: ownIota.data.PublicKey, encoding: "base64" },
+          { value: ownIota.PublicKey, encoding: "base64" },
-          { value: peerIota.data.PublicKey, encoding: "base64" },
+          { value: peerIota.PublicKey, encoding: "base64" },
         ],
         contentRecipients: [
-          { value: ownIota.data.PublicKey, encoding: "base64" },
+          { value: ownIota.PublicKey, encoding: "base64" },
-          { value: peerIota.data.PublicKey, encoding: "base64" },
+          { value: peerIota.PublicKey, encoding: "base64" },
         ],
       },
     );
     requireRelaySuccess(response);
-  }, [load, message.RelayMessageId, ownId, send, sendSealedRelay, user]);
+  }, [getIota, load, ownId, sendSealedRelay, user]);
   useEffect(() => {
     if (message.SenderId === ownId || ownId === 0) return;
 

packages/settings/src/manifest.ts

@@ -1,20 +1,30 @@
-import { lazy } from "react";
 import { settingsNavigation } from "./navigation";
 
+import SettingsIndex from "./pages/index";
+import Profile from "./pages/profile";
+import Security from "./pages/security";
+import Chat from "./pages/chat";
+import Call from "./pages/call";
+import Cache from "./pages/cache";
+import Theme from "./pages/theme";
+import Accessibility from "./pages/accessibility";
+import Hotkeys from "./pages/hotkeys";
+import Licenses from "./pages/licenses";
+
 const pageComponents = {
-  profile: lazy(() => import("./pages/profile")),
+  profile: Profile,
-  security: lazy(() => import("./pages/security")),
+  security: Security,
-  chat: lazy(() => import("./pages/chat")),
+  chat: Chat,
-  call: lazy(() => import("./pages/call")),
+  call: Call,
-  cache: lazy(() => import("./pages/cache")),
+  cache: Cache,
-  theme: lazy(() => import("./pages/theme")),
+  theme: Theme,
-  accessibility: lazy(() => import("./pages/accessibility")),
+  accessibility: Accessibility,
-  hotkeys: lazy(() => import("./pages/hotkeys")),
+  hotkeys: Hotkeys,
-  licenses: lazy(() => import("./pages/licenses")),
+  licenses: Licenses,
 } as const;
 
 export const settingsPages = [
-  { path: "/", component: lazy(() => import("./pages/index")) },
+  { path: "/", component: SettingsIndex },
   ...settingsNavigation.map((page) => ({
     ...page,
     component: pageComponents[page.path],