fix: remove lazy import components

web/src/layouts/CommonContextProvider.tsx

@@ -24,7 +24,7 @@ const CommonContext = createContext<Context>({
 const CommonContextProvider = ({ children }: { children: React.ReactNode }) => {
   const workspaceSettingStore = useWorkspaceSettingStore();
   const userStore = useUserStore();
-  const [loading, setLoading] = useState(true);
+  const [initialized, setInitialized] = useState(false);
   const [commonContext, setCommonContext] = useState<Pick<Context, "locale" | "appearance" | "profile">>({
     locale: "en",
     appearance: "system",
@@ -56,7 +56,7 @@ const CommonContextProvider = ({ children }: { children: React.ReactNode }) => {
       }
     };
 
-    Promise.all([initialWorkspace(), initialUser()]).then(() => setLoading(false));
+    Promise.all([initialWorkspace(), initialUser()]).then(() => setInitialized(true));
   }, []);
 
   return (
@@ -67,7 +67,7 @@ const CommonContextProvider = ({ children }: { children: React.ReactNode }) => {
         setAppearance: (appearance: string) => setCommonContext({ ...commonContext, appearance }),
       }}
     >
-      {loading ? null : <>{children}</>}
+      {!initialized ? null : <>{children}</>}
     </CommonContext.Provider>
   );
 };

web/src/layouts/HomeLayout.tsx

@@ -1,6 +1,6 @@
 import { Button, IconButton, Tooltip } from "@mui/joy";
 import clsx from "clsx";
-import { Suspense, useEffect } from "react";
+import { Suspense, useEffect, useState } from "react";
 import { Outlet, useLocation } from "react-router-dom";
 import useLocalStorage from "react-use/lib/useLocalStorage";
 import Icon from "@/components/Icon";
@@ -17,6 +17,7 @@ const HomeLayout = () => {
   const { sm } = useResponsiveWidth();
   const currentUser = useCurrentUser();
   const [collapsed, setCollapsed] = useLocalStorage<boolean>("navigation-collapsed", false);
+  const [initialized, setInitialized] = useState(false);
 
   // Redirect to explore page if not logged in.
   useEffect(() => {
@@ -27,10 +28,14 @@ const HomeLayout = () => {
       )
     ) {
       navigateTo(Routes.EXPLORE);
+      return;
     }
+    setInitialized(true);
   }, []);
 
-  return (
+  return !initialized ? (
+    <Loading />
+  ) : (
     <div className="w-full min-h-full">
       <div className={clsx("w-full transition-all mx-auto flex flex-row justify-center items-start", collapsed ? "sm:pl-16" : "sm:pl-56")}>
         {sm && (

web/src/layouts/SuspenseWrapper.tsx

@@ -2,12 +2,12 @@ import { Suspense } from "react";
 import { Outlet } from "react-router-dom";
 import Loading from "@/pages/Loading";
 
-function SuspenseWrapper() {
+const SuspenseWrapper = () => {
   return (
     <Suspense fallback={<Loading />}>
       <Outlet />
     </Suspense>
   );
-}
+};
 
 export default SuspenseWrapper;

web/src/pages/Setting.tsx

@@ -23,7 +23,6 @@ interface State {
 
 const BASIC_SECTIONS: SettingSection[] = ["my-account", "preference"];
 const ADMIN_SECTIONS: SettingSection[] = ["member", "system", "storage", "sso"];
-
 const SECTION_ICON_MAP: Record<SettingSection, LucideIcon> = {
   "my-account": Icon.User,
   preference: Icon.Cog,

web/src/router/index.tsx

@@ -1,24 +1,22 @@
-import { lazy } from "react";
 import { createBrowserRouter } from "react-router-dom";
 import App from "@/App";
 import HomeLayout from "@/layouts/HomeLayout";
 import SuspenseWrapper from "@/layouts/SuspenseWrapper";
-
-const SignIn = lazy(() => import("@/pages/SignIn"));
-const SignUp = lazy(() => import("@/pages/SignUp"));
-const AuthCallback = lazy(() => import("@/pages/AuthCallback"));
-const Explore = lazy(() => import("@/pages/Explore"));
-const Home = lazy(() => import("@/pages/Home"));
-const UserProfile = lazy(() => import("@/pages/UserProfile"));
-const MemoDetail = lazy(() => import("@/pages/MemoDetail"));
-const Archived = lazy(() => import("@/pages/Archived"));
-const Timeline = lazy(() => import("@/pages/Timeline"));
-const Resources = lazy(() => import("@/pages/Resources"));
-const Inboxes = lazy(() => import("@/pages/Inboxes"));
-const Setting = lazy(() => import("@/pages/Setting"));
-const About = lazy(() => import("@/pages/About"));
-const NotFound = lazy(() => import("@/pages/NotFound"));
-const PermissionDenied = lazy(() => import("@/pages/PermissionDenied"));
+import About from "@/pages/About";
+import Archived from "@/pages/Archived";
+import AuthCallback from "@/pages/AuthCallback";
+import Explore from "@/pages/Explore";
+import Home from "@/pages/Home";
+import Inboxes from "@/pages/Inboxes";
+import MemoDetail from "@/pages/MemoDetail";
+import NotFound from "@/pages/NotFound";
+import PermissionDenied from "@/pages/PermissionDenied";
+import Resources from "@/pages/Resources";
+import Setting from "@/pages/Setting";
+import SignIn from "@/pages/SignIn";
+import SignUp from "@/pages/SignUp";
+import Timeline from "@/pages/Timeline";
+import UserProfile from "@/pages/UserProfile";
 
 export enum Routes {
   HOME = "/",