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

chore: loading state for all layouts (#2588)

Browse Source 
* chore: add loading states to layouts

* chore: don't show count for 0 inbox issues
This commit is contained in:
Aaryan Khandelwal 2023-11-01 20:24:57 +05:30 committed by GitHub
parent 1a46c6c399
commit 36152ea2fa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 52 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/components/gantt-chart/chart/index.tsx
View File

@ -165,6 +165,8 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
const handleScrollToCurrentSelectedDate = (currentState: ChartDataType, date: Date) => {
const scrollContainer = document.getElementById("scroll-container") as HTMLElement;
if (!scrollContainer) return;
const clientVisibleWidth: number = scrollContainer?.clientWidth;
let scrollWidth: number = 0;
let daysDifference: number = 0;
@ -193,6 +195,8 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
const onScroll = () => {
const scrollContainer = document.getElementById("scroll-container") as HTMLElement;
if (!scrollContainer) return;
const scrollWidth: number = scrollContainer?.scrollWidth;
const clientVisibleWidth: number = scrollContainer?.clientWidth;
const currentScrollPosition: number = scrollContainer?.scrollLeft;

8
web/components/headers/project-issues.tsx
View File

@ -174,9 +174,11 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
<a>
<Button variant="neutral-primary" size="sm" className="relative">
Inbox
<span className="absolute -top-1.5 -right-1.5 h-4 w-4 rounded-full text-custom-text-100 bg-custom-sidebar-background-80 border border-custom-sidebar-border-200">
{inboxDetails.pending_issue_count}
</span>
{inboxDetails.pending_issue_count > 0 && (
<span className="absolute -top-1.5 -right-1.5 h-4 w-4 rounded-full text-custom-text-100 bg-custom-sidebar-background-80 border border-custom-sidebar-border-200">
{inboxDetails.pending_issue_count}
</span>
)}
</Button>
</a>
</Link>

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

@ -15,6 +15,8 @@ import {
CycleSpreadsheetLayout,
} from "components/issues";
import { TransferIssues, TransferIssuesModal } from "components/cycles";
// ui
import { Spinner } from "@plane/ui";
// helpers
import { getDateRangeStatus } from "helpers/date-time.helper";
@ -57,6 +59,13 @@ export const CycleLayoutRoot: React.FC<Props> = observer(({ openIssuesListModal
const issueCount = cycleIssueStore.getIssuesCount;
if (!cycleIssueStore.getIssues)
return (
<div className="h-full w-full grid place-items-center">
<Spinner />
</div>
);
return (
<>
<TransferIssuesModal handleClose={() => setTransferIssuesModal(false)} isOpen={transferIssuesModal} />

9
web/components/issues/issue-layouts/roots/global-view-layout-root.tsx
View File

@ -6,6 +6,8 @@ import useSWR from "swr";
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { GlobalViewEmptyState, GlobalViewsAppliedFiltersRoot, SpreadsheetView } from "components/issues";
// ui
import { Spinner } from "@plane/ui";
// types
import { IIssue, IIssueDisplayFilterOptions, TStaticViewTypes } from "types";
@ -82,6 +84,13 @@ export const GlobalViewLayoutRoot: React.FC<Props> = observer((props) => {
? globalViewIssuesStore.viewIssues?.[globalViewId.toString()]
: undefined;
if (!issues)
return (
<div className="h-full w-full grid place-items-center">
<Spinner />
</div>
);
return (
<div className="relative w-full h-full flex flex-col overflow-hidden">
<GlobalViewsAppliedFiltersRoot />

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

@ -15,6 +15,8 @@ import {
ModuleListLayout,
ModuleSpreadsheetLayout,
} from "components/issues";
// ui
import { Spinner } from "@plane/ui";
type Props = {
openIssuesListModal: () => void;
@ -53,6 +55,13 @@ export const ModuleLayoutRoot: React.FC<Props> = observer(({ openIssuesListModal
const issueCount = moduleIssueStore.getIssuesCount;
if (!moduleIssueStore.getIssues)
return (
<div className="h-full w-full grid place-items-center">
<Spinner />
</div>
);
return (
<div className="relative w-full h-full flex flex-col overflow-hidden">
<ModuleAppliedFiltersRoot />

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

@ -14,6 +14,7 @@ import {
ProjectSpreadsheetLayout,
ProjectEmptyState,
} from "components/issues";
import { Spinner } from "@plane/ui";
export const ProjectLayoutRoot: React.FC = observer(() => {
const router = useRouter();
@ -33,6 +34,13 @@ export const ProjectLayoutRoot: React.FC = observer(() => {
const issueCount = issueStore.getIssuesCount;
if (!issueStore.getIssues)
return (
<div className="h-full w-full grid place-items-center">
<Spinner />
</div>
);
return (
<div className="relative w-full h-full flex flex-col overflow-hidden">
<ProjectAppliedFiltersRoot />

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

@ -15,6 +15,7 @@ import {
ProjectViewGanttLayout,
ProjectViewSpreadsheetLayout,
} from "components/issues";
import { Spinner } from "@plane/ui";
export const ProjectViewLayoutRoot: React.FC = observer(() => {
const router = useRouter();
@ -51,6 +52,13 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
const issueCount = projectViewIssuesStore.getIssuesCount;
if (!projectViewIssuesStore.getIssues)
return (
<div className="h-full w-full grid place-items-center">
<Spinner />
</div>
);
return (
<div className="relative h-full w-full flex flex-col overflow-hidden">
<ProjectViewAppliedFiltersRoot />