From f67b7ceed08173dd3f87a195f36ea4db248edfe5 Mon Sep 17 00:00:00 2001 From: Satish Gandham Date: Mon, 4 Nov 2024 19:42:41 +0530 Subject: [PATCH 1/8] WIP: Fix the server load times in dev. --- web/core/components/issues/filters.tsx | 2 +- .../profile-setting-content-wrapper.tsx | 2 +- web/next.config.js | 60 +++++++++++++++++++ 3 files changed, 62 insertions(+), 2 deletions(-) diff --git a/web/core/components/issues/filters.tsx b/web/core/components/issues/filters.tsx index 4b80ba12f16..2c5dfe5c574 100644 --- a/web/core/components/issues/filters.tsx +++ b/web/core/components/issues/filters.tsx @@ -21,8 +21,8 @@ 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 "@/components/analytics"; // local components -import { ProjectAnalyticsModal } from "../analytics"; type Props = { currentProjectDetails: TProject | undefined; diff --git a/web/core/components/profile/profile-setting-content-wrapper.tsx b/web/core/components/profile/profile-setting-content-wrapper.tsx index c9741ca5d3d..d12e16cd08d 100644 --- a/web/core/components/profile/profile-setting-content-wrapper.tsx +++ b/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; diff --git a/web/next.config.js b/web/next.config.js index 14ba0d73579..dd14a2ba4c4 100644 --- a/web/next.config.js +++ b/web/next.config.js @@ -93,6 +93,66 @@ const nextConfig = { } return rewrites; }, + + experimental: { + optimizePackageImports: [ + // Components + "@/components/account", + "@/components/analytics", + "@/components/api-token", + "@/components/archives", + "@/components/auth-screens", + "@/components/automation", + "@/components/command-palette", + "@/components/common", + "@/components/core", + "@/components/cycles", + "@/components/dashboard", + "@/components/dropdowns", + "@/components/editor", + "@/components/empty-state", + "@/components/estimates", + "@/components/exporter", + "@/components/gantt-chart", + "@/components/global", + "@/components/graphs", + "@/components/icons", + "@/components/inbox", + "@/components/instance", + "@/components/integration", + "@/components/issues", + "@/components/labels", + "@/components/modules", + "@/components/onboarding", + "@/components/page-views", + "@/components/pages", + "@/components/profile", + "@/components/project", + "@/components/project-states", + "@/components/sidebar", + "@/components/ui", + "@/components/user", + "@/components/views", + "@/components/web-hooks", + "@/components/workspace", + "@/components/workspace-notifications", + + // lib + "@/lib/store-context", + "@/lib/wrappers", + "@/lib/n-progress", + "@/lib/local-storage", + + // Services + "@/plane-web/services", + + // + "@headlessui/react", + "axios", + + "@/hooks/store", + ], + }, }; const sentryConfig = { From 714694df6179cbcfb903db0d56536693a181c17e Mon Sep 17 00:00:00 2001 From: Satish Gandham Date: Wed, 6 Nov 2024 14:34:16 +0530 Subject: [PATCH 2/8] - Optimize dahboard, notications and cycles page --- .../(projects)/notifications/page.tsx | 10 +++++++- web/core/components/cycles/cycles-view.tsx | 9 ++++--- web/core/components/inbox/content/root.tsx | 20 +++++++++++++-- .../page-views/workspace-dashboard.tsx | 25 ++++++++++++++++--- .../pages/editor/header/options-dropdown.tsx | 9 ++++++- .../hooks/use-workspace-issue-properties.ts | 2 +- 6 files changed, 63 insertions(+), 12 deletions(-) diff --git a/web/app/[workspaceSlug]/(projects)/notifications/page.tsx b/web/app/[workspaceSlug]/(projects)/notifications/page.tsx index 1c2036efd31..9f27c097534 100644 --- a/web/app/[workspaceSlug]/(projects)/notifications/page.tsx +++ b/web/app/[workspaceSlug]/(projects)/notifications/page.tsx @@ -2,6 +2,7 @@ import { useEffect } from "react"; import { observer } from "mobx-react"; +import dynamic from "next/dynamic"; import { useParams } from "next/navigation"; import useSWR from "swr"; // components @@ -9,7 +10,6 @@ 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"; @@ -17,6 +17,14 @@ import { ENotificationLoader, ENotificationQueryParamType } from "@/constants/no 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: () => , + } +); + const WorkspaceDashboardPage = observer(() => { const { workspaceSlug } = useParams(); // hooks diff --git a/web/core/components/cycles/cycles-view.tsx b/web/core/components/cycles/cycles-view.tsx index dea4554129f..296d492df07 100644 --- a/web/core/components/cycles/cycles-view.tsx +++ b/web/core/components/cycles/cycles-view.tsx @@ -1,8 +1,7 @@ -import { FC } from "react"; import { observer } from "mobx-react"; import Image from "next/image"; +import { FC } from "react"; // components -import { CyclesList } from "@/components/cycles"; // ui import { CycleModuleListLayout } from "@/components/ui"; // hooks @@ -10,12 +9,16 @@ import { useCycle, useCycleFilter } from "@/hooks/store"; // assets import AllFiltersImage from "@/public/empty-state/cycle/all-filters.svg"; import NameFilterImage from "@/public/empty-state/cycle/name-filter.svg"; +import dynamic from "next/dynamic"; export interface ICyclesView { workspaceSlug: string; projectId: string; } - +const CyclesList = dynamic(() => import("@/components/cycles/list/root").then((m) => m.CyclesList), { + ssr: false, + loading: () => , +}); export const CyclesView: FC = observer((props) => { const { workspaceSlug, projectId } = props; // store hooks diff --git a/web/core/components/inbox/content/root.tsx b/web/core/components/inbox/content/root.tsx index 6963ffdd0cb..97656334269 100644 --- a/web/core/components/inbox/content/root.tsx +++ b/web/core/components/inbox/content/root.tsx @@ -1,13 +1,29 @@ -import { FC, useEffect, useState } from "react"; import { observer } from "mobx-react"; +import { FC, useEffect, useState } from "react"; import useSWR from "swr"; // components import { ContentWrapper } from "@plane/ui"; -import { InboxIssueActionsHeader, InboxIssueMainContent } from "@/components/inbox"; // hooks import { useProjectInbox, useUser, useUserPermissions } from "@/hooks/store"; import { useAppRouter } from "@/hooks/use-app-router"; import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions"; +import dynamic from "next/dynamic"; +import { LogoSpinner } from "@/components/common"; + +const InboxIssueActionsHeader = dynamic( + () => import("@/components/inbox/content/inbox-issue-header").then((m) => m.InboxIssueActionsHeader), + { + ssr: false, + loading: () => , + } +); +const InboxIssueMainContent = dynamic( + () => import("@/components/inbox/content/issue-root").then((m) => m.InboxIssueMainContent), + { + ssr: false, + loading: () => , + } +); type TInboxContentRoot = { workspaceSlug: string; diff --git a/web/core/components/page-views/workspace-dashboard.tsx b/web/core/components/page-views/workspace-dashboard.tsx index 05546af56fc..ccadb61c12e 100644 --- a/web/core/components/page-views/workspace-dashboard.tsx +++ b/web/core/components/page-views/workspace-dashboard.tsx @@ -1,11 +1,11 @@ -import { useEffect } from "react"; import { observer } from "mobx-react"; import { useParams } from "next/navigation"; +import { useEffect } from "react"; // components import { ContentWrapper } from "@plane/ui"; -import { DashboardWidgets } from "@/components/dashboard"; +// import { DashboardWidgets } from "@/components/dashboard"; 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,8 +14,25 @@ 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 { LogoSpinner } from "@/components/common"; +import { useCommandPalette, useDashboard, useEventTracker, useProject, useUser, useUserProfile } from "@/hooks/store"; import useSize from "@/hooks/use-window-size"; +import dynamic from "next/dynamic"; + +const DashboardWidgets = dynamic( + () => import("@/components/dashboard/home-dashboard-widgets").then((m) => m.DashboardWidgets), + { + ssr: false, + loading: () => , + } +); +const IssuePeekOverview = dynamic( + () => import("@/components/issues/peek-overview/root").then((m) => m.IssuePeekOverview), + { + ssr: false, + loading: () => , + } +); export const WorkspaceDashboardView = observer(() => { // store hooks diff --git a/web/core/components/pages/editor/header/options-dropdown.tsx b/web/core/components/pages/editor/header/options-dropdown.tsx index c7cf53a5f50..b44bcedd114 100644 --- a/web/core/components/pages/editor/header/options-dropdown.tsx +++ b/web/core/components/pages/editor/header/options-dropdown.tsx @@ -9,7 +9,6 @@ import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor"; // ui import { ArchiveIcon, CustomMenu, TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui"; // components -import { ExportPageModal } from "@/components/pages"; // helpers import { copyTextToClipboard, copyUrlToClipboard } from "@/helpers/string.helper"; // hooks @@ -17,6 +16,7 @@ import { usePageFilters } from "@/hooks/use-page-filters"; import { useQueryParams } from "@/hooks/use-query-params"; // store import { IPage } from "@/store/pages/page"; +import dynamic from "next/dynamic"; type Props = { editorRef: EditorRefApi | EditorReadOnlyRefApi | null; @@ -24,6 +24,13 @@ type Props = { 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 = observer((props) => { const { editorRef, handleDuplicatePage, page } = props; // router diff --git a/web/core/hooks/use-workspace-issue-properties.ts b/web/core/hooks/use-workspace-issue-properties.ts index 4cad3a2df38..6bf342eccbe 100644 --- a/web/core/hooks/use-workspace-issue-properties.ts +++ b/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(); From 5cc63261f9d5adae35c3defa3e83875b97055506 Mon Sep 17 00:00:00 2001 From: Satish Gandham Date: Thu, 7 Nov 2024 12:01:58 +0530 Subject: [PATCH 3/8] Optimize project issues layout (WIP) --- .../[projectId]/issues/(list)/page.tsx | 2 +- .../analytics/project-modal/modal.tsx | 18 +++++- .../roots/project-layout-root.tsx | 64 ++++++++++++++++--- 3 files changed, 73 insertions(+), 11 deletions(-) diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/page.tsx index 7ea73bb1c94..f983657bf83 100644 --- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/page.tsx +++ b/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"; diff --git a/web/core/components/analytics/project-modal/modal.tsx b/web/core/components/analytics/project-modal/modal.tsx index fb45d6aa9dd..39d609dbc38 100644 --- a/web/core/components/analytics/project-modal/modal.tsx +++ b/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 = observer((props) => { const { isOpen, onClose, cycleDetails, moduleDetails, projectDetails } = props; diff --git a/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx b/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx index 853f13dd4f2..44fbb457363 100644 --- a/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx +++ b/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx @@ -2,26 +2,65 @@ import { FC, Fragment } from "react"; import { observer } from "mobx-react"; +import dynamic from "next/dynamic"; import { useParams } from "next/navigation"; import useSWR from "swr"; // components import { Spinner } from "@plane/ui"; import { LogoSpinner } from "@/components/common"; -import { - ListLayout, - CalendarLayout, - BaseGanttRoot, - KanBanLayout, - ProjectAppliedFiltersRoot, - ProjectSpreadsheetLayout, - IssuePeekOverview, -} from "@/components/issues"; + // constants import { EIssueLayoutTypes, EIssuesStoreType } from "@/constants/issue"; // 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: () => , + } +); +const ListLayout = dynamic( + () => import("@/components/issues/issue-layouts/list/roots/project-root").then((m) => m.ListLayout), + { + ssr: false, + loading: () => , + } +); +const KanBanLayout = dynamic( + () => import("@/components/issues/issue-layouts/kanban/roots/project-root").then((m) => m.KanBanLayout), + { + ssr: false, + loading: () => , + } +); +const CalendarLayout = dynamic( + () => import("@/components/issues/issue-layouts/calendar/roots/project-root").then((m) => m.CalendarLayout), + { + ssr: false, + loading: () => , + } +); +const BaseGanttRoot = dynamic( + () => import("@/components/issues/issue-layouts/gantt/base-gantt-root").then((m) => m.BaseGanttRoot), + { + ssr: false, + loading: () => , + } +); +const ProjectSpreadsheetLayout = dynamic( + () => + import("@/components/issues/issue-layouts/spreadsheet/roots/project-root").then((m) => m.ProjectSpreadsheetLayout), + { + ssr: false, + loading: () => , + } +); const ProjectIssueLayout = (props: { activeLayout: EIssueLayoutTypes | undefined }) => { switch (props.activeLayout) { case EIssueLayoutTypes.LIST: @@ -38,6 +77,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: () => , + } +); export const ProjectLayoutRoot: FC = observer(() => { // router From 962b2c9444f2447c6e5bae510d79d37430ae926e Mon Sep 17 00:00:00 2001 From: Satish Gandham Date: Mon, 18 Nov 2024 12:09:44 +0530 Subject: [PATCH 4/8] Minor improvements --- web/core/components/ui/loader/layouts/kanban-layout-loader.tsx | 2 +- web/next.config.js | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx b/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx index 93e5c10fbc9..8e7a9d97b64 100644 --- a/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx +++ b/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx @@ -1,6 +1,6 @@ import { forwardRef } from "react"; -import { cn } from "@plane/editor"; import { ContentWrapper } from "@plane/ui"; +import { cn } from "@/helpers/common.helper"; export const KanbanIssueBlockLoader = forwardRef( ({ cardHeight = 100, shouldAnimate = true }, ref) => ( diff --git a/web/next.config.js b/web/next.config.js index dd14a2ba4c4..710da33b746 100644 --- a/web/next.config.js +++ b/web/next.config.js @@ -114,6 +114,7 @@ const nextConfig = { "@/components/estimates", "@/components/exporter", "@/components/gantt-chart", + "@/components/gantt-chart/contexts", "@/components/global", "@/components/graphs", "@/components/icons", @@ -121,6 +122,7 @@ const nextConfig = { "@/components/instance", "@/components/integration", "@/components/issues", + "@/components/issues/issue-layouts", "@/components/labels", "@/components/modules", "@/components/onboarding", From 8a7081dc5836643bb96467305fc26920105455d0 Mon Sep 17 00:00:00 2001 From: Satish Gandham Date: Tue, 17 Dec 2024 18:18:09 +0530 Subject: [PATCH 5/8] Fix loaders --- .../roots/project-layout-root.tsx | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx b/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx index 44fbb457363..bbfac93da80 100644 --- a/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx +++ b/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx @@ -10,6 +10,13 @@ import { Spinner } from "@plane/ui"; import { LogoSpinner } from "@/components/common"; // constants +import { + CalendarLayoutLoader, + GanttLayoutLoader, + KanbanLayoutLoader, + ListLayoutLoader, + SpreadsheetLayoutLoader, +} from "@/components/ui"; import { EIssueLayoutTypes, EIssuesStoreType } from "@/constants/issue"; // hooks import { useIssues } from "@/hooks/store"; @@ -22,35 +29,35 @@ const ProjectAppliedFiltersRoot = dynamic( ), { ssr: false, - loading: () => , + loading: () => null, } ); const ListLayout = dynamic( () => import("@/components/issues/issue-layouts/list/roots/project-root").then((m) => m.ListLayout), { ssr: false, - loading: () => , + loading: () => , } ); const KanBanLayout = dynamic( () => import("@/components/issues/issue-layouts/kanban/roots/project-root").then((m) => m.KanBanLayout), { ssr: false, - loading: () => , + loading: () => , } ); const CalendarLayout = dynamic( () => import("@/components/issues/issue-layouts/calendar/roots/project-root").then((m) => m.CalendarLayout), { ssr: false, - loading: () => , + loading: () => , } ); const BaseGanttRoot = dynamic( () => import("@/components/issues/issue-layouts/gantt/base-gantt-root").then((m) => m.BaseGanttRoot), { ssr: false, - loading: () => , + loading: () => , } ); const ProjectSpreadsheetLayout = dynamic( @@ -58,9 +65,10 @@ const ProjectSpreadsheetLayout = dynamic( import("@/components/issues/issue-layouts/spreadsheet/roots/project-root").then((m) => m.ProjectSpreadsheetLayout), { ssr: false, - loading: () => , + loading: () => , } ); + const ProjectIssueLayout = (props: { activeLayout: EIssueLayoutTypes | undefined }) => { switch (props.activeLayout) { case EIssueLayoutTypes.LIST: @@ -81,7 +89,7 @@ const IssuePeekOverview = dynamic( () => import("@/components/issues/peek-overview/root").then((m) => m.IssuePeekOverview), { ssr: false, - loading: () => , + loading: () => null, } ); From c31fb8931bbdfea2e97cf1d55d446b156db5cb8a Mon Sep 17 00:00:00 2001 From: Satish Gandham Date: Tue, 17 Dec 2024 18:49:38 +0530 Subject: [PATCH 6/8] Fix all the loaders --- web/app/[workspaceSlug]/(projects)/notifications/page.tsx | 2 +- web/core/components/cycles/cycles-view.tsx | 4 ++-- web/core/components/page-views/workspace-dashboard.tsx | 8 ++++---- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/web/app/[workspaceSlug]/(projects)/notifications/page.tsx b/web/app/[workspaceSlug]/(projects)/notifications/page.tsx index b23e52041a0..b2d61746cb9 100644 --- a/web/app/[workspaceSlug]/(projects)/notifications/page.tsx +++ b/web/app/[workspaceSlug]/(projects)/notifications/page.tsx @@ -21,7 +21,7 @@ const IssuePeekOverview = dynamic( () => import("@/components/issues/peek-overview/root").then((m) => m.IssuePeekOverview), { ssr: false, - loading: () => , + loading: () => null, } ); diff --git a/web/core/components/cycles/cycles-view.tsx b/web/core/components/cycles/cycles-view.tsx index 296d492df07..fb6bb1ee060 100644 --- a/web/core/components/cycles/cycles-view.tsx +++ b/web/core/components/cycles/cycles-view.tsx @@ -1,6 +1,7 @@ +import { FC } from "react"; import { observer } from "mobx-react"; +import dynamic from "next/dynamic"; import Image from "next/image"; -import { FC } from "react"; // components // ui import { CycleModuleListLayout } from "@/components/ui"; @@ -9,7 +10,6 @@ import { useCycle, useCycleFilter } from "@/hooks/store"; // assets import AllFiltersImage from "@/public/empty-state/cycle/all-filters.svg"; import NameFilterImage from "@/public/empty-state/cycle/name-filter.svg"; -import dynamic from "next/dynamic"; export interface ICyclesView { workspaceSlug: string; diff --git a/web/core/components/page-views/workspace-dashboard.tsx b/web/core/components/page-views/workspace-dashboard.tsx index ccadb61c12e..05b4a8b83bc 100644 --- a/web/core/components/page-views/workspace-dashboard.tsx +++ b/web/core/components/page-views/workspace-dashboard.tsx @@ -1,9 +1,11 @@ +import { useEffect } from "react"; import { observer } from "mobx-react"; +import dynamic from "next/dynamic"; import { useParams } from "next/navigation"; -import { useEffect } from "react"; // components import { ContentWrapper } from "@plane/ui"; // import { DashboardWidgets } from "@/components/dashboard"; +import { LogoSpinner } from "@/components/common"; import { EmptyState } from "@/components/empty-state"; // import { IssuePeekOverview } from "@/components/issues"; import { TourRoot } from "@/components/onboarding"; @@ -14,10 +16,8 @@ import { PRODUCT_TOUR_COMPLETED } from "@/constants/event-tracker"; // helpers import { cn } from "@/helpers/common.helper"; // hooks -import { LogoSpinner } from "@/components/common"; import { useCommandPalette, useDashboard, useEventTracker, useProject, useUser, useUserProfile } from "@/hooks/store"; import useSize from "@/hooks/use-window-size"; -import dynamic from "next/dynamic"; const DashboardWidgets = dynamic( () => import("@/components/dashboard/home-dashboard-widgets").then((m) => m.DashboardWidgets), @@ -30,7 +30,7 @@ const IssuePeekOverview = dynamic( () => import("@/components/issues/peek-overview/root").then((m) => m.IssuePeekOverview), { ssr: false, - loading: () => , + loading: () => null, } ); From a635a873feee614e727d5011ac75a4d7239726bf Mon Sep 17 00:00:00 2001 From: Satish Gandham Date: Tue, 17 Dec 2024 19:30:52 +0530 Subject: [PATCH 7/8] Fix class name imports --- web/ce/components/workflow/add-state-transition.tsx | 2 +- web/ce/hooks/use-editor-flagging.ts | 2 +- web/core/components/common/access-field.tsx | 2 +- web/core/components/dropdowns/layout.tsx | 2 +- web/core/components/dropdowns/member/avatar.tsx | 2 +- web/core/components/gantt-chart/chart/views/quarter.tsx | 2 +- web/core/components/gantt-chart/chart/views/week.tsx | 2 +- .../gantt-chart/helpers/blockResizables/left-resizable.tsx | 2 +- .../gantt-chart/helpers/blockResizables/right-resizable.tsx | 2 +- web/core/components/inbox/inbox-filter/root.tsx | 2 +- web/core/components/issues/issue-layouts/list/list-group.tsx | 2 +- web/core/components/modules/module-view-header.tsx | 2 +- web/core/components/project/create/common-attributes.tsx | 2 +- web/core/components/project/filters.tsx | 2 +- web/core/components/ui/loader/layouts/list-layout-loader.tsx | 2 +- web/core/components/workspace/logo.tsx | 2 +- 16 files changed, 16 insertions(+), 16 deletions(-) diff --git a/web/ce/components/workflow/add-state-transition.tsx b/web/ce/components/workflow/add-state-transition.tsx index 48ba6c02ab9..5fb60b40280 100644 --- a/web/ce/components/workflow/add-state-transition.tsx +++ b/web/ce/components/workflow/add-state-transition.tsx @@ -1,6 +1,6 @@ import { Plus } from "lucide-react"; +import { cn } from "@/helpers/common.helper"; // Plane -import { cn } from "@plane/editor"; type Props = { workspaceSlug: string; diff --git a/web/ce/hooks/use-editor-flagging.ts b/web/ce/hooks/use-editor-flagging.ts index 05fdff91fa5..7f05564de80 100644 --- a/web/ce/hooks/use-editor-flagging.ts +++ b/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 diff --git a/web/core/components/common/access-field.tsx b/web/core/components/common/access-field.tsx index dd7606a3aee..e807d388eec 100644 --- a/web/core/components/common/access-field.tsx +++ b/web/core/components/common/access-field.tsx @@ -1,6 +1,6 @@ import { LucideIcon } from "lucide-react"; -import { cn } from "@plane/editor"; import { Tooltip } from "@plane/ui"; +import { cn } from "@/helpers/common.helper"; type Props = { onChange: (value: number) => void; diff --git a/web/core/components/dropdowns/layout.tsx b/web/core/components/dropdowns/layout.tsx index 7864d1849df..f4723e6a448 100644 --- a/web/core/components/dropdowns/layout.tsx +++ b/web/core/components/dropdowns/layout.tsx @@ -2,10 +2,10 @@ import { useCallback, useMemo } from "react"; import { observer } from "mobx-react"; import { Check } from "lucide-react"; // plane packages -import { cn } from "@plane/editor"; import { Dropdown } from "@plane/ui"; // constants import { EIssueLayoutTypes, ISSUE_LAYOUT_MAP } from "@/constants/issue"; +import { cn } from "@/helpers/common.helper"; type TLayoutDropDown = { onChange: (value: EIssueLayoutTypes) => void; diff --git a/web/core/components/dropdowns/member/avatar.tsx b/web/core/components/dropdowns/member/avatar.tsx index 9907de3599e..5f86e44fca2 100644 --- a/web/core/components/dropdowns/member/avatar.tsx +++ b/web/core/components/dropdowns/member/avatar.tsx @@ -3,8 +3,8 @@ import { observer } from "mobx-react"; import { LucideIcon, Users } from "lucide-react"; // plane ui -import { cn } from "@plane/editor"; import { Avatar, AvatarGroup } from "@plane/ui"; +import { cn } from "@/helpers/common.helper"; // helpers import { getFileURL } from "@/helpers/file.helper"; // hooks diff --git a/web/core/components/gantt-chart/chart/views/quarter.tsx b/web/core/components/gantt-chart/chart/views/quarter.tsx index 421d0bdfec6..fa06b38c87d 100644 --- a/web/core/components/gantt-chart/chart/views/quarter.tsx +++ b/web/core/components/gantt-chart/chart/views/quarter.tsx @@ -1,7 +1,7 @@ import { FC } from "react"; import { observer } from "mobx-react"; // Plane -import { cn } from "@plane/editor"; +import { cn } from "@/helpers/common.helper"; // hooks import { useTimeLineChartStore } from "@/hooks/use-timeline-chart"; // diff --git a/web/core/components/gantt-chart/chart/views/week.tsx b/web/core/components/gantt-chart/chart/views/week.tsx index 2096acbc2bc..6a3c7b05b6b 100644 --- a/web/core/components/gantt-chart/chart/views/week.tsx +++ b/web/core/components/gantt-chart/chart/views/week.tsx @@ -1,7 +1,7 @@ import { FC } from "react"; import { observer } from "mobx-react"; // Plane -import { cn } from "@plane/editor"; +import { cn } from "@/helpers/common.helper"; // hooks import { useTimeLineChartStore } from "@/hooks/use-timeline-chart"; // diff --git a/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx b/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx index b5f0de5c157..b12b1da7d74 100644 --- a/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx +++ b/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx @@ -1,7 +1,7 @@ import { useState } from "react"; import { observer } from "mobx-react"; // Plane -import { cn } from "@plane/editor"; +import { cn } from "@/helpers/common.helper"; //helpers import { renderFormattedDate } from "@/helpers/date-time.helper"; //hooks diff --git a/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx b/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx index bb262875b59..961d3e740ab 100644 --- a/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx +++ b/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx @@ -1,7 +1,7 @@ import { useState } from "react"; import { observer } from "mobx-react"; // Plane -import { cn } from "@plane/editor"; +import { cn } from "@/helpers/common.helper"; //helpers import { renderFormattedDate } from "@/helpers/date-time.helper"; //hooks diff --git a/web/core/components/inbox/inbox-filter/root.tsx b/web/core/components/inbox/inbox-filter/root.tsx index 04761033106..def361d014a 100644 --- a/web/core/components/inbox/inbox-filter/root.tsx +++ b/web/core/components/inbox/inbox-filter/root.tsx @@ -1,10 +1,10 @@ import { FC } from "react"; import { ChevronDown, ListFilter } from "lucide-react"; // components -import { cn } from "@plane/editor"; import { getButtonStyling } from "@plane/ui"; import { InboxIssueFilterSelection, InboxIssueOrderByDropdown } from "@/components/inbox/inbox-filter"; import { FiltersDropdown } from "@/components/issues"; +import { cn } from "@/helpers/common.helper"; import useSize from "@/hooks/use-window-size"; const smallButton = ; diff --git a/web/core/components/issues/issue-layouts/list/list-group.tsx b/web/core/components/issues/issue-layouts/list/list-group.tsx index fe54ce875d0..13bf47bfba4 100644 --- a/web/core/components/issues/issue-layouts/list/list-group.tsx +++ b/web/core/components/issues/issue-layouts/list/list-group.tsx @@ -4,7 +4,6 @@ import { MutableRefObject, useEffect, useRef, useState } from "react"; import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine"; import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"; import { observer } from "mobx-react"; -import { cn } from "@plane/editor"; // plane packages import { IGroupByColumn, @@ -20,6 +19,7 @@ import { Row, setToast, TOAST_TYPE } from "@plane/ui"; import { ListLoaderItemRow } from "@/components/ui"; // constants import { DRAG_ALLOWED_GROUPS, EIssueLayoutTypes } from "@/constants/issue"; +import { cn } from "@/helpers/common.helper"; // hooks import { useProjectState } from "@/hooks/store"; import { useIntersectionObserver } from "@/hooks/use-intersection-observer"; diff --git a/web/core/components/modules/module-view-header.tsx b/web/core/components/modules/module-view-header.tsx index 592c1e80d7e..80ad149fd99 100644 --- a/web/core/components/modules/module-view-header.tsx +++ b/web/core/components/modules/module-view-header.tsx @@ -6,7 +6,6 @@ import { useParams } from "next/navigation"; // icons import { ListFilter, Search, X } from "lucide-react"; // editor -import { cn } from "@plane/editor"; // plane helpers import { useOutsideClickDetector } from "@plane/hooks"; // types @@ -18,6 +17,7 @@ import { FiltersDropdown } from "@/components/issues"; import { ModuleFiltersSelection, ModuleOrderByDropdown } from "@/components/modules/dropdowns"; // constants import { MODULE_VIEW_LAYOUTS } from "@/constants/module"; +import { cn } from "@/helpers/common.helper"; // helpers import { calculateTotalFilters } from "@/helpers/filter.helper"; // hooks diff --git a/web/core/components/project/create/common-attributes.tsx b/web/core/components/project/create/common-attributes.tsx index f753d0ae758..8bf36106cbf 100644 --- a/web/core/components/project/create/common-attributes.tsx +++ b/web/core/components/project/create/common-attributes.tsx @@ -1,11 +1,11 @@ import { ChangeEvent } from "react"; import { Controller, useFormContext, UseFormSetValue } from "react-hook-form"; import { Info } from "lucide-react"; -import { cn } from "@plane/editor"; // ui import { Input, TextArea, Tooltip } from "@plane/ui"; // constants import { ETabIndices } from "@/constants/tab-indices"; +import { cn } from "@/helpers/common.helper"; // helpers import { projectIdentifierSanitizer } from "@/helpers/project.helper"; import { getTabIndex } from "@/helpers/tab-indices.helper"; diff --git a/web/core/components/project/filters.tsx b/web/core/components/project/filters.tsx index 9434f79951f..250feb96650 100644 --- a/web/core/components/project/filters.tsx +++ b/web/core/components/project/filters.tsx @@ -3,11 +3,11 @@ import { observer } from "mobx-react"; import { useParams } from "next/navigation"; import { ListFilter } from "lucide-react"; // types -import { cn } from "@plane/editor"; import { TProjectFilters } from "@plane/types"; // components import { FiltersDropdown } from "@/components/issues"; import { ProjectFiltersSelection, ProjectOrderByDropdown } from "@/components/project"; +import { cn } from "@/helpers/common.helper"; // helpers import { calculateTotalFilters } from "@/helpers/filter.helper"; // hooks diff --git a/web/core/components/ui/loader/layouts/list-layout-loader.tsx b/web/core/components/ui/loader/layouts/list-layout-loader.tsx index 65d4d1565a2..76f86f920ca 100644 --- a/web/core/components/ui/loader/layouts/list-layout-loader.tsx +++ b/web/core/components/ui/loader/layouts/list-layout-loader.tsx @@ -1,7 +1,7 @@ import { Fragment, forwardRef } from "react"; import range from "lodash/range"; -import { cn } from "@plane/editor"; import { Row } from "@plane/ui"; +import { cn } from "@/helpers/common.helper"; import { getRandomInt, getRandomLength } from "../utils"; export const ListLoaderItemRow = forwardRef< diff --git a/web/core/components/workspace/logo.tsx b/web/core/components/workspace/logo.tsx index 4407205e07f..93088a2ad55 100644 --- a/web/core/components/workspace/logo.tsx +++ b/web/core/components/workspace/logo.tsx @@ -1,5 +1,5 @@ // helpers -import { cn } from "@plane/editor"; +import { cn } from "@/helpers/common.helper"; import { getFileURL } from "@/helpers/file.helper"; type Props = { From ccb3cc135f3e71adc5ea04db34226099864df733 Mon Sep 17 00:00:00 2001 From: Satish Gandham Date: Fri, 20 Dec 2024 15:43:26 +0530 Subject: [PATCH 8/8] Add proper loaders --- web/core/components/inbox/content/root.tsx | 11 ++++++----- .../components/page-views/workspace-dashboard.tsx | 7 ++++++- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/web/core/components/inbox/content/root.tsx b/web/core/components/inbox/content/root.tsx index 96317e9fbb7..b7839139c1e 100644 --- a/web/core/components/inbox/content/root.tsx +++ b/web/core/components/inbox/content/root.tsx @@ -1,28 +1,29 @@ -import { observer } from "mobx-react"; 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"; // 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"; -import dynamic from "next/dynamic"; -import { LogoSpinner } from "@/components/common"; const InboxIssueActionsHeader = dynamic( () => import("@/components/inbox/content/inbox-issue-header").then((m) => m.InboxIssueActionsHeader), { ssr: false, - loading: () => , + loading: () => null, } ); + const InboxIssueMainContent = dynamic( () => import("@/components/inbox/content/issue-root").then((m) => m.InboxIssueMainContent), { ssr: false, - loading: () => , + loading: () => null} />, } ); diff --git a/web/core/components/page-views/workspace-dashboard.tsx b/web/core/components/page-views/workspace-dashboard.tsx index 05b4a8b83bc..baf60933c91 100644 --- a/web/core/components/page-views/workspace-dashboard.tsx +++ b/web/core/components/page-views/workspace-dashboard.tsx @@ -19,11 +19,16 @@ import { cn } from "@/helpers/common.helper"; 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: () => , + loading: () => ( +
+ +
+ ), } ); const IssuePeekOverview = dynamic(