feat: loading states update (#3639)
* dev: implement layout skeleton loader and helper function * chore: implemented layout loader * chore: settings loader added * chore: cycle, module, view, pages, notification and projects loader added * chore: kanban loader improvement * chore: loader utils updated
This commit is contained in:
parent
83139989c2
commit
b1989bae1b
51 changed files with 951 additions and 507 deletions
|
|
@ -13,7 +13,8 @@ import { CyclesHeader } from "components/headers";
|
|||
import { CyclesView, ActiveCycleDetails, CycleCreateUpdateModal } from "components/cycles";
|
||||
import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
|
||||
// ui
|
||||
import { Spinner, Tooltip } from "@plane/ui";
|
||||
import { Tooltip } from "@plane/ui";
|
||||
import { CycleModuleBoardLayout, CycleModuleListLayout, GanttLayoutLoader } from "components/ui";
|
||||
// types
|
||||
import { TCycleView, TCycleLayout } from "@plane/types";
|
||||
import { NextPageWithLayout } from "lib/types";
|
||||
|
|
@ -66,9 +67,11 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
|
|||
|
||||
if (loader)
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full w-full">
|
||||
<Spinner />
|
||||
</div>
|
||||
<>
|
||||
{cycleLayout === "list" && <CycleModuleListLayout />}
|
||||
{cycleLayout === "board" && <CycleModuleBoardLayout />}
|
||||
{cycleLayout === "gantt" && <GanttLayoutLoader />}
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ import { AppLayout } from "layouts/app-layout";
|
|||
import { RecentPagesList, CreateUpdatePageModal } from "components/pages";
|
||||
import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
|
||||
import { PagesHeader } from "components/headers";
|
||||
import { Spinner } from "@plane/ui";
|
||||
import { PagesLoader } from "components/ui";
|
||||
// types
|
||||
import { NextPageWithLayout } from "lib/types";
|
||||
// constants
|
||||
|
|
@ -125,12 +125,7 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
|
|||
</Tab.List>
|
||||
);
|
||||
|
||||
if (loader || archivedPageLoader)
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full w-full">
|
||||
<Spinner />
|
||||
</div>
|
||||
);
|
||||
if (loader || archivedPageLoader) return <PagesLoader />;
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import { IntegrationCard } from "components/project";
|
|||
import { ProjectSettingHeader } from "components/headers";
|
||||
import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
|
||||
// ui
|
||||
import { Loader } from "@plane/ui";
|
||||
import { IntegrationsSettingsLoader } from "components/ui";
|
||||
// types
|
||||
import { IProject } from "@plane/types";
|
||||
import { NextPageWithLayout } from "lib/types";
|
||||
|
|
@ -79,12 +79,7 @@ const ProjectIntegrationsPage: NextPageWithLayout = () => {
|
|||
</div>
|
||||
)
|
||||
) : (
|
||||
<Loader className="space-y-5">
|
||||
<Loader.Item height="40px" />
|
||||
<Loader.Item height="40px" />
|
||||
<Loader.Item height="40px" />
|
||||
<Loader.Item height="40px" />
|
||||
</Loader>
|
||||
<IntegrationsSettingsLoader />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue