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

@@ -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(() => {

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}

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
               />
             );
           })}

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}

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}
           />
         ))}
     </>

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>