Refactor folder structure (#4759)
This commit is contained in:
Satish Gandham
GitHub
parent
a0e16692da
commit
346bc2afe2
1218 changed files with 187 additions and 177 deletions
41
web/core/components/ui/loader/cycle-module-board-loader.tsx
Normal file
41
web/core/components/ui/loader/cycle-module-board-loader.tsx
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
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((i) => (
|
||||
<div
|
||||
key={i}
|
||||
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>
|
||||
);
|
||||
31
web/core/components/ui/loader/cycle-module-list-loader.tsx
Normal file
31
web/core/components/ui/loader/cycle-module-list-loader.tsx
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
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((i) => (
|
||||
<div
|
||||
key={i}
|
||||
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/core/components/ui/loader/index.ts
Normal file
9
web/core/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";
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
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">
|
||||
<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>
|
||||
);
|
||||
|
|
@ -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>
|
||||
);
|
||||
6
web/core/components/ui/loader/layouts/index.ts
Normal file
6
web/core/components/ui/loader/layouts/index.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
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";
|
||||
export * from "./project-inbox";
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import { forwardRef } from "react";
|
||||
|
||||
export const KanbanIssueBlockLoader = forwardRef<HTMLSpanElement>((props, ref) => (
|
||||
<span ref={ref} className="block h-28 m-1.5 animate-pulse bg-custom-background-80 rounded" />
|
||||
));
|
||||
|
||||
KanbanIssueBlockLoader.displayName = "KanbanIssueBlockLoader";
|
||||
|
||||
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">
|
||||
<div className="flex items-center justify-between h-9 w-80">
|
||||
<div className="flex item-center">
|
||||
<span className="h-6 w-6 bg-custom-background-80 rounded animate-pulse" />
|
||||
<span className="h-6 w-24 bg-custom-background-80 rounded animate-pulse" />
|
||||
</div>
|
||||
<span className="h-6 w-6 bg-custom-background-80 rounded animate-pulse" />
|
||||
</div>
|
||||
{Array.from({ length: cardsInColumn }, (_, cardIndex) => (
|
||||
<KanbanIssueBlockLoader key={cardIndex} />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
48
web/core/components/ui/loader/layouts/list-layout-loader.tsx
Normal file
48
web/core/components/ui/loader/layouts/list-layout-loader.tsx
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
import { Fragment, forwardRef } from "react";
|
||||
import { getRandomInt, getRandomLength } from "../utils";
|
||||
|
||||
export const ListLoaderItemRow = forwardRef<HTMLDivElement>((props, ref) => (
|
||||
<div ref={ref} 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 animate-pulse" />
|
||||
<span className={`h-5 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded animate-pulse`} />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{[...Array(6)].map((_, index) => (
|
||||
<Fragment key={index}>
|
||||
{getRandomInt(1, 2) % 2 === 0 ? (
|
||||
<span key={index} className="h-5 w-5 bg-custom-background-80 rounded animate-pulse" />
|
||||
) : (
|
||||
<span className="h-5 w-16 bg-custom-background-80 rounded animate-pulse" />
|
||||
)}
|
||||
</Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
));
|
||||
|
||||
ListLoaderItemRow.displayName = "ListLoaderItemRow";
|
||||
|
||||
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 animate-pulse" />
|
||||
<span className="h-6 w-24 bg-custom-background-80 rounded animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative h-full w-full">
|
||||
{[...Array(itemCount)].map((_, index) => (
|
||||
<ListLoaderItemRow key={index} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const ListLayoutLoader = () => (
|
||||
<div className="flex flex-shrink-0 flex-col">
|
||||
{[6, 5, 2].map((itemCount, index) => (
|
||||
<ListSection key={index} itemCount={itemCount} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
"use client";
|
||||
|
||||
import React from "react";
|
||||
// ui
|
||||
import { Loader } from "@plane/ui";
|
||||
import { InboxSidebarLoader } from "./inbox-sidebar-loader";
|
||||
|
||||
export const InboxLayoutLoader = () => (
|
||||
<div className="relative w-full h-full flex overflow-hidden">
|
||||
<div className="flex-shrink-0 w-2/6 h-full border-r border-custom-border-300">
|
||||
<InboxSidebarLoader />
|
||||
</div>
|
||||
<div className="w-4/6">
|
||||
<Loader className="flex flex-col h-full gap-5 p-5">
|
||||
<div className="space-y-2">
|
||||
<Loader.Item height="30px" width="40%" />
|
||||
<Loader.Item height="15px" width="60%" />
|
||||
<Loader.Item height="15px" width="60%" />
|
||||
<Loader.Item height="15px" width="40%" />
|
||||
</div>
|
||||
<Loader.Item height="150px" />
|
||||
</Loader>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import React from "react";
|
||||
|
||||
export const InboxSidebarLoader = () => (
|
||||
<div className="flex flex-col">
|
||||
{[...Array(6)].map((i, index) => (
|
||||
<div key={index} className="flex flex-col gap-2.5 h-[105px] space-y-3 border-b border-custom-border-200 p-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="h-5 w-16 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-36 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="h-4 w-20 bg-custom-background-80 rounded" />
|
||||
<span className="h-2 w-2 bg-custom-background-80 rounded-full" />
|
||||
<span className="h-4 w-16 bg-custom-background-80 rounded" />
|
||||
<span className="h-4 w-16 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export * from "./inbox-layout-loader";
|
||||
export * from "./inbox-sidebar-loader";
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
import { getRandomLength } from "../utils";
|
||||
|
||||
export const SpreadsheetIssueRowLoader = (props: { columnCount: number }) => (
|
||||
<tr className="border-b border-custom-border-80 bg-custom-background-100">
|
||||
<td className="h-11 min-w-[28rem] z-[10] sticky left-0 flex items-center border-r-[0.5px] border-custom-border-200 bg-custom-background-100">
|
||||
<div className="flex items-center gap-3 px-3">
|
||||
<span className="h-5 w-10 bg-custom-background-80 rounded animate-pulse" />
|
||||
<span
|
||||
className={`h-5 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded animate-pulse`}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
{[...Array(props.columnCount)].map((_, colIndex) => (
|
||||
<td key={colIndex} className="h-11 w-full min-w-[8rem] border-r border-custom-border-80 ">
|
||||
<div className="flex items-center justify-center gap-3 px-3">
|
||||
<span className="h-5 w-20 bg-custom-background-80 rounded animate-pulse" />
|
||||
</div>
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
);
|
||||
|
||||
export const SpreadsheetLayoutLoader = () => (
|
||||
<div className="horizontal-scroll-enable h-full w-full ">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="h-11 min-w-[28rem] bg-custom-background-90 border-r border-custom-border-100 animate-pulse" />
|
||||
{[...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 animate-pulse"
|
||||
/>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[...Array(16)].map((_, rowIndex) => (
|
||||
<SpreadsheetIssueRowLoader key={rowIndex} columnCount={10} />
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
16
web/core/components/ui/loader/notification-loader.tsx
Normal file
16
web/core/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((i) => (
|
||||
<div key={i} 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/core/components/ui/loader/pages-loader.tsx
Normal file
28
web/core/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((i) => (
|
||||
<span key={i} className="h-8 w-20 bg-custom-background-80 rounded-full" />
|
||||
))}
|
||||
</div>
|
||||
<div className="divide-y divide-custom-border-200">
|
||||
{[...Array(5)].map((i) => (
|
||||
<div key={i} 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>
|
||||
);
|
||||
37
web/core/components/ui/loader/projects-loader.tsx
Normal file
37
web/core/components/ui/loader/projects-loader.tsx
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
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((i) => (
|
||||
<div
|
||||
key={i}
|
||||
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/core/components/ui/loader/settings/activity.tsx
Normal file
12
web/core/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((i) => (
|
||||
<div key={i} 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/core/components/ui/loader/settings/api-token.tsx
Normal file
19
web/core/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((i) => (
|
||||
<div key={i} 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/core/components/ui/loader/settings/email.tsx
Normal file
27
web/core/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((i) => (
|
||||
<div key={i} 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/core/components/ui/loader/settings/import-and-export.tsx
Normal file
18
web/core/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((i) => (
|
||||
<div key={i} 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/core/components/ui/loader/settings/index.ts
Normal file
7
web/core/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";
|
||||
19
web/core/components/ui/loader/settings/integration.tsx
Normal file
19
web/core/components/ui/loader/settings/integration.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
export const IntegrationsSettingsLoader = () => (
|
||||
<div className="divide-y-[0.5px] divide-custom-border-100 animate-pulse">
|
||||
{[...Array(2)].map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
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/core/components/ui/loader/settings/members.tsx
Normal file
16
web/core/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((i) => (
|
||||
<div key={i} 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/core/components/ui/loader/settings/web-hook.tsx
Normal file
20
web/core/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>
|
||||
);
|
||||
6
web/core/components/ui/loader/utils.tsx
Normal file
6
web/core/components/ui/loader/utils.tsx
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
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]}`;
|
||||
};
|
||||
18
web/core/components/ui/loader/view-list-loader.tsx
Normal file
18
web/core/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((i) => (
|
||||
<div key={i} 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