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,
} = props;
// states
const [isLoading, setIsLoading] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const [issues, setIssues] = useState<ISearchIssueResponse[]>([]);
const [selectedIssues, setSelectedIssues] = useState<ISearchIssueResponse[]>([]);
@ -72,7 +73,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (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> = (props) => {
workspace_search: isWorkspaceLevel,
})
.then((res) => setIssues(res))
.finally(() => setIsSearching(false));
.finally(() => {
setIsSearching(false);
setIsLoading(false);
});
}, [debouncedSearchTerm, isOpen, isWorkspaceLevel, projectId, searchParams, workspaceSlug]);
return (
@ -194,20 +198,22 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
</h5>
)}
<IssueSearchModalEmptyState
debouncedSearchTerm={debouncedSearchTerm}
isSearching={isSearching}
issues={issues}
searchTerm={searchTerm}
/>
{isSearching ? (
{isSearching || isLoading ? (
<Loader className="space-y-3 p-3">
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
</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" : ""}`}>
{issues.map((issue) => {
@ -252,6 +258,8 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
})}
</ul>
)}
</>
)}
</Combobox.Options>
</Combobox>
<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,
issueId,
}) => {
const [isLoading, setIsLoading] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const [issues, setIssues] = useState<ISearchIssueResponse[]>([]);
const [isSearching, setIsSearching] = useState(false);
@ -56,6 +57,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
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<Props> = ({
workspace_search: isWorkspaceLevel,
})
.then((res) => setIssues(res))
.finally(() => setIsSearching(false));
.finally(() => {
setIsSearching(false);
setIsLoading(false);
});
}, [debouncedSearchTerm, isOpen, issueId, isWorkspaceLevel, projectId, workspaceSlug]);
return (
@ -153,20 +158,22 @@ export const ParentIssuesListModal: React.FC<Props> = ({
</h5>
)}
<IssueSearchModalEmptyState
debouncedSearchTerm={debouncedSearchTerm}
isSearching={isSearching}
issues={issues}
searchTerm={searchTerm}
/>
{isSearching ? (
{isSearching || isLoading ? (
<Loader className="space-y-3 p-3">
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
</Loader>
) : (
<>
{issues.length === 0 ? (
<IssueSearchModalEmptyState
debouncedSearchTerm={debouncedSearchTerm}
isSearching={isSearching}
issues={issues}
searchTerm={searchTerm}
/>
) : (
<ul className={`text-sm ${issues.length > 0 ? "p-2" : ""}`}>
{issues.map((issue) => (
@ -204,6 +211,8 @@ export const ParentIssuesListModal: React.FC<Props> = ({
))}
</ul>
)}
</>
)}
</Combobox.Options>
</Combobox>
</Dialog.Panel>