perf(react): remove lazy imports again

packages/chat/src/components/input.tsx

@@ -10,14 +10,7 @@ import {
   PopoverTrigger,
 } from "@methanium/ui";
 import { useStorage } from "@tensamin/storage/context";
-import React, {
-  lazy,
-  Suspense,
-  useCallback,
-  useEffect,
-  useState,
-  useRef,
-} from "react";
+import React, { 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";
-
-const EmojiPicker = lazy(() => import("./emoji/emojiPicker"));
-const GifPicker = lazy(() => import("./media/gifPicker"));
+import EmojiPicker from "./emoji/emojiPicker";
+import GifPicker from "./media/gifPicker";
 
 export default function InputComponent({
   value,
@@ -359,15 +351,13 @@ export default function InputComponent({
                   )}
                 />
                 <PopoverContent className="w-auto p-0">
-                  <Suspense fallback={null}>
-                    <EmojiPicker
-                      onSelect={(shortcode) => {
-                        setValue(`${value}${shortcode} `);
-                        recordUse(shortcode);
-                        setEmojiPopoverOpen(false);
-                      }}
-                    />
-                  </Suspense>
+                  <EmojiPicker
+                    onSelect={(shortcode) => {
+                      setValue(`${value}${shortcode} `);
+                      recordUse(shortcode);
+                      setEmojiPopoverOpen(false);
+                    }}
+                  />
                 </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>
+                      <GifPicker
+                        onSelect={(url) => {
+                          void handleSubmit(url, true);
+                          setGifPopoverOpen(false);
+                        }}
+                      />
                     </div>
                   </DrawerContent>
                 </Drawer>
@@ -420,16 +408,14 @@ 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}
-                        onSelect={(url) => {
-                          void handleSubmit(url, true);
-                          setGifPopoverOpen(false);
-                        }}
-                      />
-                    </Suspense>
+                    <GifPicker
+                      resizeHeight={gifPopoverSize?.height}
+                      resizeWidth={gifPopoverSize?.width}
+                      onSelect={(url) => {
+                        void handleSubmit(url, true);
+                        setGifPopoverOpen(false);
+                      }}
+                    />
                   </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 }),
-      send("GetIotaData", { UserId: user.UserId }),
+      getIota(ownId),
+      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: peerIota.data.PublicKey, encoding: "base64" },
+          { value: ownIota.PublicKey, encoding: "base64" },
+          { value: peerIota.PublicKey, encoding: "base64" },
         ],
         contentRecipients: [
-          { value: ownIota.data.PublicKey, encoding: "base64" },
-          { value: peerIota.data.PublicKey, encoding: "base64" },
+          { value: ownIota.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")),
-  security: lazy(() => import("./pages/security")),
-  chat: lazy(() => import("./pages/chat")),
-  call: lazy(() => import("./pages/call")),
-  cache: lazy(() => import("./pages/cache")),
-  theme: lazy(() => import("./pages/theme")),
-  accessibility: lazy(() => import("./pages/accessibility")),
-  hotkeys: lazy(() => import("./pages/hotkeys")),
-  licenses: lazy(() => import("./pages/licenses")),
+  profile: Profile,
+  security: Security,
+  chat: Chat,
+  call: Call,
+  cache: Cache,
+  theme: Theme,
+  accessibility: Accessibility,
+  hotkeys: Hotkeys,
+  licenses: Licenses,
 } as const;
 
 export const settingsPages = [
-  { path: "/", component: lazy(() => import("./pages/index")) },
+  { path: "/", component: SettingsIndex },
   ...settingsNavigation.map((page) => ({
     ...page,
     component: pageComponents[page.path],