From f0f0efb7d41ffb167e2ba83b12d2bdd7377b09a1 Mon Sep 17 00:00:00 2001
From: rahulramesha <rahulramesham@gmail.com>
Date: Wed, 7 Feb 2024 15:44:22 +0530
Subject: [PATCH] fix constant draggable height while dragging and rendering
 blocks in kanban

---
 web/components/core/render-if-visible-HOC.tsx              | 7 +++++--
 .../issues/issue-layouts/kanban/base-kanban-root.tsx       | 1 +
 web/components/issues/issue-layouts/kanban/block.tsx       | 3 +++
 web/components/issues/issue-layouts/kanban/blocks-list.tsx | 3 +++
 web/components/issues/issue-layouts/kanban/default.tsx     | 6 ++++++
 .../issues/issue-layouts/kanban/kanban-group.tsx           | 3 +++
 web/components/issues/issue-layouts/kanban/swimlanes.tsx   | 2 ++
 7 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/web/components/core/render-if-visible-HOC.tsx b/web/components/core/render-if-visible-HOC.tsx
index 10e911027..b65fbbc36 100644
--- a/web/components/core/render-if-visible-HOC.tsx
+++ b/web/components/core/render-if-visible-HOC.tsx
@@ -13,6 +13,7 @@ type Props = {
   getShouldRender?: (index: number) => boolean;
   updateRenderTracker?: (index: number, isVisble: boolean) => void;
   placeholderChildren?: ReactNode;
+  pauseHeightUpdateWhileRendering?: boolean;
   index: number;
 };
 
@@ -29,6 +30,7 @@ const RenderIfVisible: React.FC<Props> = (props) => {
     getShouldRender,
     updateRenderTracker,
     placeholderChildren = null,
+    pauseHeightUpdateWhileRendering = false,
     index,
   } = props;
   const defaultVisible = !!getShouldRender && getShouldRender(index);
@@ -78,10 +80,11 @@ const RenderIfVisible: React.FC<Props> = (props) => {
     if (intersectionRef.current && isVisible) {
       placeholderHeight.current = intersectionRef.current.offsetHeight;
     }
-  }, [isVisible, intersectionRef, alwaysRender]);
+  }, [isVisible, intersectionRef, alwaysRender, pauseHeightUpdateWhileRendering]);
 
   const child = isVisible ? <>{children}</> : placeholderChildren;
-  const style = isVisible ? {} : { height: placeholderHeight.current, width: "100%" };
+  const style =
+    isVisible && !pauseHeightUpdateWhileRendering ? {} : { height: placeholderHeight.current, width: "100%" };
   const className = isVisible ? classNames : cn(classNames, "animate-pulse bg-custom-background-80");
 
   return React.createElement(as, { ref: intersectionRef, style, className }, child);
diff --git a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
index 2e48c018f..2fdf50851 100644
--- a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -286,6 +286,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
               storeType={storeType}
               addIssuesToView={addIssuesToView}
               scrollableContainerRef={scrollableContainerRef}
+              isDragStarted={isDragStarted}
             />
           </DragDropContext>
         </div>
diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx
index 82079d632..ed819c7a0 100644
--- a/web/components/issues/issue-layouts/kanban/block.tsx
+++ b/web/components/issues/issue-layouts/kanban/block.tsx
@@ -27,6 +27,7 @@ interface IssueBlockProps {
   quickActions: (issue: TIssue) => React.ReactNode;
   canEditProperties: (projectId: string | undefined) => boolean;
   scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
+  isDragStarted?: boolean;
 }
 
 interface IssueDetailsBlockProps {
@@ -103,6 +104,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
     quickActions,
     canEditProperties,
     scrollableContainerRef,
+    isDragStarted,
   } = props;
 
   const issue = issuesMap[issueId];
@@ -140,6 +142,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
               horizonatlOffset={50}
               alwaysRender={snapshot.isDragging}
               index={index}
+              pauseHeightUpdateWhileRendering={isDragStarted}
             >
               <KanbanIssueDetailsBlock
                 issue={issue}
diff --git a/web/components/issues/issue-layouts/kanban/blocks-list.tsx b/web/components/issues/issue-layouts/kanban/blocks-list.tsx
index c2f7eb4c3..cdc782e20 100644
--- a/web/components/issues/issue-layouts/kanban/blocks-list.tsx
+++ b/web/components/issues/issue-layouts/kanban/blocks-list.tsx
@@ -17,6 +17,7 @@ interface IssueBlocksListProps {
   quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
   canEditProperties: (projectId: string | undefined) => boolean;
   scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
+  isDragStarted?: boolean;
 }
 
 const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
@@ -32,6 +33,7 @@ const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
     quickActions,
     canEditProperties,
     scrollableContainerRef,
+    isDragStarted,
   } = props;
 
   return (
@@ -59,6 +61,7 @@ const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
                 isDragDisabled={isDragDisabled}
                 canEditProperties={canEditProperties}
                 scrollableContainerRef={scrollableContainerRef}
+                isDragStarted={isDragStarted}
               />
             );
           })}
diff --git a/web/components/issues/issue-layouts/kanban/default.tsx b/web/components/issues/issue-layouts/kanban/default.tsx
index 4d21cb375..810ba6ccc 100644
--- a/web/components/issues/issue-layouts/kanban/default.tsx
+++ b/web/components/issues/issue-layouts/kanban/default.tsx
@@ -47,6 +47,7 @@ export interface IGroupByKanBan {
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
   canEditProperties: (projectId: string | undefined) => boolean;
   scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
+  isDragStarted?: boolean;
 }
 
 const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
@@ -70,6 +71,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
     addIssuesToView,
     canEditProperties,
     scrollableContainerRef,
+    isDragStarted,
   } = props;
 
   const member = useMember();
@@ -139,6 +141,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
                   canEditProperties={canEditProperties}
                   groupByVisibilityToggle={groupByVisibilityToggle}
                   scrollableContainerRef={scrollableContainerRef}
+                  isDragStarted={isDragStarted}
                 />
               )}
             </div>
@@ -173,6 +176,7 @@ export interface IKanBan {
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
   canEditProperties: (projectId: string | undefined) => boolean;
   scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
+  isDragStarted?: boolean;
 }
 
 export const KanBan: React.FC<IKanBan> = observer((props) => {
@@ -195,6 +199,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
     addIssuesToView,
     canEditProperties,
     scrollableContainerRef,
+    isDragStarted,
   } = props;
 
   const issueKanBanView = useKanbanView();
@@ -220,6 +225,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
       addIssuesToView={addIssuesToView}
       canEditProperties={canEditProperties}
       scrollableContainerRef={scrollableContainerRef}
+      isDragStarted={isDragStarted}
     />
   );
 });
diff --git a/web/components/issues/issue-layouts/kanban/kanban-group.tsx b/web/components/issues/issue-layouts/kanban/kanban-group.tsx
index 2e39f3207..571a7bfb9 100644
--- a/web/components/issues/issue-layouts/kanban/kanban-group.tsx
+++ b/web/components/issues/issue-layouts/kanban/kanban-group.tsx
@@ -39,6 +39,7 @@ interface IKanbanGroup {
   canEditProperties: (projectId: string | undefined) => boolean;
   groupByVisibilityToggle: boolean;
   scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
+  isDragStarted?: boolean;
 }
 
 export const KanbanGroup = (props: IKanbanGroup) => {
@@ -60,6 +61,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
     quickAddCallback,
     viewId,
     scrollableContainerRef,
+    isDragStarted,
   } = props;
   // hooks
   const projectState = useProjectState();
@@ -131,6 +133,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
               quickActions={quickActions}
               canEditProperties={canEditProperties}
               scrollableContainerRef={scrollableContainerRef}
+              isDragStarted={isDragStarted}
             />
 
             {provided.placeholder}
diff --git a/web/components/issues/issue-layouts/kanban/swimlanes.tsx b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
index f3f187065..462ade1f8 100644
--- a/web/components/issues/issue-layouts/kanban/swimlanes.tsx
+++ b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
@@ -102,6 +102,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
     quickAddCallback,
     viewId,
     scrollableContainerRef,
+    isDragStarted,
   } = props;
 
   const calculateIssueCount = (column_id: string) => {
@@ -154,6 +155,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
                   quickAddCallback={quickAddCallback}
                   viewId={viewId}
                   scrollableContainerRef={scrollableContainerRef}
+                  isDragStarted={isDragStarted}
                 />
               </div>
             )}