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:
Anmol Singh Bhatia
GitHub
parent
83139989c2
commit
b1989bae1b
51 changed files with 951 additions and 507 deletions
38
web/components/ui/loader/cycle-module-board-loader.tsx
Normal file
38
web/components/ui/loader/cycle-module-board-loader.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
export const CycleModuleBoardLayout = () => (
|
||||
<div className="h-full w-full animate-pulse">
|
||||
<div className="flex h-full w-full justify-between">
|
||||
<div className="grid h-full w-full grid-cols-1 gap-6 overflow-y-auto p-8 lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4 auto-rows-max transition-all">
|
||||
{[...Array(5)].map(() => (
|
||||
<div className="flex h-44 w-full flex-col justify-between rounded border border-custom-border-100 bg-custom-background-100 p-4 text-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="h-6 w-24 bg-custom-background-80 rounded" />
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="h-6 w-20 bg-custom-background-80 rounded" />
|
||||
<span className="h-6 w-6 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-20 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded-full" />
|
||||
</div>
|
||||
<span className="h-1.5 bg-custom-background-80 rounded" />
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<span className="h-4 w-16 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="h-4 w-4 bg-custom-background-80 rounded" />
|
||||
<span className="h-4 w-4 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
28
web/components/ui/loader/cycle-module-list-loader.tsx
Normal file
28
web/components/ui/loader/cycle-module-list-loader.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
export const CycleModuleListLayout = () => (
|
||||
<div className="h-full overflow-y-auto animate-pulse">
|
||||
<div className="flex h-full w-full justify-between">
|
||||
<div className="flex h-full w-full flex-col overflow-y-auto">
|
||||
{[...Array(5)].map(() => (
|
||||
<div className="flex w-full items-center justify-between gap-5 border-b border-custom-border-100 flex-col sm:flex-row px-5 py-6">
|
||||
<div className="relative flex w-full items-center gap-3 justify-between overflow-hidden">
|
||||
<div className="relative w-full flex items-center gap-3 overflow-hidden">
|
||||
<div className="flex items-center gap-4 truncate">
|
||||
<span className="h-10 w-10 bg-custom-background-80 rounded-full" />
|
||||
<span className="h-5 w-20 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="h-6 w-20 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="flex w-full sm:w-auto relative overflow-hidden items-center gap-2.5 justify-between sm:justify-end sm:flex-shrink-0 ">
|
||||
<div className="flex-shrink-0 relative flex items-center gap-3">
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
9
web/components/ui/loader/index.ts
Normal file
9
web/components/ui/loader/index.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
export * from "./layouts";
|
||||
export * from "./settings";
|
||||
export * from "./pages-loader";
|
||||
export * from "./notification-loader";
|
||||
export * from "./cycle-module-board-loader";
|
||||
export * from "./cycle-module-list-loader";
|
||||
export * from "./view-list-loader";
|
||||
export * from "./projects-loader";
|
||||
export * from "./utils";
|
||||
48
web/components/ui/loader/layouts/calendar-layout-loader.tsx
Normal file
48
web/components/ui/loader/layouts/calendar-layout-loader.tsx
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
import { getRandomInt } from "../utils";
|
||||
|
||||
const CalendarDay = () => {
|
||||
const dataCount = getRandomInt(0, 1);
|
||||
const dataBlocks = Array.from({ length: dataCount }, (_, index) => (
|
||||
<span key={index} className="h-8 w-full bg-custom-background-80 rounded mb-2" />
|
||||
));
|
||||
|
||||
return (
|
||||
<div className="flex w-full flex-col min-h-[9rem]">
|
||||
<div className="flex items-center justify-end p-2 w-full">
|
||||
<span className="h-6 w-6 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2.5 p-2">{dataBlocks}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const CalendarLayoutLoader = () => (
|
||||
<div className="h-full w-full overflow-y-auto bg-custom-background-100 pt-4 animate-pulse">
|
||||
<div className="mb-4 flex items-center justify-between gap-2 px-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="h-7 w-10 bg-custom-background-80 rounded" />
|
||||
<span className="h-7 w-32 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="h-7 w-12 bg-custom-background-80 rounded" />
|
||||
<span className="h-7 w-20 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="relative grid divide-x-[0.5px] divide-custom-border-200 text-sm font-medium grid-cols-5">
|
||||
{[...Array(5)].map((_, index) => (
|
||||
<span key={index} className="h-11 w-full bg-custom-background-80" />
|
||||
))}
|
||||
</span>
|
||||
<div className="h-full w-full overflow-y-auto">
|
||||
<div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-custom-border-200 overflow-y-auto">
|
||||
{[...Array(6)].map((_, index) => (
|
||||
<div key={index} className="grid divide-x-[0.5px] divide-custom-border-200 grid-cols-5">
|
||||
{[...Array(5)].map((_, index) => (
|
||||
<CalendarDay key={index} />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
50
web/components/ui/loader/layouts/gantt-layout-loader.tsx
Normal file
50
web/components/ui/loader/layouts/gantt-layout-loader.tsx
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
import { getRandomLength } from "../utils";
|
||||
|
||||
export const GanttLayoutLoader = () => (
|
||||
<div className="flex flex-col h-full overflow-x-auto animate-pulse">
|
||||
<div className="min-h-10 w-full border-b border-custom-border-200 ">
|
||||
<span className="h-6 w-12 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="flex h-full">
|
||||
<div className="h-full w-[25.5rem] border-r border-custom-border-200">
|
||||
<div className="flex items-end h-[3.75rem] py-2 px-4 border-b border-custom-border-200">
|
||||
<div className="flex items-center pl-6 justify-between w-full">
|
||||
<span className="h-5 w-14 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-16 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 h-11 p-4 w-full">
|
||||
{[...Array(6)].map((_, index) => (
|
||||
<div key={index} className="flex items-center gap-3 h-11 pl-6 w-full">
|
||||
<span className="h-6 w-6 bg-custom-background-80 rounded" />
|
||||
<span className={`h-6 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded`} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-full w-full border-r border-custom-border-200">
|
||||
<div className="flex flex-col justify-between gap-2 h-[3.75rem] py-1.5 px-4 border-b border-custom-border-200">
|
||||
<div className="flex items-center justify-center">
|
||||
<span className="h-5 w-20 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="flex items-center gap-3 justify-between w-full">
|
||||
{[...Array(15)].map((_, index) => (
|
||||
<span key={index} className="h-5 w-10 bg-custom-background-80 rounded" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 h-11 p-4 w-full">
|
||||
{[...Array(6)].map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`flex items-center gap-3 h-11 w-full`}
|
||||
style={{ paddingLeft: getRandomLength(["115px", "208px", "260px"]) }}
|
||||
>
|
||||
<span className={`h-6 w-40 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded`} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
5
web/components/ui/loader/layouts/index.ts
Normal file
5
web/components/ui/loader/layouts/index.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export * from "./list-layout-loader";
|
||||
export * from "./kanban-layout-loader";
|
||||
export * from "./calendar-layout-loader";
|
||||
export * from "./spreadsheet-layout-loader";
|
||||
export * from "./gantt-layout-loader";
|
||||
18
web/components/ui/loader/layouts/kanban-layout-loader.tsx
Normal file
18
web/components/ui/loader/layouts/kanban-layout-loader.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
export const KanbanLayoutLoader = ({ cardsInEachColumn = [2, 3, 2, 4, 3] }: { cardsInEachColumn?: number[] }) => (
|
||||
<div className="flex gap-5 px-3.5 py-1.5 overflow-x-auto">
|
||||
{cardsInEachColumn.map((cardsInColumn, columnIndex) => (
|
||||
<div key={columnIndex} className="flex flex-col gap-3 animate-pulse">
|
||||
<div className="flex items-center justify-between h-9 w-80">
|
||||
<div className="flex item-center gap-1.5">
|
||||
<span className="h-6 w-6 bg-custom-background-80 rounded" />
|
||||
<span className="h-6 w-24 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<span className="h-6 w-6 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
{Array.from({ length: cardsInColumn }, (_, cardIndex) => (
|
||||
<span key={cardIndex} className="h-28 w-80 bg-custom-background-80 rounded" />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
45
web/components/ui/loader/layouts/list-layout-loader.tsx
Normal file
45
web/components/ui/loader/layouts/list-layout-loader.tsx
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
import { getRandomInt, getRandomLength } from "../utils";
|
||||
|
||||
const ListItemRow = () => (
|
||||
<div className="flex items-center justify-between h-11 p-3 border-b border-custom-border-200">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="h-5 w-10 bg-custom-background-80 rounded" />
|
||||
<span className={`h-5 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded`} />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{[...Array(6)].map((_, index) => (
|
||||
<>
|
||||
{getRandomInt(1, 2) % 2 === 0 ? (
|
||||
<span key={index} className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
) : (
|
||||
<span className="h-5 w-16 bg-custom-background-80 rounded" />
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const ListSection = ({ itemCount }: { itemCount: number }) => (
|
||||
<div className="flex flex-shrink-0 flex-col">
|
||||
<div className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 px-3 py-1">
|
||||
<div className="flex items-center gap-2 py-1.5 w-full">
|
||||
<span className="h-6 w-6 bg-custom-background-80 rounded" />
|
||||
<span className="h-6 w-24 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative h-full w-full">
|
||||
{[...Array(itemCount)].map((_, index) => (
|
||||
<ListItemRow key={index} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const ListLayoutLoader = () => (
|
||||
<div className="flex flex-shrink-0 flex-col animate-pulse">
|
||||
{[6, 5, 2].map((itemCount, index) => (
|
||||
<ListSection key={index} itemCount={itemCount} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import { getRandomLength } from "../utils";
|
||||
|
||||
export const SpreadsheetLayoutLoader = () => (
|
||||
<div className="horizontal-scroll-enable h-full w-full animate-pulse">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="h-11 min-w-[28rem] bg-custom-background-90 border-r border-custom-border-100" />
|
||||
{[...Array(10)].map((_, index) => (
|
||||
<th
|
||||
key={index}
|
||||
className="h-11 w-full min-w-[8rem] bg-custom-background-90 border-r border-custom-border-100"
|
||||
/>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[...Array(16)].map((_, rowIndex) => (
|
||||
<tr key={rowIndex} className="border-b border-custom-border-100">
|
||||
<td className="h-11 min-w-[28rem] border-r border-custom-border-100">
|
||||
<div className="flex items-center gap-3 px-3">
|
||||
<span className="h-5 w-10 bg-custom-background-80 rounded" />
|
||||
<span className={`h-5 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded`} />
|
||||
</div>
|
||||
</td>
|
||||
{[...Array(10)].map((_, colIndex) => (
|
||||
<td key={colIndex} className="h-11 w-full min-w-[8rem] border-r border-custom-border-100">
|
||||
<div className="flex items-center justify-center gap-3 px-3">
|
||||
<span className="h-5 w-20 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
16
web/components/ui/loader/notification-loader.tsx
Normal file
16
web/components/ui/loader/notification-loader.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
export const NotificationsLoader = () => (
|
||||
<div className="divide-y divide-custom-border-100 animate-pulse overflow-hidden">
|
||||
{[...Array(3)].map(() => (
|
||||
<div className="flex w-full items-center gap-4 p-3">
|
||||
<span className="min-h-12 min-w-12 bg-custom-background-80 rounded-full" />
|
||||
<div className="flex flex-col gap-2.5 w-full">
|
||||
<span className="h-5 w-36 bg-custom-background-80 rounded" />
|
||||
<div className="flex items-center justify-between gap-2 w-full">
|
||||
<span className="h-5 w-28 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-16 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
28
web/components/ui/loader/pages-loader.tsx
Normal file
28
web/components/ui/loader/pages-loader.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
export const PagesLoader = () => (
|
||||
<div className="flex h-full flex-col space-y-5 overflow-hidden p-6">
|
||||
<div className="flex justify-between gap-4">
|
||||
<h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{[...Array(5)].map(() => (
|
||||
<span className="h-8 w-20 bg-custom-background-80 rounded-full" />
|
||||
))}
|
||||
</div>
|
||||
<div className="divide-y divide-custom-border-200">
|
||||
{[...Array(5)].map(() => (
|
||||
<div className="h-12 w-full flex items-center justify-between px-3">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-20 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="h-5 w-16 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
34
web/components/ui/loader/projects-loader.tsx
Normal file
34
web/components/ui/loader/projects-loader.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
export const ProjectsLoader = () => (
|
||||
<div className="h-full w-full overflow-y-auto p-8 animate-pulse">
|
||||
<div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
|
||||
{[...Array(3)].map(() => (
|
||||
<div className="flex cursor-pointer flex-col rounded border border-custom-border-200 bg-custom-background-100">
|
||||
<div className="relative min-h-[118px] w-full rounded-t border-b border-custom-border-200 ">
|
||||
<div className="absolute inset-0 z-[1] bg-gradient-to-t from-black/20 to-transparent">
|
||||
<div className="absolute bottom-4 z-10 flex h-10 w-full items-center justify-between gap-3 px-4">
|
||||
<div className="flex flex-grow items-center gap-2.5 truncate">
|
||||
<span className="min-h-9 min-w-9 bg-custom-background-80 rounded" />
|
||||
<div className="flex w-full flex-col justify-between gap-0.5 truncate">
|
||||
<span className="h-4 w-28 bg-custom-background-80 rounded" />
|
||||
<span className="h-4 w-16 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex h-full flex-shrink-0 items-center gap-2">
|
||||
<span className="h-6 w-6 bg-custom-background-80 rounded" />
|
||||
<span className="h-6 w-6 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex h-[104px] w-full flex-col justify-between rounded-b p-4">
|
||||
<span className="h-4 w-36 bg-custom-background-80 rounded" />
|
||||
<div className="item-center flex justify-between">
|
||||
<span className="h-5 w-20 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
12
web/components/ui/loader/settings/activity.tsx
Normal file
12
web/components/ui/loader/settings/activity.tsx
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import { getRandomLength } from "../utils";
|
||||
|
||||
export const ActivitySettingsLoader = () => (
|
||||
<div className="flex flex-col gap-3 animate-pulse">
|
||||
{[...Array(10)].map(() => (
|
||||
<div className="relative flex items-center gap-2 h-12 border-b border-custom-border-200">
|
||||
<span className="h-6 w-6 bg-custom-background-80 rounded" />
|
||||
<span className={`h-6 w-${getRandomLength(["52", "72", "96"])} bg-custom-background-80 rounded`} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
19
web/components/ui/loader/settings/api-token.tsx
Normal file
19
web/components/ui/loader/settings/api-token.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
export const APITokenSettingsLoader = () => (
|
||||
<section className="w-full overflow-y-auto py-8 pr-9">
|
||||
<div className="mb-2 flex items-center justify-between border-b border-custom-border-200 py-3.5">
|
||||
<h3 className="text-xl font-medium">API tokens</h3>
|
||||
<span className="h-8 w-28 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="divide-y-[0.5px] divide-custom-border-200">
|
||||
{[...Array(2)].map(() => (
|
||||
<div className="flex flex-col gap-2 px-4 py-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="h-5 w-28 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-16 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<span className="h-5 w-36 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
27
web/components/ui/loader/settings/email.tsx
Normal file
27
web/components/ui/loader/settings/email.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
export const EmailSettingsLoader = () => (
|
||||
<div className="mx-auto mt-8 h-full w-full overflow-y-auto px-6 lg:px-20 pb- animate-pulse">
|
||||
<div className="flex flex-col gap-2 pt-6 mb-2 pb-6 border-b border-custom-border-100">
|
||||
<span className="h-7 w-40 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-96 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center py-3">
|
||||
<span className="h-7 w-32 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
{[...Array(4)].map(() => (
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-col gap-2 py-3">
|
||||
<span className="h-6 w-28 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-96 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex items-center py-12">
|
||||
<span className="h-8 w-32 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
18
web/components/ui/loader/settings/import-and-export.tsx
Normal file
18
web/components/ui/loader/settings/import-and-export.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
export const ImportExportSettingsLoader = () => (
|
||||
<div className="divide-y-[0.5px] divide-custom-border-200 animate-pulse">
|
||||
{[...Array(2)].map(() => (
|
||||
<div className="flex items-center justify-between gap-2 px-4 py-3">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="h-5 w-16 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-16 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="h-4 w-28 bg-custom-background-80 rounded" />
|
||||
<span className="h-4 w-28 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
7
web/components/ui/loader/settings/index.ts
Normal file
7
web/components/ui/loader/settings/index.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
export * from "./activity";
|
||||
export * from "./api-token";
|
||||
export * from "./email";
|
||||
export * from "./integration";
|
||||
export * from "./members";
|
||||
export * from "./web-hook";
|
||||
export * from "./import-and-export";
|
||||
16
web/components/ui/loader/settings/integration.tsx
Normal file
16
web/components/ui/loader/settings/integration.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
export const IntegrationsSettingsLoader = () => (
|
||||
<div className="divide-y-[0.5px] divide-custom-border-100 animate-pulse">
|
||||
{[...Array(2)].map(() => (
|
||||
<div className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<span className="h-10 w-10 bg-custom-background-80 rounded-full" />
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="h-5 w-20 bg-custom-background-80 rounded" />
|
||||
<span className="h-4 w-60 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="h-8 w-16 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
16
web/components/ui/loader/settings/members.tsx
Normal file
16
web/components/ui/loader/settings/members.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
export const MembersSettingsLoader = () => (
|
||||
<div className="divide-y-[0.5px] divide-custom-border-100 animate-pulse">
|
||||
{[...Array(4)].map(() => (
|
||||
<div className="group flex items-center justify-between px-3 py-4">
|
||||
<div className="flex items-center gap-x-4 gap-y-2">
|
||||
<span className="h-10 w-10 bg-custom-background-80 rounded-full" />
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="h-5 w-20 bg-custom-background-80 rounded" />
|
||||
<span className="h-4 w-36 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="h-6 w-16 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
20
web/components/ui/loader/settings/web-hook.tsx
Normal file
20
web/components/ui/loader/settings/web-hook.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
export const WebhookSettingsLoader = () => (
|
||||
<div className="h-full w-full overflow-hidden py-8 pr-9">
|
||||
<div className="flex h-full w-full flex-col">
|
||||
<div className="flex items-center justify-between gap-4 border-b border-custom-border-200 pb-3.5">
|
||||
<div className="text-xl font-medium">Webhooks</div>
|
||||
<span className="h-8 w-28 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="h-full w-full overflow-y-auto">
|
||||
<div className="border-b border-custom-border-200">
|
||||
<div>
|
||||
<span className="flex items-center justify-between gap-4 px-3.5 py-[18px]">
|
||||
<span className="h-5 w-36 bg-custom-background-80 rounded" />
|
||||
<span className="h-6 w-12 bg-custom-background-80 rounded" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
35
web/components/ui/loader/utils.tsx
Normal file
35
web/components/ui/loader/utils.tsx
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import {
|
||||
CalendarLayoutLoader,
|
||||
GanttLayoutLoader,
|
||||
KanbanLayoutLoader,
|
||||
ListLayoutLoader,
|
||||
SpreadsheetLayoutLoader,
|
||||
} from "./layouts";
|
||||
|
||||
export const getRandomInt = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
|
||||
export const getRandomLength = (lengthArray: string[]) => {
|
||||
const randomIndex = Math.floor(Math.random() * lengthArray.length);
|
||||
return `${lengthArray[randomIndex]}`;
|
||||
};
|
||||
|
||||
interface Props {
|
||||
layout: string;
|
||||
}
|
||||
export const ActiveLoader: React.FC<Props> = (props) => {
|
||||
const { layout } = props;
|
||||
switch (layout) {
|
||||
case "list":
|
||||
return <ListLayoutLoader />;
|
||||
case "kanban":
|
||||
return <KanbanLayoutLoader />;
|
||||
case "spreadsheet":
|
||||
return <SpreadsheetLayoutLoader />;
|
||||
case "calendar":
|
||||
return <CalendarLayoutLoader />;
|
||||
case "gantt_chart":
|
||||
return <GanttLayoutLoader />;
|
||||
default:
|
||||
return <KanbanLayoutLoader />;
|
||||
}
|
||||
};
|
||||
18
web/components/ui/loader/view-list-loader.tsx
Normal file
18
web/components/ui/loader/view-list-loader.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
export const ViewListLoader = () => (
|
||||
<div className="flex h-full w-full flex-col animate-pulse">
|
||||
{[...Array(8)].map(() => (
|
||||
<div className="group border-b border-custom-border-200">
|
||||
<div className="relative flex w-full items-center justify-between rounded p-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="min-h-10 min-w-10 bg-custom-background-80 rounded" />
|
||||
<span className="h-6 w-28 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
Loading…
Add table
Add a link
Reference in a new issue