[WEB-4747]chore: rendering cycle progress from snapshot (#7626)

* chore: rendering progress from snaposhot

* chore: removed unncessary memoization

---------

Co-authored-by: Sriram Veeraghanta <veeraghanta.sriram@gmail.com>

Author: vamsikrishnamathala

apps/web/core/components/cycles/list/cycles-list-item.tsx

@@ -1,6 +1,6 @@
 "use client";
-
 import { FC, MouseEvent, useRef } from "react";
+import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react";
 import { usePathname, useSearchParams } from "next/navigation";
 import { Check } from "lucide-react";
@@ -53,11 +53,6 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
   const isCompleted = cycleStatus === "completed";
   const isActive = cycleStatus === "current";
 
-  const completionPercentage =
-    ((cycleDetails.completed_issues + cycleDetails.cancelled_issues) / cycleDetails.total_issues) * 100;
-
-  const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage);
-
   // handlers
   const openCycleOverview = (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
     e.preventDefault();
@@ -78,6 +73,21 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
 
   const handleItemClick = cycleDetails.archived_at ? handleArchivedCycleClick : undefined;
 
+  const getCycleProgress = () => {
+    let completionPercentage =
+      ((cycleDetails.completed_issues + cycleDetails.cancelled_issues) / cycleDetails.total_issues) * 100;
+
+    if (isCompleted && !isEmpty(cycleDetails.progress_snapshot)) {
+      completionPercentage =
+        ((cycleDetails.progress_snapshot.completed_issues + cycleDetails.progress_snapshot.cancelled_issues) /
+          cycleDetails.progress_snapshot.total_issues) *
+        100;
+    }
+    return isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage);
+  };
+
+  const progress = getCycleProgress();
+
   return (
     <ListItem
       title={cycleDetails?.name ?? ""}