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

Fix/empty state flicker (#3475)

Browse Source 
* fix: flicker issue between loader and empty states.

* chore: fix `All Issues` tab highlight when we switch between tabs inside all issues.
This commit is contained in:
Prateek Shourya 2024-01-25 18:08:21 +05:30 committed by GitHub
parent 6c6b764421
commit f8208b1b5e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 25 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/components/issues/issue-layouts/roots/cycle-layout-root.tsx
View File

@ -61,13 +61,13 @@ export const CycleLayoutRoot: React.FC = observer(() => {
{cycleStatus === "completed" && <TransferIssues handleClick={() => setTransferIssuesModal(true)} />} {cycleStatus === "completed" && <TransferIssues handleClick={() => setTransferIssuesModal(true)} />}
<CycleAppliedFiltersRoot /> <CycleAppliedFiltersRoot />
{issues?.loader === "init-loader" ? ( {issues?.loader === "init-loader" || !issues?.groupedIssueIds ? (
<div className="flex h-full w-full items-center justify-center"> <div className="flex h-full w-full items-center justify-center">
<Spinner /> <Spinner />
</div> </div>
) : ( ) : (
<> <>
{!issues?.groupedIssueIds ? ( {issues?.groupedIssueIds?.length === 0 ? (
<CycleEmptyState <CycleEmptyState
workspaceSlug={workspaceSlug.toString()} workspaceSlug={workspaceSlug.toString()}
projectId={projectId.toString()} projectId={projectId.toString()}

4
web/components/issues/issue-layouts/roots/module-layout-root.tsx
View File

@ -51,13 +51,13 @@ export const ModuleLayoutRoot: React.FC = observer(() => {
<div className="relative flex h-full w-full flex-col overflow-hidden"> <div className="relative flex h-full w-full flex-col overflow-hidden">
<ModuleAppliedFiltersRoot /> <ModuleAppliedFiltersRoot />
{issues?.loader === "init-loader" ? ( {issues?.loader === "init-loader" || !issues?.groupedIssueIds ? (
<div className="flex h-full w-full items-center justify-center"> <div className="flex h-full w-full items-center justify-center">
<Spinner /> <Spinner />
</div> </div>
) : ( ) : (
<> <>
{!issues?.groupedIssueIds ? ( {issues?.groupedIssueIds?.length === 0 ? (
<ModuleEmptyState <ModuleEmptyState
workspaceSlug={workspaceSlug.toString()} workspaceSlug={workspaceSlug.toString()}
projectId={projectId.toString()} projectId={projectId.toString()}

4
web/components/issues/issue-layouts/roots/project-layout-root.tsx
View File

@ -45,13 +45,13 @@ export const ProjectLayoutRoot: FC = observer(() => {
<div className="relative flex h-full w-full flex-col overflow-hidden"> <div className="relative flex h-full w-full flex-col overflow-hidden">
<ProjectAppliedFiltersRoot /> <ProjectAppliedFiltersRoot />
{issues?.loader === "init-loader" ? ( {issues?.loader === "init-loader" || !issues?.groupedIssueIds ? (
<div className="flex h-full w-full items-center justify-center"> <div className="flex h-full w-full items-center justify-center">
<Spinner /> <Spinner />
</div> </div>
) : ( ) : (
<> <>
{!issues?.groupedIssueIds ? ( {issues?.groupedIssueIds?.length === 0 ? (
<div className="relative h-full w-full overflow-y-auto"> <div className="relative h-full w-full overflow-y-auto">
<ProjectEmptyState /> <ProjectEmptyState />
</div> </div>

4
web/components/issues/issue-layouts/roots/project-view-layout-root.tsx
View File

@ -67,13 +67,13 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
<div className="relative flex h-full w-full flex-col overflow-hidden"> <div className="relative flex h-full w-full flex-col overflow-hidden">
<ProjectViewAppliedFiltersRoot /> <ProjectViewAppliedFiltersRoot />
{issues?.loader === "init-loader" ? ( {issues?.loader === "init-loader" || !issues?.groupedIssueIds ? (
<div className="flex h-full w-full items-center justify-center"> <div className="flex h-full w-full items-center justify-center">
<Spinner /> <Spinner />
</div> </div>
) : ( ) : (
<> <>
{!issues?.groupedIssueIds ? ( {issues?.groupedIssueIds?.length === 0 ? (
<ProjectViewEmptyState /> <ProjectViewEmptyState />
) : ( ) : (
<> <>

2
web/constants/dashboard.ts
View File

@ -243,7 +243,7 @@ export const SIDEBAR_MENU_ITEMS: {
label: "All Issues", label: "All Issues",
href: `/workspace-views/all-issues`, href: `/workspace-views/all-issues`,
access: EUserWorkspaceRoles.GUEST, access: EUserWorkspaceRoles.GUEST,
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/workspace-views/all-issues`, highlight: (pathname: string, baseUrl: string) => pathname.includes(`${baseUrl}/workspace-views`),
Icon: CheckCircle, Icon: CheckCircle,
}, },
{ {

7
web/store/issue/cycle/issue.store.ts
View File

@ -117,12 +117,13 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues {
const orderBy = displayFilters?.order_by; const orderBy = displayFilters?.order_by;
const layout = displayFilters?.layout; const layout = displayFilters?.layout;
const cycleIssueIds = this.issues[cycleId] ?? []; const cycleIssueIds = this.issues[cycleId];
if (!cycleIssueIds) return;
const _issues = this.rootIssueStore.issues.getIssuesByIds(cycleIssueIds); const _issues = this.rootIssueStore.issues.getIssuesByIds(cycleIssueIds);
if (!_issues) return undefined; if (!_issues) return [];
let issues: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues | undefined = undefined; let issues: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues = [];
if (layout === "list" && orderBy) { if (layout === "list" && orderBy) {
if (groupBy) issues = this.groupedIssues(groupBy, orderBy, _issues); if (groupBy) issues = this.groupedIssues(groupBy, orderBy, _issues);

7
web/store/issue/module/issue.store.ts
View File

@ -110,12 +110,13 @@ export class ModuleIssues extends IssueHelperStore implements IModuleIssues {
const orderBy = displayFilters?.order_by; const orderBy = displayFilters?.order_by;
const layout = displayFilters?.layout; const layout = displayFilters?.layout;
const moduleIssueIds = this.issues[moduleId] ?? []; const moduleIssueIds = this.issues[moduleId];
if (!moduleIssueIds) return;
const _issues = this.rootIssueStore.issues.getIssuesByIds(moduleIssueIds); const _issues = this.rootIssueStore.issues.getIssuesByIds(moduleIssueIds);
if (!_issues) return undefined; if (!_issues) return [];
let issues: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues | undefined = undefined; let issues: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues = [];
if (layout === "list" && orderBy) { if (layout === "list" && orderBy) {
if (groupBy) issues = this.groupedIssues(groupBy, orderBy, _issues); if (groupBy) issues = this.groupedIssues(groupBy, orderBy, _issues);

7
web/store/issue/project-views/issue.store.ts
View File

@ -95,12 +95,13 @@ export class ProjectViewIssues extends IssueHelperStore implements IProjectViewI
const orderBy = displayFilters?.order_by; const orderBy = displayFilters?.order_by;
const layout = displayFilters?.layout; const layout = displayFilters?.layout;
const viewIssueIds = this.issues[viewId] ?? []; const viewIssueIds = this.issues[viewId];
if (!viewIssueIds) return;
const _issues = this.rootStore.issues.getIssuesByIds(viewIssueIds); const _issues = this.rootStore.issues.getIssuesByIds(viewIssueIds);
if (!_issues) return undefined; if (!_issues) return [];
let issues: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues | undefined = undefined; let issues: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues = [];
if (layout === "list" && orderBy) { if (layout === "list" && orderBy) {
if (groupBy) issues = this.groupedIssues(groupBy, orderBy, _issues); if (groupBy) issues = this.groupedIssues(groupBy, orderBy, _issues);

7
web/store/issue/project/issue.store.ts
View File

@ -75,12 +75,13 @@ export class ProjectIssues extends IssueHelperStore implements IProjectIssues {
const orderBy = displayFilters?.order_by; const orderBy = displayFilters?.order_by;
const layout = displayFilters?.layout; const layout = displayFilters?.layout;
const projectIssueIds = this.issues[projectId] ?? []; const projectIssueIds = this.issues[projectId];
if (!projectIssueIds) return;
const _issues = this.rootStore.issues.getIssuesByIds(projectIssueIds); const _issues = this.rootStore.issues.getIssuesByIds(projectIssueIds);
if (!_issues) return undefined; if (!_issues) return [];
let issues: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues | undefined = undefined; let issues: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues = [];
if (layout === "list" && orderBy) { if (layout === "list" && orderBy) {
if (groupBy) issues = this.groupedIssues(groupBy, orderBy, _issues); if (groupBy) issues = this.groupedIssues(groupBy, orderBy, _issues);