diff --git a/web/core/components/core/render-if-visible-HOC.tsx b/web/core/components/core/render-if-visible-HOC.tsx index a2259c6ca56..18c071d1462 100644 --- a/web/core/components/core/render-if-visible-HOC.tsx +++ b/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) => { @@ -20,10 +21,11 @@ const RenderIfVisible: React.FC = (props) => { horizontalOffset = 0, as = "div", children, + defaultValue = false, classNames = "", placeholderChildren = null, //placeholder children } = props; - const [shouldVisible, setShouldVisible] = useState(); + const [shouldVisible, setShouldVisible] = useState(defaultValue); const placeholderHeight = useRef(defaultHeight); const intersectionRef = useRef(null); diff --git a/web/core/components/issues/issue-layouts/list/block-root.tsx b/web/core/components/issues/issue-layouts/list/block-root.tsx index 2302e9e2c89..71bcc6f15c9 100644 --- a/web/core/components/issues/issue-layouts/list/block-root.tsx +++ b/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 = observer((props) => { @@ -56,6 +57,7 @@ export const IssueBlockRoot: FC = observer((props) => { isParentIssueBeingDragged = false, isLastChild = false, selectionHelpers, + shouldRenderByDefault, } = props; // states const [isExpanded, setExpanded] = useState(false); @@ -114,7 +116,7 @@ export const IssueBlockRoot: FC = 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 = observer((props) => { root={containerRef} classNames={`relative ${isLastChild && !isExpanded ? "" : "border-b border-b-custom-border-200"}`} verticalOffset={100} + defaultValue={shouldRenderByDefault || isIssueNew(issuesMap[issueId])} > = observer((props) => { isDragAllowed={isDragAllowed} canDropOverIssue={canDropOverIssue} isParentIssueBeingDragged={isParentIssueBeingDragged || isCurrentBlockDragging} + shouldRenderByDefault={isExpanded} /> ))} {isLastChild && } diff --git a/web/core/components/issues/issue-layouts/utils.tsx b/web/core/components/issues/issue-layouts/utils.tsx index 7840bb46217..ec333ef9230 100644 --- a/web/core/components/issues/issue-layouts/utils.tsx +++ b/web/core/components/issues/issue-layouts/utils.tsx @@ -606,4 +606,16 @@ export const isSubGrouped = (groupedIssueIds: TGroupedIssues) => { } return true; -}; \ No newline at end of file +}; + +/** + * 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; +};