From 15c7deb2db3622873d5f99f55519b4ce30594bbb Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Wed, 24 Apr 2024 20:48:44 +0530 Subject: [PATCH] fix: existing and parent issue modal empty state flicker (#4281) --- .../modals/existing-issues-list-modal.tsx | 110 ++++++++++-------- .../issues/parent-issues-list-modal.tsx | 97 ++++++++------- 2 files changed, 112 insertions(+), 95 deletions(-) diff --git a/web/components/core/modals/existing-issues-list-modal.tsx b/web/components/core/modals/existing-issues-list-modal.tsx index ec7dbcb07..757888554 100644 --- a/web/components/core/modals/existing-issues-list-modal.tsx +++ b/web/components/core/modals/existing-issues-list-modal.tsx @@ -36,6 +36,7 @@ export const ExistingIssuesListModal: React.FC = (props) => { workspaceLevelToggle = false, } = props; // states + const [isLoading, setIsLoading] = useState(false); const [searchTerm, setSearchTerm] = useState(""); const [issues, setIssues] = useState([]); const [selectedIssues, setSelectedIssues] = useState([]); @@ -72,7 +73,7 @@ export const ExistingIssuesListModal: React.FC = (props) => { useEffect(() => { if (!isOpen || !workspaceSlug || !projectId) return; - + setIsLoading(true); projectService .projectIssuesSearch(workspaceSlug as string, projectId as string, { search: debouncedSearchTerm, @@ -80,7 +81,10 @@ export const ExistingIssuesListModal: React.FC = (props) => { workspace_search: isWorkspaceLevel, }) .then((res) => setIssues(res)) - .finally(() => setIsSearching(false)); + .finally(() => { + setIsSearching(false); + setIsLoading(false); + }); }, [debouncedSearchTerm, isOpen, isWorkspaceLevel, projectId, searchParams, workspaceSlug]); return ( @@ -194,14 +198,7 @@ export const ExistingIssuesListModal: React.FC = (props) => { )} - - - {isSearching ? ( + {isSearching || isLoading ? ( @@ -209,48 +206,59 @@ export const ExistingIssuesListModal: React.FC = (props) => { ) : ( -
    0 ? "p-2" : ""}`}> - {issues.map((issue) => { - const selected = selectedIssues.some((i) => i.id === issue.id); + <> + {issues.length === 0 ? ( + + ) : ( +
      0 ? "p-2" : ""}`}> + {issues.map((issue) => { + const selected = selectedIssues.some((i) => i.id === issue.id); - return ( - - `group flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-3 py-2 text-custom-text-200 ${ - active ? "bg-custom-background-80 text-custom-text-100" : "" - } ${selected ? "text-custom-text-100" : ""}` - } - > -
      - - - - {issue.project__identifier}-{issue.sequence_id} - - {issue.name} -
      - e.stopPropagation()} - > - - -
      - ); - })} -
    + return ( + + `group flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-3 py-2 text-custom-text-200 ${ + active ? "bg-custom-background-80 text-custom-text-100" : "" + } ${selected ? "text-custom-text-100" : ""}` + } + > +
    + + + + {issue.project__identifier}-{issue.sequence_id} + + {issue.name} +
    + e.stopPropagation()} + > + + +
    + ); + })} +
+ )} + )} diff --git a/web/components/issues/parent-issues-list-modal.tsx b/web/components/issues/parent-issues-list-modal.tsx index 5961aaf09..b9489bdc4 100644 --- a/web/components/issues/parent-issues-list-modal.tsx +++ b/web/components/issues/parent-issues-list-modal.tsx @@ -36,6 +36,7 @@ export const ParentIssuesListModal: React.FC = ({ projectId, issueId, }) => { + const [isLoading, setIsLoading] = useState(false); const [searchTerm, setSearchTerm] = useState(""); const [issues, setIssues] = useState([]); const [isSearching, setIsSearching] = useState(false); @@ -56,6 +57,7 @@ export const ParentIssuesListModal: React.FC = ({ if (!isOpen || !workspaceSlug || !projectId) return; setIsSearching(true); + setIsLoading(true); projectService .projectIssuesSearch(workspaceSlug as string, projectId as string, { @@ -65,7 +67,10 @@ export const ParentIssuesListModal: React.FC = ({ workspace_search: isWorkspaceLevel, }) .then((res) => setIssues(res)) - .finally(() => setIsSearching(false)); + .finally(() => { + setIsSearching(false); + setIsLoading(false); + }); }, [debouncedSearchTerm, isOpen, issueId, isWorkspaceLevel, projectId, workspaceSlug]); return ( @@ -153,14 +158,7 @@ export const ParentIssuesListModal: React.FC = ({ )} - - - {isSearching ? ( + {isSearching || isLoading ? ( @@ -168,41 +166,52 @@ export const ParentIssuesListModal: React.FC = ({ ) : ( -
    0 ? "p-2" : ""}`}> - {issues.map((issue) => ( - - `group flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-3 py-2 text-custom-text-200 ${ - active ? "bg-custom-background-80 text-custom-text-100" : "" - } ${selected ? "text-custom-text-100" : ""}` - } - > -
    - - - {issue.project__identifier}-{issue.sequence_id} - {" "} - {issue.name} -
    - e.stopPropagation()} - > - - -
    - ))} -
+ <> + {issues.length === 0 ? ( + + ) : ( +
    0 ? "p-2" : ""}`}> + {issues.map((issue) => ( + + `group flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-3 py-2 text-custom-text-200 ${ + active ? "bg-custom-background-80 text-custom-text-100" : "" + } ${selected ? "text-custom-text-100" : ""}` + } + > +
    + + + {issue.project__identifier}-{issue.sequence_id} + {" "} + {issue.name} +
    + e.stopPropagation()} + > + + +
    + ))} +
+ )} + )}