feat: init

2025-11-11 01:56:44 +08:00
commit bba4bb40c8
4638 changed files with 447437 additions and 0 deletions
--- a/apps/web/core/components/ui/empty-space.tsx
+++ b/apps/web/core/components/ui/empty-space.tsx
@@ -0,0 +1,83 @@
+// next
+import React from "react";
+import Link from "next/link";
+// react
+// icons
+import { ChevronRight } from "lucide-react";
+
+type EmptySpaceProps = {
+  title: string;
+  description: string;
+  children: any;
+  Icon?: any;
+  link?: { text: string; href: string };
+};
+
+const EmptySpace: React.FC<EmptySpaceProps> = ({ title, description, children, Icon, link }) => (
+  <>
+    <div className="max-w-lg">
+      {Icon ? (
+        <div className="mb-4">
+          <Icon className="h-14 w-14 text-custom-text-200" />
+        </div>
+      ) : null}
+
+      <h2 className="text-lg font-medium text-custom-text-100">{title}</h2>
+      <div className="mt-1 text-sm text-custom-text-200">{description}</div>
+      <ul role="list" className="mt-6 divide-y divide-custom-border-200 border-b border-t border-custom-border-200">
+        {children}
+      </ul>
+      {link ? (
+        <div className="mt-6 flex">
+          <Link href={link.href}>
+            <span className="text-sm font-medium text-custom-primary hover:text-custom-primary">
+              {link.text}
+              <span aria-hidden="true"> &rarr;</span>
+            </span>
+          </Link>
+        </div>
+      ) : null}
+    </div>
+  </>
+);
+
+type EmptySpaceItemProps = {
+  title: string;
+  description?: React.ReactNode | string;
+  Icon: any;
+  action?: () => void;
+  href?: string;
+};
+
+const EmptySpaceItem: React.FC<EmptySpaceItemProps> = ({ title, description, Icon, action, href }) => {
+  let spaceItem = (
+    <div className={`group relative flex ${description ? "items-start" : "items-center"} space-x-3 py-4`}>
+      <div className="flex-shrink-0">
+        <span className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-custom-primary">
+          <Icon className="h-6 w-6 text-white" aria-hidden="true" />
+        </span>
+      </div>
+      <div className="min-w-0 flex-1 text-custom-text-200">
+        <div className="text-sm font-medium group-hover:text-custom-text-100">{title}</div>
+        {description ? <div className="text-sm">{description}</div> : null}
+      </div>
+      <div className="flex-shrink-0 self-center">
+        <ChevronRight className="h-5 w-5 text-custom-text-200 group-hover:text-custom-text-100" aria-hidden="true" />
+      </div>
+    </div>
+  );
+
+  if (href) {
+    spaceItem = <Link href={href}>{spaceItem}</Link>;
+  }
+
+  return (
+    <>
+      <li className="cursor-pointer" onClick={action} role="button">
+        {spaceItem}
+      </li>
+    </>
+  );
+};
+
+export { EmptySpace, EmptySpaceItem };
--- a/apps/web/core/components/ui/integration-and-import-export-banner.tsx
+++ b/apps/web/core/components/ui/integration-and-import-export-banner.tsx
@@ -0,0 +1,18 @@
+import { AlertCircle } from "lucide-react";
+
+type Props = {
+  bannerName: string;
+  description?: string;
+};
+
+export const IntegrationAndImportExportBanner: React.FC<Props> = ({ bannerName, description }) => (
+  <div className="flex items-start gap-3 border-b border-custom-border-100 py-3.5">
+    <h3 className="text-xl font-medium">{bannerName}</h3>
+    {description && (
+      <div className="flex items-center gap-3 rounded-[10px] border border-custom-primary/75 bg-custom-primary/5 p-4 text-sm text-custom-text-100">
+        <AlertCircle className="h-6 w-6 text-custom-text-100" />
+        <p className="leading-5">{description}</p>
+      </div>
+    )}
+  </div>
+);
--- a/apps/web/core/components/ui/labels-list.tsx
+++ b/apps/web/core/components/ui/labels-list.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import type { FC } from "react";
+// ui
+import { Tooltip } from "@plane/propel/tooltip";
+import type { IIssueLabel } from "@plane/types";
+// types
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// hooks
+
+type IssueLabelsListProps = {
+  labels?: (IIssueLabel | undefined)[];
+  length?: number;
+  showLength?: boolean;
+};
+
+export const IssueLabelsList: FC<IssueLabelsListProps> = (props) => {
+  const { labels } = props;
+  const { isMobile } = usePlatformOS();
+  return (
+    <>
+      {labels && (
+        <>
+          <Tooltip
+            position="top"
+            tooltipHeading="Labels"
+            tooltipContent={labels.map((l) => l?.name).join(", ")}
+            isMobile={isMobile}
+          >
+            <div className="h-full flex items-center gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1 text-xs text-custom-text-200">
+              <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
+              <span>{labels.length}</span>
+              <span> Labels</span>
+            </div>
+          </Tooltip>
+        </>
+      )}
+    </>
+  );
+};
--- a/apps/web/core/components/ui/loader/cycle-module-board-loader.tsx
+++ b/apps/web/core/components/ui/loader/cycle-module-board-loader.tsx
@@ -0,0 +1,43 @@
+import { range } from "lodash-es";
+
+export const CycleModuleBoardLayoutLoader = () => (
+  <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">
+        {range(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>
+);
--- a/apps/web/core/components/ui/loader/cycle-module-list-loader.tsx
+++ b/apps/web/core/components/ui/loader/cycle-module-list-loader.tsx
@@ -0,0 +1,33 @@
+import { range } from "lodash-es";
+
+export const CycleModuleListLayoutLoader = () => (
+  <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">
+        {range(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>
+);
--- a/apps/web/core/components/ui/loader/layouts/calendar-layout-loader.tsx
+++ b/apps/web/core/components/ui/loader/layouts/calendar-layout-loader.tsx
@@ -0,0 +1,39 @@
+import { range } from "lodash-es";
+import { getRandomInt } from "../utils";
+
+const CalendarDay = () => {
+  const dataCount = getRandomInt(0, 1);
+  const dataBlocks = range(dataCount).map((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 animate-pulse">
+    <span className="relative grid divide-x-[0.5px] divide-custom-border-200 text-sm font-medium grid-cols-5">
+      {range(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">
+        {range(6).map((index) => (
+          <div key={index} className="grid divide-x-[0.5px] divide-custom-border-200 grid-cols-5">
+            {range(5).map((index) => (
+              <CalendarDay key={index} />
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  </div>
+);
--- a/apps/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx
+++ b/apps/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx
@@ -0,0 +1,60 @@
+import { range } from "lodash-es";
+import { Row } from "@plane/ui";
+import { BLOCK_HEIGHT } from "@/components/gantt-chart/constants";
+import { getRandomLength } from "../utils";
+
+export const GanttLayoutListItemLoader = () => (
+  <div className="flex w-full items-center gap-4 px-6 " style={{ height: `${BLOCK_HEIGHT}px` }}>
+    <div className="px-3 h-6 w-8 bg-custom-background-80 rounded" />
+    <div className={`px-3 h-6 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded`} />
+  </div>
+);
+
+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">
+        <Row className="flex items-end h-header py-2 border-b border-custom-border-200">
+          <div className="flex items-center 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>
+        </Row>
+        <Row className="flex flex-col gap-3 h-11 py-4 w-full">
+          {range(6).map((index) => (
+            <div key={index} className="flex items-center gap-3  h-11 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>
+          ))}
+        </Row>
+      </div>
+      <div className="h-full w-full border-r border-custom-border-200">
+        <div className="flex flex-col justify-between gap-2 h-header py-1.5 px-4 border-b border-custom-border-200">
+          <div className="flex items-center justify-start">
+            <span className="h-5 w-20 bg-custom-background-80 rounded" />
+          </div>
+          <div className="flex items-center gap-3 justify-between w-full">
+            {range(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">
+          {range(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>
+);
--- a/apps/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
+++ b/apps/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
@@ -0,0 +1,52 @@
+import { forwardRef } from "react";
+import { range } from "lodash-es";
+// plane ui
+import { ContentWrapper } from "@plane/ui";
+// plane utils
+import { cn } from "@plane/utils";
+
+export const KanbanIssueBlockLoader = forwardRef<HTMLSpanElement, { cardHeight?: number; shouldAnimate?: boolean }>(
+  ({ cardHeight = 100, shouldAnimate = true }, ref) => (
+    <span
+      ref={ref}
+      className={cn(`block bg-custom-background-80 rounded`, { " animate-pulse": shouldAnimate })}
+      style={{ height: `${cardHeight}px` }}
+    />
+  )
+);
+
+export const KanbanColumnLoader = ({
+  cardsInColumn = 3,
+  ignoreHeader = false,
+  cardHeight = 100,
+  shouldAnimate = true,
+}: {
+  cardsInColumn?: number;
+  ignoreHeader?: boolean;
+  cardHeight?: number;
+  shouldAnimate?: boolean;
+}) => (
+  <div className="flex flex-col gap-3">
+    {!ignoreHeader && (
+      <div className="flex items-center justify-between h-9 w-80">
+        <div className="flex item-center gap-3">
+          <span className={cn("h-6 w-6 bg-custom-background-80 rounded", { " animate-pulse": shouldAnimate })} />
+          <span className={cn("h-6 w-24 bg-custom-background-80 rounded", { " animate-pulse": shouldAnimate })} />
+        </div>
+      </div>
+    )}
+    {range(cardsInColumn).map((cardIndex) => (
+      <KanbanIssueBlockLoader key={cardIndex} cardHeight={cardHeight} shouldAnimate={shouldAnimate} />
+    ))}
+  </div>
+);
+
+KanbanIssueBlockLoader.displayName = "KanbanIssueBlockLoader";
+
+export const KanbanLayoutLoader = ({ cardsInEachColumn = [2, 3, 2, 4, 3] }: { cardsInEachColumn?: number[] }) => (
+  <ContentWrapper className="flex-row gap-5 py-1.5 overflow-x-auto">
+    {cardsInEachColumn.map((cardsInColumn, columnIndex) => (
+      <KanbanColumnLoader key={columnIndex} cardsInColumn={cardsInColumn} />
+    ))}
+  </ContentWrapper>
+);
--- a/apps/web/core/components/ui/loader/layouts/list-layout-loader.tsx
+++ b/apps/web/core/components/ui/loader/layouts/list-layout-loader.tsx
@@ -0,0 +1,83 @@
+import { Fragment, forwardRef } from "react";
+import { range } from "lodash-es";
+// plane ui
+import { Row } from "@plane/ui";
+// plane utils
+import { cn } from "@plane/utils";
+import { getRandomInt, getRandomLength } from "../utils";
+
+export const ListLoaderItemRow = forwardRef<
+  HTMLDivElement,
+  { shouldAnimate?: boolean; renderForPlaceHolder?: boolean; defaultPropertyCount?: number }
+>(({ shouldAnimate = true, renderForPlaceHolder = false, defaultPropertyCount = 6 }, ref) => (
+  <Row
+    ref={ref}
+    className={cn("flex items-center justify-between h-11 py-3 ", {
+      "bg-custom-background-100": renderForPlaceHolder,
+      "border-b border-custom-border-200": !renderForPlaceHolder,
+    })}
+  >
+    <div className="flex items-center gap-3">
+      <span
+        className={cn("h-5 w-10 bg-custom-background-80 rounded", {
+          "animate-pulse": shouldAnimate,
+          "bg-custom-background-90": renderForPlaceHolder,
+        })}
+      />
+      <span
+        className={cn(`h-5 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded`, {
+          "animate-pulse": shouldAnimate,
+          "bg-custom-background-90": renderForPlaceHolder,
+        })}
+      />
+    </div>
+    <div className="flex items-center gap-2">
+      {range(defaultPropertyCount).map((index) => (
+        <Fragment key={index}>
+          {getRandomInt(1, 2) % 2 === 0 ? (
+            <span
+              key={index}
+              className={cn("h-5 w-5 bg-custom-background-80 rounded", {
+                "animate-pulse": shouldAnimate,
+                "bg-custom-background-90": renderForPlaceHolder,
+              })}
+            />
+          ) : (
+            <span
+              className={cn("h-5 w-16 bg-custom-background-80 rounded", {
+                "animate-pulse": shouldAnimate,
+                "bg-custom-background-90": renderForPlaceHolder,
+              })}
+            />
+          )}
+        </Fragment>
+      ))}
+    </div>
+  </Row>
+));
+
+ListLoaderItemRow.displayName = "ListLoaderItemRow";
+
+const ListSection = ({ itemCount }: { itemCount: number }) => (
+  <div className="flex flex-shrink-0 flex-col">
+    <Row className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 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>
+    </Row>
+    <div className="relative h-full w-full">
+      {range(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>
+);
--- a/apps/web/core/components/ui/loader/layouts/members-layout-loader.tsx
+++ b/apps/web/core/components/ui/loader/layouts/members-layout-loader.tsx
@@ -0,0 +1,15 @@
+import { range } from "lodash-es";
+export const MembersLayoutLoader = () => (
+  <div className="flex gap-5 py-1.5 overflow-x-auto">
+    {range(5).map((columnIndex) => (
+      <div key={columnIndex} className="flex flex-col gap-3">
+        <div className={`flex items-center justify-between h-9 ${columnIndex === 0 ? "w-80" : "w-36"}`}>
+          <span className="h-6 w-24 bg-custom-background-80 rounded animate-pulse" />
+        </div>
+        {range(2).map((cardIndex) => (
+          <span className="h-8 w-full bg-custom-background-80 rounded animate-pulse" key={cardIndex} />
+        ))}
+      </div>
+    ))}
+  </div>
+);
--- a/apps/web/core/components/ui/loader/layouts/project-inbox/inbox-layout-loader.tsx
+++ b/apps/web/core/components/ui/loader/layouts/project-inbox/inbox-layout-loader.tsx
@@ -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>
+);
--- a/apps/web/core/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx
+++ b/apps/web/core/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { range } from "lodash-es";
+
+export const InboxSidebarLoader = () => (
+  <div className="flex flex-col">
+    {range(6).map((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>
+);
--- a/apps/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx
+++ b/apps/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx
@@ -0,0 +1,46 @@
+import { range } from "lodash-es";
+import { Row } from "@plane/ui";
+import { getRandomLength } from "../utils";
+
+export const SpreadsheetIssueRowLoader = (props: { columnCount: number }) => (
+  <tr className="border-b border-custom-border-200 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">
+      <Row 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`}
+        />
+      </Row>
+    </td>
+    {range(props.columnCount).map((colIndex) => (
+      <td key={colIndex} className="h-11 w-full min-w-[8rem] border-r border-custom-border-200 ">
+        <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 overflow-y-auto ">
+    <table>
+      <thead>
+        <tr>
+          <th className="h-11 min-w-[28rem] bg-custom-background-90 border-r border-custom-border-200 animate-pulse" />
+          {range(10).map((index) => (
+            <th
+              key={index}
+              className="h-11 w-full min-w-[8rem] bg-custom-background-90 border-r border-custom-border-200 animate-pulse"
+            />
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {range(16).map((rowIndex) => (
+          <SpreadsheetIssueRowLoader key={rowIndex} columnCount={10} />
+        ))}
+      </tbody>
+    </table>
+  </div>
+);
--- a/apps/web/core/components/ui/loader/notification-loader.tsx
+++ b/apps/web/core/components/ui/loader/notification-loader.tsx
@@ -0,0 +1,18 @@
+import { range } from "lodash-es";
+
+export const NotificationsLoader = () => (
+  <div className="divide-y divide-custom-border-100 animate-pulse overflow-hidden">
+    {range(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>
+);
--- a/apps/web/core/components/ui/loader/pages-loader.tsx
+++ b/apps/web/core/components/ui/loader/pages-loader.tsx
@@ -0,0 +1,30 @@
+import { range } from "lodash-es";
+
+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">
+      {range(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">
+      {range(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>
+);
--- a/apps/web/core/components/ui/loader/projects-loader.tsx
+++ b/apps/web/core/components/ui/loader/projects-loader.tsx
@@ -0,0 +1,39 @@
+import { range } from "lodash-es";
+
+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">
+      {range(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>
+);
--- a/apps/web/core/components/ui/loader/settings/activity.tsx
+++ b/apps/web/core/components/ui/loader/settings/activity.tsx
@@ -0,0 +1,13 @@
+import { range } from "lodash-es";
+import { getRandomLength } from "../utils";
+
+export const ActivitySettingsLoader = () => (
+  <div className="flex flex-col gap-3 animate-pulse">
+    {range(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>
+);
--- a/apps/web/core/components/ui/loader/settings/api-token.tsx
+++ b/apps/web/core/components/ui/loader/settings/api-token.tsx
@@ -0,0 +1,24 @@
+import { range } from "lodash-es";
+import { useTranslation } from "@plane/i18n";
+export const APITokenSettingsLoader = () => {
+  const { t } = useTranslation();
+  return (
+    <section className="w-full overflow-y-auto">
+      <div className="mb-2 flex items-center justify-between border-b border-custom-border-200 pb-3.5">
+        <h3 className="text-xl font-medium">{t("workspace_settings.settings.api_tokens.title")}</h3>
+        <span className="h-8 w-28 bg-custom-background-80 rounded" />
+      </div>
+      <div className="divide-y-[0.5px] divide-custom-border-200">
+        {range(2).map((i) => (
+          <div key={i} className="flex flex-col gap-2 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>
+  );
+};
--- a/apps/web/core/components/ui/loader/settings/email.tsx
+++ b/apps/web/core/components/ui/loader/settings/email.tsx
@@ -0,0 +1,29 @@
+import { range } from "lodash-es";
+
+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>
+      {range(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>
+);
--- a/apps/web/core/components/ui/loader/settings/import-and-export.tsx
+++ b/apps/web/core/components/ui/loader/settings/import-and-export.tsx
@@ -0,0 +1,20 @@
+import { range } from "lodash-es";
+
+export const ImportExportSettingsLoader = () => (
+  <div className="divide-y-[0.5px] divide-custom-border-200 animate-pulse">
+    {range(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>
+);
--- a/apps/web/core/components/ui/loader/settings/integration.tsx
+++ b/apps/web/core/components/ui/loader/settings/integration.tsx
@@ -0,0 +1,21 @@
+import { range } from "lodash-es";
+
+export const IntegrationsSettingsLoader = () => (
+  <div className="divide-y-[0.5px] divide-custom-border-100 animate-pulse">
+    {range(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>
+);
--- a/apps/web/core/components/ui/loader/settings/members.tsx
+++ b/apps/web/core/components/ui/loader/settings/members.tsx
@@ -0,0 +1,17 @@
+import { range } from "lodash-es";
+
+export const MembersSettingsLoader = () => (
+  <div className="divide-y-[0.5px] divide-custom-border-100">
+    {range(3).map((i) => (
+      <div key={i} className="group grid grid-cols-5 items-center justify-evenly px-3 py-4">
+        <div className="flex col-span-2 items-center gap-x-2.5">
+          <span className="size-6 bg-custom-background-80 rounded-full" />
+          <span className="h-5 w-24 bg-custom-background-80 rounded" />
+        </div>
+        <span className="h-5 w-24 bg-custom-background-80 rounded" />
+        <span className="h-5 w-20 bg-custom-background-80 rounded" />
+        <span className="h-5 w-28 bg-custom-background-80 rounded" />
+      </div>
+    ))}
+  </div>
+);
--- a/apps/web/core/components/ui/loader/settings/web-hook.tsx
+++ b/apps/web/core/components/ui/loader/settings/web-hook.tsx
@@ -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>
+);
--- a/apps/web/core/components/ui/loader/utils.tsx
+++ b/apps/web/core/components/ui/loader/utils.tsx
@@ -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]}`;
+};
--- a/apps/web/core/components/ui/loader/view-list-loader.tsx
+++ b/apps/web/core/components/ui/loader/view-list-loader.tsx
@@ -0,0 +1,20 @@
+import { range } from "lodash-es";
+
+export const ViewListLoader = () => (
+  <div className="flex h-full w-full flex-col animate-pulse">
+    {range(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>
+);
--- a/apps/web/core/components/ui/markdown-to-component.tsx
+++ b/apps/web/core/components/ui/markdown-to-component.tsx
@@ -0,0 +1,75 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+
+interface CustomComponentProps {
+  href: string;
+  children: React.ReactNode;
+}
+
+type CustomComponent = React.ComponentType<CustomComponentProps>;
+
+interface Props {
+  markdown: string;
+  components?: {
+    a?: CustomComponent;
+    blockquote?: CustomComponent;
+    code?: CustomComponent;
+    del?: CustomComponent;
+    em?: CustomComponent;
+    heading?: CustomComponent;
+    hr?: CustomComponent;
+    image?: CustomComponent;
+    inlineCode?: CustomComponent;
+    link?: CustomComponent;
+    list?: CustomComponent;
+    listItem?: CustomComponent;
+    paragraph?: CustomComponent;
+    strong?: CustomComponent;
+    table?: CustomComponent;
+    tableCell?: CustomComponent;
+    tableHead?: CustomComponent;
+    tableRow?: CustomComponent;
+  };
+  options?: any;
+}
+
+const HeadingPrimary: CustomComponent = ({ children }) => (
+  <h1 className="text-lg font-semibold text-custom-text-100">{children}</h1>
+);
+
+const HeadingSecondary: CustomComponent = ({ children }) => (
+  <h3 className="text-base font-semibold text-custom-text-100">{children}</h3>
+);
+
+const Paragraph: CustomComponent = ({ children }) => <p className="text-sm text-custom-text-200">{children}</p>;
+
+const OrderedList: CustomComponent = ({ children }) => (
+  <ol className="mb-4 ml-8 list-decimal text-sm text-custom-text-200">{children}</ol>
+);
+
+const UnorderedList: CustomComponent = ({ children }) => (
+  <ul className="mb-4 ml-8 list-disc text-sm text-custom-text-200">{children}</ul>
+);
+
+const Link: CustomComponent = ({ href, children }) => (
+  <a href={href} className="underline hover:no-underline" target="_blank" rel="noopener noreferrer">
+    {children}
+  </a>
+);
+
+export const MarkdownRenderer: React.FC<Props> = ({ markdown, options = {} }) => {
+  const customComponents = {
+    h1: HeadingPrimary,
+    h3: HeadingSecondary,
+    p: Paragraph,
+    ol: OrderedList,
+    ul: UnorderedList,
+    a: Link,
+  };
+
+  return (
+    <ReactMarkdown components={customComponents} {...options}>
+      {markdown}
+    </ReactMarkdown>
+  );
+};
--- a/apps/web/core/components/ui/profile-empty-state.tsx
+++ b/apps/web/core/components/ui/profile-empty-state.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+import Image from "next/image";
+
+type Props = {
+  title: string;
+  description?: React.ReactNode;
+  image: any;
+};
+
+export const ProfileEmptyState: React.FC<Props> = ({ title, description, image }) => (
+  <div className={`mx-auto grid h-full w-full place-items-center p-8 `}>
+    <div className="flex w-full flex-col items-center text-center">
+      <div className="flex h-14 w-14 items-center justify-center rounded-full bg-custom-background-90">
+        <Image src={image} width={32} alt={title} />
+      </div>
+      <h6 className="mb-3 mt-3.5 text-base font-semibold">{title}</h6>
+      {description && <p className="text-sm text-custom-text-300">{description}</p>}
+    </div>
+  </div>
+);