[WEB-1936] fix: flicker issue in issues list layout (#5412)

* fix: flicker issue in issues list layout

* fix: formatting

* fix: optimization

* fix: added optional chaining for safety

web/core/components/core/render-if-visible-HOC.tsx

@@ -10,6 +10,7 @@ type Props = {
   as?: keyof JSX.IntrinsicElements;
   classNames?: string;
   placeholderChildren?: ReactNode;
+  defaultValue?: boolean;
 };
 
 const RenderIfVisible: React.FC<Props> = (props) => {
@@ -20,10 +21,11 @@ const RenderIfVisible: React.FC<Props> = (props) => {
     horizontalOffset = 0,
     as = "div",
     children,
+    defaultValue = false,
     classNames = "",
     placeholderChildren = null, //placeholder children
   } = props;
-  const [shouldVisible, setShouldVisible] = useState<boolean>();
+  const [shouldVisible, setShouldVisible] = useState<boolean>(defaultValue);
   const placeholderHeight = useRef<string>(defaultHeight);
   const intersectionRef = useRef<HTMLElement | null>(null);
 

web/core/components/issues/issue-layouts/list/block-root.tsx

@@ -16,7 +16,7 @@ import { useIssueDetail } from "@/hooks/store";
 import { TSelectionHelper } from "@/hooks/use-multiple-select";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 // types
-import { HIGHLIGHT_CLASS, getIssueBlockId } from "../utils";
+import { HIGHLIGHT_CLASS, getIssueBlockId, isIssueNew } from "../utils";
 import { TRenderQuickActions } from "./list-view-types";
 
 type Props = {
@@ -36,6 +36,7 @@ type Props = {
   canDropOverIssue: boolean;
   isParentIssueBeingDragged?: boolean;
   isLastChild?: boolean;
+  shouldRenderByDefault?: boolean;
 };
 
 export const IssueBlockRoot: FC<Props> = observer((props) => {
@@ -56,6 +57,7 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
     isParentIssueBeingDragged = false,
     isLastChild = false,
     selectionHelpers,
+    shouldRenderByDefault,
   } = props;
   // states
   const [isExpanded, setExpanded] = useState<boolean>(false);
@@ -114,7 +116,7 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
     issueBlockRef?.current?.classList?.remove(HIGHLIGHT_CLASS);
   });
 
-  if (!issueId) return null;
+  if (!issueId || !issuesMap[issueId]?.created_at) return null;
 
   const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
   return (
@@ -126,6 +128,7 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
         root={containerRef}
         classNames={`relative ${isLastChild && !isExpanded ? "" : "border-b border-b-custom-border-200"}`}
         verticalOffset={100}
+        defaultValue={shouldRenderByDefault || isIssueNew(issuesMap[issueId])}
       >
         <IssueBlock
           issueId={issueId}
@@ -165,6 +168,7 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
             isDragAllowed={isDragAllowed}
             canDropOverIssue={canDropOverIssue}
             isParentIssueBeingDragged={isParentIssueBeingDragged || isCurrentBlockDragging}
+            shouldRenderByDefault={isExpanded}
           />
         ))}
       {isLastChild && <DropIndicator classNames={"absolute z-[2]"} isVisible={instruction === "DRAG_BELOW"} />}

web/core/components/issues/issue-layouts/utils.tsx

@@ -606,4 +606,16 @@ export const isSubGrouped = (groupedIssueIds: TGroupedIssues) => {
   }
 
   return true;
-};
+};
+
+/**
+ * This Method returns if the issue is new or not
+ * @param issue
+ * @returns
+ */
+export const isIssueNew = (issue: TIssue) => {
+  const createdDate = new Date(issue.created_at);
+  const currentDate = new Date();
+  const diff = currentDate.getTime() - createdDate.getTime();
+  return diff < 30000;
+};