thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

fix: existing and parent issue modal empty state flicker (#4281)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2024-04-24 20:48:44 +05:30 committed by GitHub
parent e60ef36bfe
commit 15c7deb2db
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 112 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
web/components/core/modals/existing-issues-list-modal.tsx
View File

@ -36,6 +36,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
workspaceLevelToggle = false, workspaceLevelToggle = false,
} = props; } = props;
// states // states
const [isLoading, setIsLoading] = useState(false);
const [searchTerm, setSearchTerm] = useState(""); const [searchTerm, setSearchTerm] = useState("");
const [issues, setIssues] = useState<ISearchIssueResponse[]>([]); const [issues, setIssues] = useState<ISearchIssueResponse[]>([]);
const [selectedIssues, setSelectedIssues] = useState<ISearchIssueResponse[]>([]); const [selectedIssues, setSelectedIssues] = useState<ISearchIssueResponse[]>([]);
@ -72,7 +73,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
useEffect(() => { useEffect(() => {
if (!isOpen || !workspaceSlug || !projectId) return; if (!isOpen || !workspaceSlug || !projectId) return;
setIsLoading(true);
projectService projectService
.projectIssuesSearch(workspaceSlug as string, projectId as string, { .projectIssuesSearch(workspaceSlug as string, projectId as string, {
search: debouncedSearchTerm, search: debouncedSearchTerm,
@ -80,7 +81,10 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
workspace_search: isWorkspaceLevel, workspace_search: isWorkspaceLevel,
}) })
.then((res) => setIssues(res)) .then((res) => setIssues(res))
.finally(() => setIsSearching(false)); .finally(() => {
setIsSearching(false);
setIsLoading(false);
});
}, [debouncedSearchTerm, isOpen, isWorkspaceLevel, projectId, searchParams, workspaceSlug]); }, [debouncedSearchTerm, isOpen, isWorkspaceLevel, projectId, searchParams, workspaceSlug]);
return ( return (
@ -194,20 +198,22 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
</h5> </h5>
)} )}
<IssueSearchModalEmptyState {isSearching || isLoading ? (
debouncedSearchTerm={debouncedSearchTerm}
isSearching={isSearching}
issues={issues}
searchTerm={searchTerm}
/>
{isSearching ? (
<Loader className="space-y-3 p-3"> <Loader className="space-y-3 p-3">
<Loader.Item height="40px" /> <Loader.Item height="40px" />
<Loader.Item height="40px" /> <Loader.Item height="40px" />
<Loader.Item height="40px" /> <Loader.Item height="40px" />
<Loader.Item height="40px" /> <Loader.Item height="40px" />
</Loader> </Loader>
) : (
<>
{issues.length === 0 ? (
<IssueSearchModalEmptyState
debouncedSearchTerm={debouncedSearchTerm}
isSearching={isSearching}
issues={issues}
searchTerm={searchTerm}
/>
) : ( ) : (
<ul className={`text-sm text-custom-text-100 ${issues.length > 0 ? "p-2" : ""}`}> <ul className={`text-sm text-custom-text-100 ${issues.length > 0 ? "p-2" : ""}`}>
{issues.map((issue) => { {issues.map((issue) => {
@ -252,6 +258,8 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
})} })}
</ul> </ul>
)} )}
</>
)}
</Combobox.Options> </Combobox.Options>
</Combobox> </Combobox>
<div className="flex items-center justify-end gap-2 p-3"> <div className="flex items-center justify-end gap-2 p-3">

27
web/components/issues/parent-issues-list-modal.tsx
View File

@ -36,6 +36,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
projectId, projectId,
issueId, issueId,
}) => { }) => {
const [isLoading, setIsLoading] = useState(false);
const [searchTerm, setSearchTerm] = useState(""); const [searchTerm, setSearchTerm] = useState("");
const [issues, setIssues] = useState<ISearchIssueResponse[]>([]); const [issues, setIssues] = useState<ISearchIssueResponse[]>([]);
const [isSearching, setIsSearching] = useState(false); const [isSearching, setIsSearching] = useState(false);
@ -56,6 +57,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
if (!isOpen || !workspaceSlug || !projectId) return; if (!isOpen || !workspaceSlug || !projectId) return;
setIsSearching(true); setIsSearching(true);
setIsLoading(true);
projectService projectService
.projectIssuesSearch(workspaceSlug as string, projectId as string, { .projectIssuesSearch(workspaceSlug as string, projectId as string, {
@ -65,7 +67,10 @@ export const ParentIssuesListModal: React.FC<Props> = ({
workspace_search: isWorkspaceLevel, workspace_search: isWorkspaceLevel,
}) })
.then((res) => setIssues(res)) .then((res) => setIssues(res))
.finally(() => setIsSearching(false)); .finally(() => {
setIsSearching(false);
setIsLoading(false);
});
}, [debouncedSearchTerm, isOpen, issueId, isWorkspaceLevel, projectId, workspaceSlug]); }, [debouncedSearchTerm, isOpen, issueId, isWorkspaceLevel, projectId, workspaceSlug]);
return ( return (
@ -153,20 +158,22 @@ export const ParentIssuesListModal: React.FC<Props> = ({
</h5> </h5>
)} )}
<IssueSearchModalEmptyState {isSearching || isLoading ? (
debouncedSearchTerm={debouncedSearchTerm}
isSearching={isSearching}
issues={issues}
searchTerm={searchTerm}
/>
{isSearching ? (
<Loader className="space-y-3 p-3"> <Loader className="space-y-3 p-3">
<Loader.Item height="40px" /> <Loader.Item height="40px" />
<Loader.Item height="40px" /> <Loader.Item height="40px" />
<Loader.Item height="40px" /> <Loader.Item height="40px" />
<Loader.Item height="40px" /> <Loader.Item height="40px" />
</Loader> </Loader>
) : (
<>
{issues.length === 0 ? (
<IssueSearchModalEmptyState
debouncedSearchTerm={debouncedSearchTerm}
isSearching={isSearching}
issues={issues}
searchTerm={searchTerm}
/>
) : ( ) : (
<ul className={`text-sm ${issues.length > 0 ? "p-2" : ""}`}> <ul className={`text-sm ${issues.length > 0 ? "p-2" : ""}`}>
{issues.map((issue) => ( {issues.map((issue) => (
@ -204,6 +211,8 @@ export const ParentIssuesListModal: React.FC<Props> = ({
))} ))}
</ul> </ul>
)} )}
</>
)}
</Combobox.Options> </Combobox.Options>
</Combobox> </Combobox>
</Dialog.Panel> </Dialog.Panel>