From 954c7a2b94d29075aa55872a8b77e19e4898a1c6 Mon Sep 17 00:00:00 2001 From: gakshita Date: Thu, 22 Aug 2024 16:27:07 +0530 Subject: [PATCH 1/4] fix: flicker issue in issues list layout --- .../components/core/render-if-visible-HOC.tsx | 4 +- .../issues/issue-layouts/list/block-root.tsx | 4 ++ .../issues/issue-layouts/list/blocks-list.tsx | 49 +++++++++++-------- 3 files changed, 36 insertions(+), 21 deletions(-) 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..e811af23991 100644 --- a/web/core/components/issues/issue-layouts/list/block-root.tsx +++ b/web/core/components/issues/issue-layouts/list/block-root.tsx @@ -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); @@ -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} > = observer((props) => { isDragAllowed={isDragAllowed} canDropOverIssue={canDropOverIssue} isParentIssueBeingDragged={isParentIssueBeingDragged || isCurrentBlockDragging} + shouldRenderByDefault={isExpanded} /> ))} {isLastChild && } diff --git a/web/core/components/issues/issue-layouts/list/blocks-list.tsx b/web/core/components/issues/issue-layouts/list/blocks-list.tsx index 1816dc75858..ce67503175a 100644 --- a/web/core/components/issues/issue-layouts/list/blocks-list.tsx +++ b/web/core/components/issues/issue-layouts/list/blocks-list.tsx @@ -40,26 +40,35 @@ export const IssueBlocksList: FC = (props) => {
{issueIds && issueIds.length > 0 && - issueIds.map((issueId: string, index: number) => ( - - ))} + issueIds.map((issueId: string, index: number) => { + // Check if issue is created within 30 seconds + const shouldRenderByDefault = + new Date().getTime() - new Date(issuesMap[issueId].created_at).getTime() < 30000; + + return ( + issuesMap[issueId].created_at && ( + + ) + ); + })}
); }; From 03dc1711fe1c432261260a3418d6be38447679dd Mon Sep 17 00:00:00 2001 From: gakshita Date: Fri, 23 Aug 2024 12:24:47 +0530 Subject: [PATCH 2/4] fix: formatting --- .../issues/issue-layouts/list/blocks-list.tsx | 14 +++++--------- web/core/components/issues/issue-layouts/utils.tsx | 14 +++++++++++++- 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/web/core/components/issues/issue-layouts/list/blocks-list.tsx b/web/core/components/issues/issue-layouts/list/blocks-list.tsx index ce67503175a..c8ce86e6708 100644 --- a/web/core/components/issues/issue-layouts/list/blocks-list.tsx +++ b/web/core/components/issues/issue-layouts/list/blocks-list.tsx @@ -5,6 +5,7 @@ import { IssueBlockRoot } from "@/components/issues/issue-layouts/list"; // hooks import { TSelectionHelper } from "@/hooks/use-multiple-select"; // types +import { isIssueNew } from "../utils"; import { TRenderQuickActions } from "./list-view-types"; interface Props { @@ -40,12 +41,8 @@ export const IssueBlocksList: FC = (props) => {
{issueIds && issueIds.length > 0 && - issueIds.map((issueId: string, index: number) => { - // Check if issue is created within 30 seconds - const shouldRenderByDefault = - new Date().getTime() - new Date(issuesMap[issueId].created_at).getTime() < 30000; - - return ( + issueIds.map( + (issueId: string, index: number) => issuesMap[issueId].created_at && ( = (props) => { isLastChild={index === issueIds.length - 1} isDragAllowed={isDragAllowed} canDropOverIssue={canDropOverIssue} - shouldRenderByDefault={shouldRenderByDefault} + shouldRenderByDefault={isIssueNew(issuesMap[issueId])} /> ) - ); - })} + )}
); }; 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; +}; From 75f98085c2469b7ee98d2e8ab205e59cd16e8bdf Mon Sep 17 00:00:00 2001 From: gakshita Date: Mon, 26 Aug 2024 13:51:54 +0530 Subject: [PATCH 3/4] fix: optimization --- .../issues/issue-layouts/list/block-root.tsx | 6 +-- .../issues/issue-layouts/list/blocks-list.tsx | 45 +++++++++---------- 2 files changed, 23 insertions(+), 28 deletions(-) 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 e811af23991..a2edeff0f05 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 = { @@ -116,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 ( @@ -128,7 +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} + defaultValue={shouldRenderByDefault || isIssueNew(issuesMap[issueId])} > = (props) => {
{issueIds && issueIds.length > 0 && - issueIds.map( - (issueId: string, index: number) => - issuesMap[issueId].created_at && ( - - ) - )} + issueIds.map((issueId: string, index: number) => ( + + ))}
); }; From eeb1ea1d57564f2d48162090ec628f4f331a5cf9 Mon Sep 17 00:00:00 2001 From: gakshita Date: Mon, 26 Aug 2024 14:58:19 +0530 Subject: [PATCH 4/4] fix: added optional chaining for safety --- web/core/components/issues/issue-layouts/list/block-root.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 a2edeff0f05..71bcc6f15c9 100644 --- a/web/core/components/issues/issue-layouts/list/block-root.tsx +++ b/web/core/components/issues/issue-layouts/list/block-root.tsx @@ -116,7 +116,7 @@ export const IssueBlockRoot: FC = observer((props) => { issueBlockRef?.current?.classList?.remove(HIGHLIGHT_CLASS); }); - if (!issueId || !issuesMap[issueId].created_at) return null; + if (!issueId || !issuesMap[issueId]?.created_at) return null; const subIssues = subIssuesStore.subIssuesByIssueId(issueId); return (