chore: Improve dev server performance

web/app/[workspaceSlug]/(projects)/notifications/page.tsx

@@ -2,21 +2,29 @@
 
 import { useCallback, useEffect } from "react";
 import { observer } from "mobx-react";
+import dynamic from "next/dynamic";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
 // components
 import { LogoSpinner } from "@/components/common";
 import { PageHead } from "@/components/core";
 import { EmptyState } from "@/components/empty-state";
 import { InboxContentRoot } from "@/components/inbox";
-import { IssuePeekOverview } from "@/components/issues";
 // constants
 import { EmptyStateType } from "@/constants/empty-state";
 import { ENotificationLoader, ENotificationQueryParamType } from "@/constants/notification";
 // hooks
 import { useIssueDetail, useUserPermissions, useWorkspace, useWorkspaceNotifications } from "@/hooks/store";
 import { useWorkspaceIssueProperties } from "@/hooks/use-workspace-issue-properties";
 
+const IssuePeekOverview = dynamic(
+  () => import("@/components/issues/peek-overview/root").then((m) => m.IssuePeekOverview),
+  {
+    ssr: false,
+    loading: () => null,
+  }
+);
+
 const WorkspaceDashboardPage = observer(() => {
   const { workspaceSlug } = useParams();
   // hooks

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/page.tsx

@@ -5,7 +5,7 @@ import Head from "next/head";
 import { useParams } from "next/navigation";
 // components
 import { PageHead } from "@/components/core";
-import { ProjectLayoutRoot } from "@/components/issues";
+import { ProjectLayoutRoot } from "@/components/issues/issue-layouts";
 // hooks
 import { useProject } from "@/hooks/store";
 

web/ce/hooks/use-editor-flagging.ts

@@ -1,5 +1,5 @@
 // editor
-import { TExtensions } from "@plane/editor";
+import type { TExtensions } from "@plane/editor";
 
 /**
  * @description extensions disabled in various editors

web/core/components/analytics/project-modal/modal.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react";
+import dynamic from "next/dynamic";
 import { Dialog, Transition } from "@headlessui/react";
 import { ICycle, IModule, IProject } from "@plane/types";
 
 // components
-import { ProjectAnalyticsModalHeader, ProjectAnalyticsModalMainContent } from "@/components/analytics";
 // types
 
 type Props = {
@@ -15,6 +15,22 @@ type Props = {
   projectDetails?: IProject | undefined;
 };
 
+const ProjectAnalyticsModalHeader = dynamic(
+  () => import("@/components/analytics").then((m) => m.ProjectAnalyticsModalHeader),
+  {
+    ssr: false,
+    loading: () => null,
+  }
+);
+
+const ProjectAnalyticsModalMainContent = dynamic(
+  () => import("@/components/analytics").then((m) => m.ProjectAnalyticsModalMainContent),
+  {
+    ssr: false,
+    loading: () => null,
+  }
+);
+
 export const ProjectAnalyticsModal: React.FC<Props> = observer((props) => {
   const { isOpen, onClose, cycleDetails, moduleDetails, projectDetails } = props;
 

web/core/components/cycles/cycles-view.tsx

@@ -1,8 +1,8 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
+import dynamic from "next/dynamic";
 import Image from "next/image";
 // components
-import { CyclesList } from "@/components/cycles";
 // ui
 import { CycleModuleListLayout } from "@/components/ui";
 // hooks
@@ -15,7 +15,10 @@ export interface ICyclesView {
   workspaceSlug: string;
   projectId: string;
 }
-
+const CyclesList = dynamic(() => import("@/components/cycles/list/root").then((m) => m.CyclesList), {
+  ssr: false,
+  loading: () => <CycleModuleListLayout />,
+});
 export const CyclesView: FC<ICyclesView> = observer((props) => {
   const { workspaceSlug, projectId } = props;
   // store hooks

web/core/components/inbox/content/root.tsx

@@ -1,15 +1,32 @@
 import { FC, useEffect, useState } from "react";
 import { observer } from "mobx-react";
+import dynamic from "next/dynamic";
 import useSWR from "swr";
 import { TNameDescriptionLoader } from "@plane/types";
 // components
 import { ContentWrapper } from "@plane/ui";
-import { InboxIssueActionsHeader, InboxIssueMainContent } from "@/components/inbox";
 // hooks
+import { IssuePeekOverviewLoader } from "@/components/issues/peek-overview/loader";
 import { useProjectInbox, useUser, useUserPermissions } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
+const InboxIssueActionsHeader = dynamic(
+  () => import("@/components/inbox/content/inbox-issue-header").then((m) => m.InboxIssueActionsHeader),
+  {
+    ssr: false,
+    loading: () => null,
+  }
+);
+
+const InboxIssueMainContent = dynamic(
+  () => import("@/components/inbox/content/issue-root").then((m) => m.InboxIssueMainContent),
+  {
+    ssr: false,
+    loading: () => <IssuePeekOverviewLoader removeRoutePeekId={() => null} />,
+  }
+);
+
 type TInboxContentRoot = {
   workspaceSlug: string;
   projectId: string;

web/core/components/issues/filters.tsx

@@ -8,6 +8,7 @@ import { EIssueLayoutTypes, EIssueFilterType, EIssuesStoreType } from "@plane/co
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
 import { Button } from "@plane/ui";
 // components
+import { ProjectAnalyticsModal } from "@/components/analytics";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
 // constants
 import { ISSUE_STORE_TO_FILTERS_MAP } from "@/constants/issue";
@@ -17,7 +18,7 @@ import { isIssueFilterActive } from "@/helpers/filter.helper";
 import { useLabel, useProjectState, useMember, useIssues } from "@/hooks/store";
 // plane web types
 import { TProject } from "@/plane-web/types";
-import { ProjectAnalyticsModal } from "../analytics";
+// local components
 
 type Props = {
   currentProjectDetails: TProject | undefined;

web/core/components/issues/issue-layouts/roots/project-layout-root.tsx

@@ -2,26 +2,75 @@
 
 import { FC, Fragment } from "react";
 import { observer } from "mobx-react";
+import dynamic from "next/dynamic";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
 // plane constants
 import { EIssueLayoutTypes, EIssuesStoreType } from "@plane/constants";
 // components
 import { Spinner } from "@plane/ui";
 import { LogoSpinner } from "@/components/common";
+
+// constants
 import {
-  ListLayout,
-  CalendarLayout,
-  BaseGanttRoot,
-  KanBanLayout,
-  ProjectAppliedFiltersRoot,
-  ProjectSpreadsheetLayout,
-  IssuePeekOverview,
-} from "@/components/issues";
+  CalendarLayoutLoader,
+  GanttLayoutLoader,
+  KanbanLayoutLoader,
+  ListLayoutLoader,
+  SpreadsheetLayoutLoader,
+} from "@/components/ui";
+
 // hooks
 import { useIssues } from "@/hooks/store";
 import { IssuesStoreContext } from "@/hooks/use-issue-layout-store";
 
+const ProjectAppliedFiltersRoot = dynamic(
+  () =>
+    import("@/components/issues/issue-layouts/filters/applied-filters/roots/project-root").then(
+      (m) => m.ProjectAppliedFiltersRoot
+    ),
+  {
+    ssr: false,
+    loading: () => null,
+  }
+);
+const ListLayout = dynamic(
+  () => import("@/components/issues/issue-layouts/list/roots/project-root").then((m) => m.ListLayout),
+  {
+    ssr: false,
+    loading: () => <ListLayoutLoader />,
+  }
+);
+const KanBanLayout = dynamic(
+  () => import("@/components/issues/issue-layouts/kanban/roots/project-root").then((m) => m.KanBanLayout),
+  {
+    ssr: false,
+    loading: () => <KanbanLayoutLoader />,
+  }
+);
+const CalendarLayout = dynamic(
+  () => import("@/components/issues/issue-layouts/calendar/roots/project-root").then((m) => m.CalendarLayout),
+  {
+    ssr: false,
+    loading: () => <CalendarLayoutLoader />,
+  }
+);
+const BaseGanttRoot = dynamic(
+  () => import("@/components/issues/issue-layouts/gantt/base-gantt-root").then((m) => m.BaseGanttRoot),
+  {
+    ssr: false,
+    loading: () => <GanttLayoutLoader />,
+  }
+);
+const ProjectSpreadsheetLayout = dynamic(
+  () =>
+    import("@/components/issues/issue-layouts/spreadsheet/roots/project-root").then((m) => m.ProjectSpreadsheetLayout),
+  {
+    ssr: false,
+    loading: () => <SpreadsheetLayoutLoader />,
+  }
+);
+
 const ProjectIssueLayout = (props: { activeLayout: EIssueLayoutTypes | undefined }) => {
   switch (props.activeLayout) {
     case EIssueLayoutTypes.LIST:
@@ -38,6 +87,13 @@ const ProjectIssueLayout = (props: { activeLayout: EIssueLayoutTypes | undefined
       return null;
   }
 };
+const IssuePeekOverview = dynamic(
+  () => import("@/components/issues/peek-overview/root").then((m) => m.IssuePeekOverview),
+  {
+    ssr: false,
+    loading: () => null,
+  }
+);
 
 export const ProjectLayoutRoot: FC = observer(() => {
   // router

web/core/components/page-views/workspace-dashboard.tsx

@@ -1,11 +1,13 @@
 import { useEffect } from "react";
 import { observer } from "mobx-react";
+import dynamic from "next/dynamic";
 import { useParams } from "next/navigation";
 // components
 import { ContentWrapper } from "@plane/ui";
-import { DashboardWidgets } from "@/components/dashboard";
+// import { DashboardWidgets } from "@/components/dashboard";
+import { LogoSpinner } from "@/components/common";
 import { EmptyState } from "@/components/empty-state";
-import { IssuePeekOverview } from "@/components/issues";
+// import { IssuePeekOverview } from "@/components/issues";
 import { TourRoot } from "@/components/onboarding";
 import { UserGreetingsView } from "@/components/user";
 // constants
@@ -14,9 +16,29 @@ import { PRODUCT_TOUR_COMPLETED } from "@/constants/event-tracker";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
-import { useCommandPalette, useUserProfile, useEventTracker, useDashboard, useProject, useUser } from "@/hooks/store";
+import { useCommandPalette, useDashboard, useEventTracker, useProject, useUser, useUserProfile } from "@/hooks/store";
 import useSize from "@/hooks/use-window-size";
 
+//@to-do Add loader matching the layout
+const DashboardWidgets = dynamic(
+  () => import("@/components/dashboard/home-dashboard-widgets").then((m) => m.DashboardWidgets),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="h-full w-full flex items-center justify-center">
+        <LogoSpinner />
+      </div>
+    ),
+  }
+);
+const IssuePeekOverview = dynamic(
+  () => import("@/components/issues/peek-overview/root").then((m) => m.IssuePeekOverview),
+  {
+    ssr: false,
+    loading: () => null,
+  }
+);
+
 export const WorkspaceDashboardView = observer(() => {
   // store hooks
   const {

web/core/components/pages/editor/header/options-dropdown.tsx

@@ -19,7 +19,6 @@
 // ui
 import { ArchiveIcon, CustomMenu, type ISvgIcons, TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";
 // components
-import { ExportPageModal } from "@/components/pages";
 // helpers
 import { copyTextToClipboard, copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
@@ -29,13 +28,21 @@
 import { useQueryParams } from "@/hooks/use-query-params";
 // store
 import { IPage } from "@/store/pages/page";
+import dynamic from "next/dynamic";
 
 type Props = {
   editorRef: EditorRefApi | null;
   handleDuplicatePage: () => void;
   page: IPage;
 };
 
+const ExportPageModal = dynamic(
+  () => import("@/components/pages/modals/export-page-modal").then((m) => m.ExportPageModal),
+  {
+    ssr: false,
+    loading: () => null,
+  }
+);
 export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
   const { editorRef, handleDuplicatePage, page } = props;
   // router

web/core/components/profile/profile-setting-content-wrapper.tsx

@@ -1,8 +1,8 @@
 "use client";
 import React, { FC } from "react";
 // helpers
+import { SidebarHamburgerToggle } from "@/components/core";
 import { cn } from "@/helpers/common.helper";
-import { SidebarHamburgerToggle } from "../core";
 
 type Props = {
   children: React.ReactNode;

web/core/hooks/use-workspace-issue-properties.ts

@@ -1,5 +1,5 @@
+import { useCycle, useLabel, useModule, useProjectEstimates, useProjectState } from "@/hooks/store";
 import useSWR from "swr";
-import { useCycle, useProjectEstimates, useLabel, useModule, useProjectState } from "./store";
 
 export const useWorkspaceIssueProperties = (workspaceSlug: string | string[] | undefined) => {
   const { fetchWorkspaceLabels } = useLabel();