From 83b31ec10969eb6c4cb1b3b101564b7bd3bfcdf4 Mon Sep 17 00:00:00 2001
From: rahulramesha <rahulramesham@gmail.com>
Date: Thu, 8 Feb 2024 19:26:09 +0530
Subject: [PATCH] force change in reference to re render the render if visible
 component when the order of list changes

---
 web/components/core/render-if-visible-HOC.tsx                | 5 ++++-
 web/components/issues/issue-layouts/kanban/block.tsx         | 3 +++
 web/components/issues/issue-layouts/kanban/blocks-list.tsx   | 1 +
 web/components/issues/issue-layouts/list/blocks-list.tsx     | 1 +
 .../issues/issue-layouts/spreadsheet/issue-row.tsx           | 4 ++++
 .../issues/issue-layouts/spreadsheet/spreadsheet-table.tsx   | 1 +
 6 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/web/components/core/render-if-visible-HOC.tsx b/web/components/core/render-if-visible-HOC.tsx
index 530343b84..8a08f1d04 100644
--- a/web/components/core/render-if-visible-HOC.tsx
+++ b/web/components/core/render-if-visible-HOC.tsx
@@ -12,6 +12,7 @@ type Props = {
   alwaysRender?: boolean;
   placeholderChildren?: ReactNode;
   pauseHeightUpdateWhileRendering?: boolean;
+  changingReference?: any;
 };
 
 const RenderIfVisible: React.FC<Props> = (props) => {
@@ -26,6 +27,7 @@ const RenderIfVisible: React.FC<Props> = (props) => {
     alwaysRender = false,
     placeholderChildren = null,
     pauseHeightUpdateWhileRendering = false,
+    changingReference,
   } = props;
   const [shouldVisible, setShouldVisible] = useState<boolean>(alwaysRender);
   const placeholderHeight = useRef<string>(defaultHeight);
@@ -51,6 +53,7 @@ const RenderIfVisible: React.FC<Props> = (props) => {
           rootMargin: `${verticalOffset}% ${horizonatlOffset}% ${verticalOffset}% ${horizonatlOffset}%`,
         }
       );
+      observer.unobserve(intersectionRef.current);
       observer.observe(intersectionRef.current);
       return () => {
         if (intersectionRef.current) {
@@ -58,7 +61,7 @@ const RenderIfVisible: React.FC<Props> = (props) => {
         }
       };
     }
-  }, [root?.current, intersectionRef, children]);
+  }, [root?.current, intersectionRef, children, changingReference]);
 
   //Set height after render
   useEffect(() => {
diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx
index f0bb61c58..24cbe9908 100644
--- a/web/components/issues/issue-layouts/kanban/block.tsx
+++ b/web/components/issues/issue-layouts/kanban/block.tsx
@@ -28,6 +28,7 @@ interface IssueBlockProps {
   canEditProperties: (projectId: string | undefined) => boolean;
   scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
   isDragStarted?: boolean;
+  issueIds: string[]; //DO NOT REMOVE< needed to force render for virtualization
 }
 
 interface IssueDetailsBlockProps {
@@ -112,6 +113,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
     canEditProperties,
     scrollableContainerRef,
     isDragStarted,
+    issueIds,
   } = props;
 
   const issue = issuesMap[issueId];
@@ -149,6 +151,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
               horizonatlOffset={50}
               alwaysRender={snapshot.isDragging}
               pauseHeightUpdateWhileRendering={isDragStarted}
+              changingReference={issueIds}
             >
               <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 cdc782e20..3746111e5 100644
--- a/web/components/issues/issue-layouts/kanban/blocks-list.tsx
+++ b/web/components/issues/issue-layouts/kanban/blocks-list.tsx
@@ -62,6 +62,7 @@ const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
                 canEditProperties={canEditProperties}
                 scrollableContainerRef={scrollableContainerRef}
                 isDragStarted={isDragStarted}
+                issueIds={issueIds} //passing to force render for virtualization whenever parent rerenders
               />
             );
           })}
diff --git a/web/components/issues/issue-layouts/list/blocks-list.tsx b/web/components/issues/issue-layouts/list/blocks-list.tsx
index 7a99414ab..d3c8d1406 100644
--- a/web/components/issues/issue-layouts/list/blocks-list.tsx
+++ b/web/components/issues/issue-layouts/list/blocks-list.tsx
@@ -30,6 +30,7 @@ export const IssueBlocksList: FC<Props> = (props) => {
               defaultHeight="3rem"
               root={containerRef}
               classNames={"relative border border-transparent border-b-custom-border-200 last:border-b-transparent"}
+              changingReference={issueIds}
             >
               <IssueBlock
                 issueId={issueId}
diff --git a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
index 05771f078..840ea39f9 100644
--- a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
@@ -35,6 +35,7 @@ interface Props {
   issueId: string;
   isScrolled: MutableRefObject<boolean>;
   containerRef: MutableRefObject<HTMLTableElement | null>;
+  issueIds: string[];
 }
 
 export const SpreadsheetIssueRow = observer((props: Props) => {
@@ -49,6 +50,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
     canEditProperties,
     isScrolled,
     containerRef,
+    issueIds,
   } = props;
 
   const [isExpanded, setExpanded] = useState<boolean>(false);
@@ -64,6 +66,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
         defaultHeight="calc(2.75rem - 1px)"
         root={containerRef}
         placeholderChildren={<td colSpan={100} className="border-b-[0.5px]" />}
+        changingReference={issueIds}
       >
         <IssueRowDetails
           issueId={issueId}
@@ -96,6 +99,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
             portalElement={portalElement}
             isScrolled={isScrolled}
             containerRef={containerRef}
+            issueIds={issueIds}
           />
         ))}
     </>
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
index 98a4d3f3d..5d45157cc 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
@@ -99,6 +99,7 @@ export const SpreadsheetTable = observer((props: Props) => {
             portalElement={portalElement}
             containerRef={containerRef}
             isScrolled={isScrolled}
+            issueIds={issueIds}
           />
         ))}
       </tbody>