perf: optimize Tasker boot and kanban load

plane-src/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx

@@ -4,7 +4,7 @@
  * See the LICENSE file for details.
  */
 
-import { useCallback, useState } from "react";
+import { lazy, Suspense, useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
@@ -14,7 +14,6 @@ import { ChevronDownIcon } from "@plane/propel/icons";
 import type { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
 import { EIssuesStoreType, EIssueLayoutTypes } from "@plane/types";
 // components
-import { WorkItemsModal } from "@/components/analytics/work-items/modal";
 import {
   DisplayFiltersSelection,
   FiltersDropdown,
@@ -24,6 +23,12 @@ import {
 import { useIssues } from "@/hooks/store/use-issues";
 import { useProject } from "@/hooks/store/use-project";
 
+const WorkItemsModal = lazy(() =>
+  import("@/components/analytics/work-items/modal").then((module) => ({
+    default: module.WorkItemsModal,
+  }))
+);
+
 export const ProjectIssuesMobileHeader = observer(function ProjectIssuesMobileHeader() {
   // i18n
   const { t } = useTranslation();
@@ -63,11 +68,15 @@ export const ProjectIssuesMobileHeader = observer(function ProjectIssuesMobileHe
 
   return (
     <>
-      <WorkItemsModal
-        isOpen={analyticsModal}
-        onClose={() => setAnalyticsModal(false)}
-        projectDetails={currentProjectDetails ?? undefined}
-      />
+      {analyticsModal && (
+        <Suspense fallback={null}>
+          <WorkItemsModal
+            isOpen={analyticsModal}
+            onClose={() => setAnalyticsModal(false)}
+            projectDetails={currentProjectDetails ?? undefined}
+          />
+        </Suspense>
+      )}
       <div className="z-[13] flex justify-evenly border-b border-subtle bg-surface-1 py-2 md:hidden">
         <LayoutSelection
           layouts={[

plane-src/apps/web/app/(all)/[workspaceSlug]/(projects)/top-toolbar/compact-layout.tsx

@@ -10,7 +10,7 @@ import { useTranslation } from "@plane/i18n";
 import { PlusIcon } from "@plane/propel/icons";
 import { cn } from "@plane/utils";
 // components
-import { TopNavPowerK } from "@/components/navigation";
+import { DeferredTopNavPowerK } from "@/components/navigation/deferred-top-nav-power-k";
 import { UserMenuRoot } from "@/components/workspace/sidebar/user-menu-root";
 import { WorkspaceMenuRoot } from "@/components/workspace/sidebar/workspace-menu-root";
 import { ProjectsToolbarMenu } from "./projects-toolbar-menu";
@@ -40,7 +40,7 @@ export const CompactProjectShellToolbarLayout = ({
         <div className="flex min-w-0 items-center gap-3">
           <div className="nodedc-toolbar-group relative flex items-center gap-1 overflow-visible">
             <WorkspaceMenuRoot variant="toolbar" />
-            <TopNavPowerK variant="sidebar" />
+            <DeferredTopNavPowerK variant="sidebar" />
             <UserMenuRoot variant="toolbar" />
             <ToolbarNotificationsButton
               label={t("notification.label")}

plane-src/apps/web/app/(all)/[workspaceSlug]/(projects)/top-toolbar/expanded-layout.tsx

@@ -10,7 +10,7 @@ import { useTranslation } from "@plane/i18n";
 import { Shapes } from "lucide-react";
 import { cn } from "@plane/utils";
 // components
-import { TopNavPowerK } from "@/components/navigation";
+import { DeferredTopNavPowerK } from "@/components/navigation/deferred-top-nav-power-k";
 import { useNodeDCBrandLinkUrl } from "@/hooks/use-nodedc-brand-link-url";
 import { UserMenuRoot } from "@/components/workspace/sidebar/user-menu-root";
 import { WorkspaceMenuRoot } from "@/components/workspace/sidebar/workspace-menu-root";
@@ -71,7 +71,7 @@ export const ExpandedProjectShellToolbarLayout = ({
           <div className="nodedc-expanded-breadcrumbs-slot" data-nodedc-expanded-breadcrumbs-slot />
           {!isWorkspaceHome && (
             <div className="nodedc-expanded-main-tool-cluster">
-              <TopNavPowerK variant="expanded-toolbar" />
+              <DeferredTopNavPowerK variant="expanded-toolbar" />
               <div className="nodedc-expanded-header-filters-slot" data-nodedc-expanded-header-filters-slot />
             </div>
           )}