Mirrors/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2026-07-14 06:25:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: workspace active cycle loader added (#315)

Browse Source
This commit is contained in:
Anmol Singh Bhatia
2024-05-28 17:10:32 +05:30
committed by GitHub
parent 4fb84f33e5
commit 73c640f85d
4 changed files with 46 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
web/components/active-cycles/list-page.tsx
View File

@@ -1,9 +1,8 @@
import { FC, useEffect } from "react";
import useSWR from "swr";
// ui
import { Spinner } from "@plane/ui";
// components
import { ActiveCycleInfoCard } from "@/components/active-cycles";
import { WorkspaceActiveCycleLoader } from "@/components/ui";
// constants
import { WORKSPACE_ACTIVE_CYCLES_LIST } from "@/constants/fetch-keys";
// services
@@ -22,7 +21,7 @@ export const ActiveCyclesListPage: FC<ActiveCyclesListPageProps> = (props) => {
const { workspaceSlug, cursor, perPage, updateTotalPages, updateResultsCount } = props;
// fetching active cycles in workspace
const { data: workspaceActiveCycles } = useSWR(
const { data: workspaceActiveCycles, isLoading } = useSWR(
workspaceSlug && cursor ? WORKSPACE_ACTIVE_CYCLES_LIST(workspaceSlug as string, cursor, `${perPage}`) : null,
workspaceSlug && cursor ? () => cycleService.workspaceActiveCycles(workspaceSlug.toString(), cursor, perPage) : null
);
@@ -34,12 +33,8 @@ export const ActiveCyclesListPage: FC<ActiveCyclesListPageProps> = (props) => {
}
}, [updateTotalPages, updateResultsCount, workspaceActiveCycles]);
if (!workspaceActiveCycles) {
return (
<div className="flex items-center justify-center h-full w-full">
<Spinner />
</div>
);
if (!workspaceActiveCycles || isLoading) {
return <WorkspaceActiveCycleLoader />;
}
return (

1
web/components/ui/loader/index.ts
View File

@@ -7,3 +7,4 @@ export * from "./cycle-module-list-loader";
export * from "./view-list-loader";
export * from "./projects-loader";
export * from "./utils";
export * from "./workspace-active-cycle";

40
web/components/ui/loader/workspace-active-cycle.tsx Normal file
View File

@@ -0,0 +1,40 @@
import React, { FC } from "react";
type Props = {
itemCount?: number;
};
const WorkspaceActiveCycleLoaderItem = () => (
<div className="px-5 pt-5 last:pb-5">
<div className="flex flex-col gap-4 p-4 rounded-xl border border-custom-border-200 bg-custom-background-100">
<div className="flex items-center gap-1.5">
<span className="size-7 bg-custom-background-80 rounded" />
<span className="h-7 w-20 bg-custom-background-80 rounded" />
</div>
<div className="flex items-center justify-between px-3 py-2 rounded border-[0.5px] border-custom-border-100 bg-custom-background-90">
<div className="flex items-center gap-2 cursor-default">
<span className="size-6 bg-custom-background-80 rounded" />
<span className="h-6 w-14 bg-custom-background-80 rounded" />
<span className="h-6 w-16 bg-custom-background-80 rounded" />
</div>
<div className="flex items-center gap-4">
<span className="h-6 w-16 bg-custom-background-80 rounded" />
<span className="h-6 w-20 bg-custom-background-80 rounded" />
</div>
</div>
<div className="grid grid-cols-1 gap-3 lg:grid-cols-2 xl:grid-cols-3">
<span className="flex flex-col min-h-[17rem] border border-custom-border-200 rounded-lg bg-custom-background-80" />
<span className="flex flex-col min-h-[17rem] border border-custom-border-200 rounded-lg bg-custom-background-80" />
<span className="flex flex-col min-h-[17rem] border border-custom-border-200 rounded-lg bg-custom-background-80" />
</div>
</div>
</div>
);
export const WorkspaceActiveCycleLoader: FC<Props> = ({ itemCount = 2 }) => (
<div className="h-full w-full overflow-y-scroll bg-custom-background-90 vertical-scrollbar scrollbar-md animate-pulse">
{[...Array(itemCount)].map((_, index) => (
<WorkspaceActiveCycleLoaderItem key={index} />
))}
</div>
);

2
web/components/workspace/workspace-active-cycles-list.tsx
View File

@@ -12,7 +12,7 @@ export const WorkspaceActiveCyclesList = observer(() => {
// state
const [pageCount, setPageCount] = useState(1);
const [totalPages, setTotalPages] = useState(0);
const [resultsCount, setResultsCount] = useState(0); // workspaceActiveCycles.results.length
const [resultsCount, setResultsCount] = useState<number | null>(null); // workspaceActiveCycles.results.length
// router
const router = useRouter();
const { workspaceSlug } = router.query;