[WEB-2007] fix: cycles loading optimization (#5207)

* fix: cycles loading optimization * fix: ts error * fix: types added along with apis * fix: formatting * fix: removed bottom border * fix: fixed loading state for cycle-stats --------- Co-authored-by: gakshita <akshitagoyal1516@gmail.com>
2026-01-23 14:48:57 -06:00 · 2024-07-23 17:04:31 +05:30
parent 2978593c63
commit 31fe9a1a02
8 changed files with 223 additions and 100 deletions
--- a/packages/types/src/cycle/cycle.d.ts
+++ b/packages/types/src/cycle/cycle.d.ts
@@ -1,4 +1,4 @@
-import type { TIssue, IIssueFilterOptions } from "@plane/types";
+import type {TIssue, IIssueFilterOptions} from "@plane/types";

 export type TCycleGroups = "current" | "upcoming" | "completed" | "draft";

@@ -61,6 +61,10 @@ export type TProgressSnapshot = {
  estimate_distribution?: TCycleEstimateDistribution;
 };

+export interface IProjectDetails {
+  id: string;
+}
+
 export interface ICycle extends TProgressSnapshot {
  progress_snapshot: TProgressSnapshot | undefined;

@@ -85,6 +89,7 @@ export interface ICycle extends TProgressSnapshot {
    filters: IIssueFilterOptions;
  };
  workspace_id: string;
+  project_detail: IProjectDetails;
 }

 export interface CycleIssueResponse {
@@ -102,7 +107,7 @@ export interface CycleIssueResponse {
 }

 export type SelectCycleType =
-  | (ICycle & { actionType: "edit" | "delete" | "create-issue" })
+  | (ICycle & {actionType: "edit" | "delete" | "create-issue"})
  | undefined;

 export type CycleDateCheckData = {
--- a/packages/types/src/workspace.d.ts
+++ b/packages/types/src/workspace.d.ts
@@ -1,5 +1,6 @@
-import { EUserWorkspaceRoles } from "@/constants/workspace";
+import {EUserWorkspaceRoles} from "@/constants/workspace";
 import type {
+  ICycle,
  IProjectMember,
  IUser,
  IUserLite,
@@ -46,7 +47,7 @@ export interface IWorkspaceMemberInvitation {
 }

 export interface IWorkspaceBulkInviteFormData {
-  emails: { email: string; role: EUserWorkspaceRoles }[];
+  emails: {email: string; role: EUserWorkspaceRoles}[];
 }

 export type Properties = {
@@ -197,3 +198,25 @@ export interface IProductUpdateResponse {
    eyes: number;
  };
 }
+
+export interface IWorkspaceActiveCyclesResponse {
+  count: number;
+  extra_stats: null;
+  next_cursor: string;
+  next_page_results: boolean;
+  prev_cursor: string;
+  prev_page_results: boolean;
+  results: ICycle[];
+  total_pages: number;
+}
+
+export interface IWorkspaceProgressResponse {
+  completed_issues: number;
+  total_issues: number;
+  started_issues: number;
+  cancelled_issues: number;
+  unstarted_issues: number;
+}
+export interface IWorkspaceAnalyticsResponse {
+  completion_chart: any;
+}
--- a/web/core/components/cycles/active-cycle/cycle-stats.tsx
+++ b/web/core/components/cycles/active-cycle/cycle-stats.tsx
@@ -30,11 +30,12 @@ import useLocalStorage from "@/hooks/use-local-storage";
 export type ActiveCycleStatsProps = {
  workspaceSlug: string;
  projectId: string;
-  cycle: ICycle;
+  cycle: ICycle | null;
+  cycleId?: string | null;
 };

 export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
-  const { workspaceSlug, projectId, cycle } = props;
+  const { workspaceSlug, projectId, cycle, cycleId } = props;

  const { storedValue: tab, setValue: setTab } = useLocalStorage("activeCycleTab", "Assignees");

@@ -63,22 +64,29 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
  const { currentProjectDetails } = useProject();

  useSWR(
-    workspaceSlug && projectId && cycle.id ? CYCLE_ISSUES_WITH_PARAMS(cycle.id, { priority: "urgent,high" }) : null,
-    workspaceSlug && projectId && cycle.id
-      ? () => fetchActiveCycleIssues(workspaceSlug, projectId, 30, cycle.id)
-      : null,
+    workspaceSlug && projectId && cycleId ? CYCLE_ISSUES_WITH_PARAMS(cycleId, { priority: "urgent,high" }) : null,
+    workspaceSlug && projectId && cycleId ? () => fetchActiveCycleIssues(workspaceSlug, projectId, 30, cycleId) : null,
    { revalidateIfStale: false, revalidateOnFocus: false }
  );

-  const cycleIssueDetails = getActiveCycleById(cycle.id);
+  const cycleIssueDetails = cycleId ? getActiveCycleById(cycleId) : { nextPageResults: false };

  const loadMoreIssues = useCallback(() => {
-    fetchNextActiveCycleIssues(workspaceSlug, projectId, cycle.id);
-  }, [workspaceSlug, projectId, cycle.id, issuesLoaderElement, cycleIssueDetails?.nextPageResults]);
+    if (!cycleId) return;
+    fetchNextActiveCycleIssues(workspaceSlug, projectId, cycleId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [workspaceSlug, projectId, cycleId, issuesLoaderElement, cycleIssueDetails?.nextPageResults]);

  useIntersectionObserver(issuesContainerRef, issuesLoaderElement, loadMoreIssues, `0% 0% 100% 0%`);

-  return (
+  const loaders = (
+    <Loader className="space-y-3">
+      <Loader.Item height="30px" />
+      <Loader.Item height="30px" />
+      <Loader.Item height="30px" />
+    </Loader>
+  );
+  return cycleId ? (
    <div className="flex flex-col gap-4 p-4 min-h-[17rem] overflow-hidden bg-custom-background-100 col-span-1 lg:col-span-2 xl:col-span-1 border border-custom-border-200 rounded-lg">
      <Tab.Group
        as={Fragment}
@@ -154,7 +162,7 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
              ref={issuesContainerRef}
              className="flex flex-col gap-1 h-full w-full overflow-y-auto vertical-scrollbar scrollbar-sm"
            >
-              {cycleIssueDetails && cycleIssueDetails.issueIds ? (
+              {cycleIssueDetails && "issueIds" in cycleIssueDetails ? (
                cycleIssueDetails.issueCount > 0 ? (
                  <>
                    {cycleIssueDetails.issueIds.map((issueId: string) => {
@@ -229,11 +237,7 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
                  </div>
                )
              ) : (
-                <Loader className="space-y-3">
-                  <Loader.Item height="50px" />
-                  <Loader.Item height="50px" />
-                  <Loader.Item height="50px" />
-                </Loader>
+                loaders
              )}
            </div>
          </Tab.Panel>
@@ -242,44 +246,52 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
            as="div"
            className="flex h-52 w-full flex-col gap-1 overflow-y-auto text-custom-text-200 vertical-scrollbar scrollbar-sm"
          >
-            {cycle?.distribution?.assignees && cycle.distribution.assignees.length > 0 ? (
-              cycle.distribution?.assignees?.map((assignee, index) => {
-                if (assignee.assignee_id)
-                  return (
-                    <SingleProgressStats
-                      key={assignee.assignee_id}
-                      title={
-                        <div className="flex items-center gap-2">
-                          <Avatar name={assignee?.display_name ?? undefined} src={assignee?.avatar ?? undefined} />
+            {cycle ? (
+              cycle?.distribution?.assignees && cycle.distribution.assignees.length > 0 ? (
+                cycle.distribution?.assignees?.map((assignee, index) => {
+                  if (assignee.assignee_id)
+                    return (
+                      <SingleProgressStats
+                        key={assignee.assignee_id}
+                        title={
+                          <div className="flex items-center gap-2">
+                            <Avatar name={assignee?.display_name ?? undefined} src={assignee?.avatar ?? undefined} />

-                          <span>{assignee.display_name}</span>
-                        </div>
-                      }
-                      completed={assignee.completed_issues}
-                      total={assignee.total_issues}
-                    />
-                  );
-                else
-                  return (
-                    <SingleProgressStats
-                      key={`unassigned-${index}`}
-                      title={
-                        <div className="flex items-center gap-2">
-                          <div className="h-5 w-5 rounded-full border-2 border-custom-border-200 bg-custom-background-80">
-                            <img src="/user.png" height="100%" width="100%" className="rounded-full" alt="User" />
+                            <span>{assignee.display_name}</span>
                          </div>
-                          <span>No assignee</span>
-                        </div>
-                      }
-                      completed={assignee.completed_issues}
-                      total={assignee.total_issues}
-                    />
-                  );
-              })
+                        }
+                        completed={assignee.completed_issues}
+                        total={assignee.total_issues}
+                      />
+                    );
+                  else
+                    return (
+                      <SingleProgressStats
+                        key={`unassigned-${index}`}
+                        title={
+                          <div className="flex items-center gap-2">
+                            <div className="h-5 w-5 rounded-full border-2 border-custom-border-200 bg-custom-background-80">
+                              <img src="/user.png" height="100%" width="100%" className="rounded-full" alt="User" />
+                            </div>
+                            <span>No assignee</span>
+                          </div>
+                        }
+                        completed={assignee.completed_issues}
+                        total={assignee.total_issues}
+                      />
+                    );
+                })
+              ) : (
+                <div className="flex items-center justify-center h-full w-full">
+                  <EmptyState
+                    type={EmptyStateType.ACTIVE_CYCLE_ASSIGNEE_EMPTY_STATE}
+                    layout="screen-simple"
+                    size="sm"
+                  />
+                </div>
+              )
            ) : (
-              <div className="flex items-center justify-center h-full w-full">
-                <EmptyState type={EmptyStateType.ACTIVE_CYCLE_ASSIGNEE_EMPTY_STATE} layout="screen-simple" size="sm" />
-              </div>
+              loaders
            )}
          </Tab.Panel>

@@ -287,33 +299,41 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
            as="div"
            className="flex h-52 w-full flex-col gap-1 overflow-y-auto  text-custom-text-200 vertical-scrollbar scrollbar-sm"
          >
-            {cycle?.distribution?.labels && cycle.distribution.labels.length > 0 ? (
-              cycle.distribution.labels?.map((label, index) => (
-                <SingleProgressStats
-                  key={label.label_id ?? `no-label-${index}`}
-                  title={
-                    <div className="flex items-center gap-2">
-                      <span
-                        className="block h-3 w-3 rounded-full"
-                        style={{
-                          backgroundColor: label.color ?? "#000000",
-                        }}
-                      />
-                      <span className="text-xs">{label.label_name ?? "No labels"}</span>
-                    </div>
-                  }
-                  completed={label.completed_issues}
-                  total={label.total_issues}
-                />
-              ))
+            {cycle ? (
+              cycle?.distribution?.labels && cycle.distribution.labels.length > 0 ? (
+                cycle.distribution.labels?.map((label, index) => (
+                  <SingleProgressStats
+                    key={label.label_id ?? `no-label-${index}`}
+                    title={
+                      <div className="flex items-center gap-2">
+                        <span
+                          className="block h-3 w-3 rounded-full"
+                          style={{
+                            backgroundColor: label.color ?? "#000000",
+                          }}
+                        />
+                        <span className="text-xs">{label.label_name ?? "No labels"}</span>
+                      </div>
+                    }
+                    completed={label.completed_issues}
+                    total={label.total_issues}
+                  />
+                ))
+              ) : (
+                <div className="flex items-center justify-center h-full w-full">
+                  <EmptyState type={EmptyStateType.ACTIVE_CYCLE_LABEL_EMPTY_STATE} layout="screen-simple" size="sm" />
+                </div>
+              )
            ) : (
-              <div className="flex items-center justify-center h-full w-full">
-                <EmptyState type={EmptyStateType.ACTIVE_CYCLE_LABEL_EMPTY_STATE} layout="screen-simple" size="sm" />
-              </div>
+              loaders
            )}
          </Tab.Panel>
        </Tab.Panels>
      </Tab.Group>
    </div>
+  ) : (
+    <Loader className="flex flex-col gap-4 min-h-[17rem] overflow-hidden bg-custom-background-100 col-span-1 lg:col-span-2 xl:col-span-1">
+      <Loader.Item width="100%" height="17rem" />
+    </Loader>
  );
 });
--- a/web/core/components/cycles/active-cycle/productivity.tsx
+++ b/web/core/components/cycles/active-cycle/productivity.tsx
@@ -2,7 +2,7 @@ import { FC, Fragment, useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { ICycle, TCyclePlotType } from "@plane/types";
-import { CustomSelect, Spinner } from "@plane/ui";
+import { CustomSelect, Loader, Spinner } from "@plane/ui";
 // components
 import ProgressChart from "@/components/core/sidebar/progress-chart";
 import { EmptyState } from "@/components/empty-state";
@@ -15,7 +15,7 @@ import { EEstimateSystem } from "@/plane-web/constants/estimates";
 export type ActiveCycleProductivityProps = {
  workspaceSlug: string;
  projectId: string;
-  cycle: ICycle;
+  cycle: ICycle | null;
 };

 const cycleBurnDownChartOptions = [
@@ -51,10 +51,11 @@ export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = observe
    isCurrentProjectEstimateEnabled && currentActiveEstimateId && estimateById(currentActiveEstimateId);
  const isCurrentEstimateTypeIsPoints = estimateDetails && estimateDetails?.type === EEstimateSystem.POINTS;

-  const chartDistributionData = plotType === "points" ? cycle?.estimate_distribution : cycle?.distribution || undefined;
+  const chartDistributionData =
+    cycle && plotType === "points" ? cycle?.estimate_distribution : cycle?.distribution || undefined;
  const completionChartDistributionData = chartDistributionData?.completion_chart || undefined;

-  return (
+  return cycle ? (
    <div className="flex flex-col justify-center min-h-[17rem] gap-5 px-3.5 py-4 bg-custom-background-100 border border-custom-border-200 rounded-lg">
      <div className="relative flex items-center justify-between gap-4 -mt-7">
        <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle?.id}`}>
@@ -135,5 +136,9 @@ export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = observe
        )}
      </Link>
    </div>
+  ) : (
+    <Loader className="flex flex-col min-h-[17rem] gap-5 bg-custom-background-100 border border-custom-border-200 rounded-lg">
+      <Loader.Item width="100%" height="100%" />
+    </Loader>
  );
 });
--- a/web/core/components/cycles/active-cycle/progress.tsx
+++ b/web/core/components/cycles/active-cycle/progress.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 // types
 import { ICycle } from "@plane/types";
 // ui
-import { LinearProgressIndicator } from "@plane/ui";
+import { LinearProgressIndicator, Loader } from "@plane/ui";
 // components
 import { EmptyState } from "@/components/empty-state";
 // constants
@@ -15,7 +15,7 @@ import { EmptyStateType } from "@/constants/empty-state";
 export type ActiveCycleProgressProps = {
  workspaceSlug: string;
  projectId: string;
-  cycle: ICycle;
+  cycle: ICycle | null;
 };

 export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = (props) => {
@@ -24,18 +24,20 @@ export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = (props) => {
  const progressIndicatorData = CYCLE_STATE_GROUPS_DETAILS.map((group, index) => ({
    id: index,
    name: group.title,
-    value: cycle.total_issues > 0 ? (cycle[group.key as keyof ICycle] as number) : 0,
+    value: cycle && cycle.total_issues > 0 ? (cycle[group.key as keyof ICycle] as number) : 0,
    color: group.color,
  }));

-  const groupedIssues: any = {
-    completed: cycle.completed_issues,
-    started: cycle.started_issues,
-    unstarted: cycle.unstarted_issues,
-    backlog: cycle.backlog_issues,
-  };
+  const groupedIssues: any = cycle
+    ? {
+        completed: cycle.completed_issues,
+        started: cycle.started_issues,
+        unstarted: cycle.unstarted_issues,
+        backlog: cycle.backlog_issues,
+      }
+    : {};

-  return (
+  return cycle ? (
    <Link
      href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle?.id}`}
      className="flex flex-col min-h-[17rem] gap-5 py-4 px-3.5 bg-custom-background-100 border border-custom-border-200 rounded-lg"
@@ -94,5 +96,9 @@ export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = (props) => {
        </div>
      )}
    </Link>
+  ) : (
+    <Loader className="flex flex-col min-h-[17rem] gap-5 bg-custom-background-100 border border-custom-border-200 rounded-lg">
+      <Loader.Item width="100%" height="100%" />
+    </Loader>
  );
 };
--- a/web/core/components/cycles/active-cycle/root.tsx
+++ b/web/core/components/cycles/active-cycle/root.tsx
@@ -28,7 +28,7 @@ export const ActiveCycleRoot: React.FC<IActiveCycleDetails> = observer((props) =
  // props
  const { workspaceSlug, projectId } = props;
  // store hooks
-  const { fetchActiveCycle, currentProjectActiveCycleId, getActiveCycleById } = useCycle();
+  const { currentProjectActiveCycle, fetchActiveCycle, currentProjectActiveCycleId, getActiveCycleById } = useCycle();
  // derived values
  const activeCycle = currentProjectActiveCycleId ? getActiveCycleById(currentProjectActiveCycleId) : null;
  // fetch active cycle details
@@ -38,7 +38,7 @@ export const ActiveCycleRoot: React.FC<IActiveCycleDetails> = observer((props) =
  );

  // show loader if active cycle is loading
-  if (!activeCycle && isLoading)
+  if (!currentProjectActiveCycle && isLoading)
    return (
      <Loader>
        <Loader.Item height="250px" />
@@ -54,10 +54,10 @@ export const ActiveCycleRoot: React.FC<IActiveCycleDetails> = observer((props) =
              <CycleListGroupHeader title="Active cycle" type="current" isExpanded={open} />
            </Disclosure.Button>
            <Disclosure.Panel>
-              {!activeCycle ? (
+              {!currentProjectActiveCycle ? (
                <EmptyState type={EmptyStateType.PROJECT_CYCLE_ACTIVE} size="sm" />
              ) : (
-                <div className="flex flex-col bg-custom-background-90 border-b">
+                <div className="flex flex-col bg-custom-background-90">
                  {currentProjectActiveCycleId && (
                    <CyclesListItem
                      key={currentProjectActiveCycleId}
@@ -75,7 +75,12 @@ export const ActiveCycleRoot: React.FC<IActiveCycleDetails> = observer((props) =
                        projectId={projectId}
                        cycle={activeCycle}
                      />
-                      <ActiveCycleStats workspaceSlug={workspaceSlug} projectId={projectId} cycle={activeCycle} />
+                      <ActiveCycleStats
+                        workspaceSlug={workspaceSlug}
+                        projectId={projectId}
+                        cycle={activeCycle}
+                        cycleId={currentProjectActiveCycleId}
+                      />
                    </div>
                  </div>
                </div>
--- a/web/core/services/cycle.service.ts
+++ b/web/core/services/cycle.service.ts
@@ -1,15 +1,64 @@
 // services
-import type { CycleDateCheckData, ICycle, TIssuesResponse } from "@plane/types";
+import type {
+  CycleDateCheckData,
+  ICycle,
+  TIssuesResponse,
+  IWorkspaceActiveCyclesResponse,
+  IWorkspaceProgressResponse,
+  IWorkspaceAnalyticsResponse,
+} from "@plane/types";
 import { API_BASE_URL } from "@/helpers/common.helper";
 import { APIService } from "@/services/api.service";
-// types
-// helpers

 export class CycleService extends APIService {
  constructor() {
    super(API_BASE_URL);
  }

+  async workspaceActiveCyclesAnalytics(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    analytic_type: string = "points"
+  ): Promise<IWorkspaceAnalyticsResponse> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/analytics?type=${analytic_type}`
+    )
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+
+  async workspaceActiveCyclesProgress(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string
+  ): Promise<IWorkspaceProgressResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/progress/`)
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+
+  async workspaceActiveCycles(
+    workspaceSlug: string,
+    cursor: string,
+    per_page: number
+  ): Promise<IWorkspaceActiveCyclesResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/active-cycles/`, {
+      params: {
+        per_page,
+        cursor,
+      },
+    })
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+
  async getWorkspaceCycles(workspaceSlug: string): Promise<ICycle[]> {
    return this.get(`/api/workspaces/${workspaceSlug}/cycles/`)
      .then((response) => response?.data)
--- a/web/core/store/cycle.store.ts
+++ b/web/core/store/cycle.store.ts
@@ -32,6 +32,8 @@ export interface ICycleStore {
  currentProjectDraftCycleIds: string[] | null;
  currentProjectActiveCycleId: string | null;
  currentProjectArchivedCycleIds: string[] | null;
+  currentProjectActiveCycle: ICycle | null;
+
  // computed actions
  getFilteredCycleIds: (projectId: string, sortByManual: boolean) => string[] | null;
  getFilteredCompletedCycleIds: (projectId: string) => string[] | null;
@@ -100,6 +102,8 @@ export class CycleStore implements ICycleStore {
      currentProjectDraftCycleIds: computed,
      currentProjectActiveCycleId: computed,
      currentProjectArchivedCycleIds: computed,
+      currentProjectActiveCycle: computed,
+
      // actions
      setPlotType: action,
      fetchWorkspaceCycles: action,
@@ -208,7 +212,7 @@ export class CycleStore implements ICycleStore {
  get currentProjectActiveCycleId() {
    const projectId = this.rootStore.router.projectId;
    if (!projectId) return null;
-    const activeCycle = Object.keys(this.activeCycleIdMap ?? {}).find(
+    const activeCycle = Object.keys(this.cycleMap ?? {}).find(
      (cycleId) => this.cycleMap?.[cycleId]?.project_id === projectId
    );
    return activeCycle || null;
@@ -228,6 +232,12 @@ export class CycleStore implements ICycleStore {
    return archivedCycleIds;
  }

+  get currentProjectActiveCycle() {
+    const projectId = this.rootStore.router.projectId;
+    if (!projectId && !this.currentProjectActiveCycleId) return null;
+    return this.cycleMap?.[this.currentProjectActiveCycleId!] ?? null;
+  }
+
  /**
   * @description returns filtered cycle ids based on display filters and filters
   * @param {TCycleDisplayFilters} displayFilters