github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki 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)} />}
<CycleAppliedFiltersRoot />
{issues?.loader === "init-loader" ? (
{issues?.loader === "init-loader" || !issues?.groupedIssueIds ? (
<div className="flex h-full w-full items-center justify-center">
<Spinner />
</div>
) : (
<>
{!issues?.groupedIssueIds ? (
{issues?.groupedIssueIds?.length === 0 ? (
<CycleEmptyState
workspaceSlug={workspaceSlug.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">
<ModuleAppliedFiltersRoot />
{issues?.loader === "init-loader" ? (
{issues?.loader === "init-loader" || !issues?.groupedIssueIds ? (
<div className="flex h-full w-full items-center justify-center">
<Spinner />
</div>
) : (
<>
{!issues?.groupedIssueIds ? (
{issues?.groupedIssueIds?.length === 0 ? (
<ModuleEmptyState
workspaceSlug={workspaceSlug.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">
<ProjectAppliedFiltersRoot />
{issues?.loader === "init-loader" ? (
{issues?.loader === "init-loader" || !issues?.groupedIssueIds ? (
<div className="flex h-full w-full items-center justify-center">
<Spinner />
</div>
) : (
<>
{!issues?.groupedIssueIds ? (
{issues?.groupedIssueIds?.length === 0 ? (
<div className="relative h-full w-full overflow-y-auto">
<ProjectEmptyState />
</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">
<ProjectViewAppliedFiltersRoot />
{issues?.loader === "init-loader" ? (
{issues?.loader === "init-loader" || !issues?.groupedIssueIds ? (
<div className="flex h-full w-full items-center justify-center">
<Spinner />
</div>
) : (
<>
{!issues?.groupedIssueIds ? (
{issues?.groupedIssueIds?.length === 0 ? (
<ProjectViewEmptyState />
) : (
<>

2
web/constants/dashboard.ts
View File

@ -243,7 +243,7 @@ export const SIDEBAR_MENU_ITEMS: {
label: "All Issues",
href: `/workspace-views/all-issues`,
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,
},
{

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 layout = displayFilters?.layout;
const cycleIssueIds = this.issues[cycleId] ?? [];
const cycleIssueIds = this.issues[cycleId];
if (!cycleIssueIds) return;
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 (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 layout = displayFilters?.layout;
const moduleIssueIds = this.issues[moduleId] ?? [];
const moduleIssueIds = this.issues[moduleId];
if (!moduleIssueIds) return;
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 (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 layout = displayFilters?.layout;
const viewIssueIds = this.issues[viewId] ?? [];
const viewIssueIds = this.issues[viewId];
if (!viewIssueIds) return;
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 (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 layout = displayFilters?.layout;
const projectIssueIds = this.issues[projectId] ?? [];
const projectIssueIds = this.issues[projectId];
if (!projectIssueIds) return;
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 (groupBy) issues = this.groupedIssues(groupBy, orderBy, _issues);