From 7ba28db3a595f7e8cdd22712133013610dcad0d7 Mon Sep 17 00:00:00 2001
From: Evan Hu <e-hu@unext.jp>
Date: Fri, 18 Sep 2026 23:19:06 +0900
Subject: [PATCH 1/5] refactor(propel): move off the deprecated Base UI beta
 onto @base-ui/react 1.7.0
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

packages/propel was built on `@base-ui-components/react@1.0.0-beta.3`, which pnpm-lock.yaml itself records as `deprecated: Package was renamed to @base-ui/react`. @makeplane/propel 0.3.0 already depends on `@base-ui/react@^1.6.0` and resolves to 1.7.0, so every bundle shipped two Base UI runtimes. After this change `pnpm why -r` reports one version of @base-ui/react, resolved to the same peer set as the one the external propel pulls, so the duplicate is gone from apps/web, apps/space and apps/admin alike. Doing the substrate move now rather than later matters because the migration onto @pace/propel is about to add hundreds of call sites on top of it.

The rename is not an identity mapping — 1.0 shipped between beta.3 and 1.7.0 — so each of the sixteen importing components was checked against the installed package rather than sed-ed. Four APIs actually moved. `Accordion.Root`'s `openMultiple` is now `multiple` (renamed in 1.0.0-beta.4). `Tooltip`'s `delay`/`closeDelay` and `Menu`'s `openOnHover` moved from the root onto the trigger in 1.0.0-beta.5, where detached triggers can each carry their own; the menu has three mutually exclusive trigger branches, so the prop is applied to each. `Tabs.Tab` renamed its `[data-selected]` attribute to `[data-active]` and its render-state key from `selected` to `active`, which the trigger's variant classes and the emoji picker's class callback both read. `Combobox.Root` now reports a cleared selection as `null`, which the public `onValueChange` signature does not carry, so the root maps it back to the empty value for the active mode.

`Popover` is the one place where an upstream change would have altered a @pace/propel prop contract: `openOnHover`, `delay` and `closeDelay` left `Popover.Root`, but three apps/web call sites pass them to @pace/propel's `Popover` (the calendar block, the gantt block and the editor user mention, all hover preview cards). Rather than edit apps in a dependency PR, the root keeps accepting them and forwards them to `Popover.Button` through a small context, so the component's public shape is unchanged.

Everything else survived the jump unchanged, verified attribute by attribute: the `--accordion-panel-height`, `--collapsible-panel-height`, `--active-tab-width`/`--active-tab-left` and `--toast-*` custom properties, `data-panel-open`, `data-side`/`data-align`, `data-starting-style`/`data-ending-style`, and the toast manager surface behind `setToast`/`updateToast`/`setPromiseToast`/`dismissToast`.
---
 packages/propel/package.json                  |  2 +-
 packages/propel/src/accordion/accordion.tsx   |  4 +-
 packages/propel/src/avatar/avatar.tsx         |  2 +-
 .../propel/src/collapsible/collapsible.tsx    |  2 +-
 packages/propel/src/combobox/combobox.tsx     | 10 ++--
 .../propel/src/context-menu/context-menu.tsx  |  2 +-
 packages/propel/src/dialog/root.tsx           |  2 +-
 .../src/emoji-icon-picker/emoji-picker.tsx    |  8 +--
 packages/propel/src/input/input.tsx           |  2 +-
 packages/propel/src/menu/menu.tsx             |  8 ++-
 packages/propel/src/popover/root.tsx          | 28 +++++++--
 packages/propel/src/scrollarea/scrollarea.tsx |  2 +-
 packages/propel/src/separator/separator.tsx   |  2 +-
 packages/propel/src/switch/root.tsx           |  2 +-
 packages/propel/src/tabs/tabs.tsx             |  4 +-
 packages/propel/src/toast/toast.tsx           |  2 +-
 packages/propel/src/tooltip/root.tsx          |  7 ++-
 pnpm-lock.yaml                                | 58 ++-----------------
 pnpm-workspace.yaml                           |  2 +-
 19 files changed, 63 insertions(+), 86 deletions(-)

diff --git a/packages/propel/package.json b/packages/propel/package.json
index 1a404e58..f38b5392 100644
--- a/packages/propel/package.json
+++ b/packages/propel/package.json
@@ -63,7 +63,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@base-ui-components/react": "catalog:",
+    "@base-ui/react": "catalog:",
     "@makeplane/propel": "catalog:",
     "@pace/constants": "workspace:*",
     "@pace/hooks": "workspace:*",
diff --git a/packages/propel/src/accordion/accordion.tsx b/packages/propel/src/accordion/accordion.tsx
index ac5071cf..979c18f1 100644
--- a/packages/propel/src/accordion/accordion.tsx
+++ b/packages/propel/src/accordion/accordion.tsx
@@ -5,7 +5,7 @@
  */
 
 import * as React from "react";
-import { Accordion as BaseAccordion } from "@base-ui-components/react";
+import { Accordion as BaseAccordion } from "@base-ui/react";
 
 import { AddOutline } from "@makeplane/propel/icons";
 
@@ -39,7 +39,7 @@ export interface AccordionContentProps {
 
 function AccordionRoot({ defaultValue = [], allowMultiple = false, className = "", children }: AccordionRootProps) {
   return (
-    <BaseAccordion.Root defaultValue={defaultValue} openMultiple={allowMultiple} className={`text-14 ${className}`}>
+    <BaseAccordion.Root defaultValue={defaultValue} multiple={allowMultiple} className={`text-14 ${className}`}>
       {children}
     </BaseAccordion.Root>
   );
diff --git a/packages/propel/src/avatar/avatar.tsx b/packages/propel/src/avatar/avatar.tsx
index 3f59a692..e4ce720f 100644
--- a/packages/propel/src/avatar/avatar.tsx
+++ b/packages/propel/src/avatar/avatar.tsx
@@ -5,7 +5,7 @@
  */
 
 import React from "react";
-import { Avatar as AvatarPrimitive } from "@base-ui-components/react/avatar";
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
 import { cn } from "../utils/classname";
 
 export type TAvatarSize = "sm" | "md" | "base" | "lg" | number;
diff --git a/packages/propel/src/collapsible/collapsible.tsx b/packages/propel/src/collapsible/collapsible.tsx
index a92b1646..5802c45e 100644
--- a/packages/propel/src/collapsible/collapsible.tsx
+++ b/packages/propel/src/collapsible/collapsible.tsx
@@ -5,7 +5,7 @@
  */
 
 import React, { useState, useEffect, useCallback, createContext, useContext } from "react";
-import { Collapsible as BaseCollapsible } from "@base-ui-components/react/collapsible";
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
 import clsx from "clsx";
 
 // Types
diff --git a/packages/propel/src/combobox/combobox.tsx b/packages/propel/src/combobox/combobox.tsx
index c4e83c05..dbe29cd4 100644
--- a/packages/propel/src/combobox/combobox.tsx
+++ b/packages/propel/src/combobox/combobox.tsx
@@ -5,7 +5,7 @@
  */
 
 import * as React from "react";
-import { Combobox as BaseCombobox } from "@base-ui-components/react/combobox";
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
 import { SearchOutline } from "@makeplane/propel/icons";
 import { cn } from "../utils/classname";
 
@@ -73,11 +73,13 @@ function ComboboxRoot({
   onOpenChange,
   children,
 }: ComboboxProps) {
+  // Base UI 1.x reports a cleared selection as `null`, which the public `onValueChange` contract does not
+  // carry. Map it back to the empty value of whichever mode is active so callers keep seeing one shape.
   const handleValueChange = React.useCallback(
-    (newValue: string | string[]) => {
-      onValueChange?.(newValue);
+    (newValue: string | string[] | null) => {
+      onValueChange?.(newValue ?? (multiSelect ? [] : ""));
     },
-    [onValueChange]
+    [onValueChange, multiSelect]
   );
 
   return (
diff --git a/packages/propel/src/context-menu/context-menu.tsx b/packages/propel/src/context-menu/context-menu.tsx
index e5d0211a..193bbf05 100644
--- a/packages/propel/src/context-menu/context-menu.tsx
+++ b/packages/propel/src/context-menu/context-menu.tsx
@@ -5,7 +5,7 @@
  */
 
 import * as React from "react";
-import { ContextMenu as ContextMenuPrimitive } from "@base-ui-components/react/context-menu";
+import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu";
 import { cn } from "../utils";
 
 export interface ContextMenuProps extends React.ComponentProps<typeof ContextMenuPrimitive.Root> {
diff --git a/packages/propel/src/dialog/root.tsx b/packages/propel/src/dialog/root.tsx
index 3a917b2c..ef6b94c9 100644
--- a/packages/propel/src/dialog/root.tsx
+++ b/packages/propel/src/dialog/root.tsx
@@ -5,7 +5,7 @@
  */
 
 import { forwardRef, memo, useMemo } from "react";
-import { Dialog as BaseDialog } from "@base-ui-components/react";
+import { Dialog as BaseDialog } from "@base-ui/react";
 import { cn } from "../utils/classname";
 
 // enums
diff --git a/packages/propel/src/emoji-icon-picker/emoji-picker.tsx b/packages/propel/src/emoji-icon-picker/emoji-picker.tsx
index 9fc78127..40c4b09d 100644
--- a/packages/propel/src/emoji-icon-picker/emoji-picker.tsx
+++ b/packages/propel/src/emoji-icon-picker/emoji-picker.tsx
@@ -5,7 +5,7 @@
  */
 
 import { useMemo, useCallback } from "react";
-import { Tabs } from "@base-ui-components/react";
+import { Tabs } from "@base-ui/react";
 import { Popover } from "../popover";
 import { cn } from "../utils/classname";
 import { convertPlacementToSideAndAlign } from "../utils/placement";
@@ -131,10 +131,10 @@ export function EmojiPicker(props: TCustomEmojiPicker) {
               <Tabs.Tab
                 key={tab.key}
                 value={tab.key}
-                className={({ selected }) =>
+                className={({ active }) =>
                   cn("rounded-sm border border-subtle bg-layer-1 py-1 text-13", {
-                    "bg-surface-1 text-primary": selected,
-                    "text-placeholder hover:bg-layer-1/60 hover:text-tertiary": !selected,
+                    "bg-surface-1 text-primary": active,
+                    "text-placeholder hover:bg-layer-1/60 hover:text-tertiary": !active,
                   })
                 }
               >
diff --git a/packages/propel/src/input/input.tsx b/packages/propel/src/input/input.tsx
index e6b8c094..1edb8adf 100644
--- a/packages/propel/src/input/input.tsx
+++ b/packages/propel/src/input/input.tsx
@@ -5,7 +5,7 @@
  */
 
 import * as React from "react";
-import { Input as BaseInput } from "@base-ui-components/react/input";
+import { Input as BaseInput } from "@base-ui/react/input";
 // helpers
 import { cn } from "../utils";
 
diff --git a/packages/propel/src/menu/menu.tsx b/packages/propel/src/menu/menu.tsx
index a7446ded..135fa349 100644
--- a/packages/propel/src/menu/menu.tsx
+++ b/packages/propel/src/menu/menu.tsx
@@ -5,7 +5,7 @@
  */
 
 import * as React from "react";
-import { Menu as BaseMenu } from "@base-ui-components/react/menu";
+import { Menu as BaseMenu } from "@base-ui/react/menu";
 import { ChevronDownOutline, ChevronRightOutline, MoreHorizontalOutline } from "@makeplane/propel/icons";
 import { cn } from "../utils/classname";
 import type { TMenuProps, TSubMenuProps, TMenuItemProps } from "./types";
@@ -128,10 +128,12 @@ function Menu(props: TMenuProps) {
   };
 
   return (
-    <BaseMenu.Root openOnHover={openOnHover} onOpenChange={handleOpenChange}>
+    // Base UI 1.x owns `openOnHover` on the trigger, not the root, so that one root can serve several detached triggers.
+    <BaseMenu.Root onOpenChange={handleOpenChange}>
       {customButton ? (
         <BaseMenu.Trigger
           type="button"
+          openOnHover={openOnHover}
           onClick={handleMenuButtonClick}
           className={cn(customButtonClassName, "outline-none")}
           tabIndex={customButtonTabIndex}
@@ -145,6 +147,7 @@ function Menu(props: TMenuProps) {
           {ellipsis || verticalEllipsis ? (
             <BaseMenu.Trigger
               type="button"
+              openOnHover={openOnHover}
               onClick={handleMenuButtonClick}
               disabled={disabled}
               className={`relative grid place-items-center rounded-sm p-1 text-secondary outline-none hover:text-primary ${
@@ -158,6 +161,7 @@ function Menu(props: TMenuProps) {
           ) : (
             <BaseMenu.Trigger
               type="button"
+              openOnHover={openOnHover}
               className={`flex items-center justify-between gap-1 rounded-md px-2.5 py-1 text-11 whitespace-nowrap duration-300 outline-none ${
                 isOpen ? "bg-surface-2 text-primary" : "text-secondary"
               } ${noBorder ? "" : "shadow-sm border border-strong focus:outline-none"} ${
diff --git a/packages/propel/src/popover/root.tsx b/packages/propel/src/popover/root.tsx
index 444a6363..9b765c5e 100644
--- a/packages/propel/src/popover/root.tsx
+++ b/packages/propel/src/popover/root.tsx
@@ -4,11 +4,23 @@
  * See the LICENSE file for details.
  */
 
-import { memo, useMemo } from "react";
-import { Popover as BasePopover } from "@base-ui-components/react/popover";
+import { createContext, memo, useContext, useMemo } from "react";
+import { Popover as BasePopover } from "@base-ui/react/popover";
 import type { TPlacement, TSide, TAlign } from "../utils/placement";
 import { convertPlacementToSideAndAlign } from "../utils/placement";
 
+/**
+ * Base UI 1.x moved the hover-open props off the popover root and onto the trigger, so that one root can
+ * serve several detached triggers with their own delays. `Popover` keeps accepting them on the root — that
+ * is the shape every call site passes, and this component's props are its public contract — and hands them
+ * down to `Popover.Button` through this context. A prop passed directly on the button still wins.
+ */
+type TPopoverHoverProps = Pick<BasePopover.Trigger.Props, "openOnHover" | "delay" | "closeDelay">;
+
+const PopoverHoverContext = createContext<TPopoverHoverProps>({});
+
+export interface PopoverProps extends React.ComponentProps<typeof BasePopover.Root>, TPopoverHoverProps {}
+
 export interface PopoverContentProps extends React.ComponentProps<typeof BasePopover.Popup> {
   placement?: TPlacement;
   align?: TAlign;
@@ -52,7 +64,8 @@ const PopoverContent = memo(function PopoverContent({
 
 // wrapper components
 const PopoverTrigger = memo(function PopoverTrigger(props: React.ComponentProps<typeof BasePopover.Trigger>) {
-  return <BasePopover.Trigger data-slot="popover-trigger" {...props} />;
+  const hoverProps = useContext(PopoverHoverContext);
+  return <BasePopover.Trigger data-slot="popover-trigger" {...hoverProps} {...props} />;
 });
 
 const PopoverPortal = memo(function PopoverPortal(props: React.ComponentProps<typeof BasePopover.Portal>) {
@@ -65,8 +78,13 @@ const PopoverPositioner = memo(function PopoverPositioner(props: React.Component
 
 // compound components
 const Popover = Object.assign(
-  memo(function Popover(props: React.ComponentProps<typeof BasePopover.Root>) {
-    return <BasePopover.Root data-slot="popover" {...props} />;
+  memo(function Popover({ openOnHover, delay, closeDelay, ...props }: PopoverProps) {
+    const hoverProps = useMemo(() => ({ openOnHover, delay, closeDelay }), [openOnHover, delay, closeDelay]);
+    return (
+      <PopoverHoverContext.Provider value={hoverProps}>
+        <BasePopover.Root data-slot="popover" {...props} />
+      </PopoverHoverContext.Provider>
+    );
   }),
   {
     Button: PopoverTrigger,
diff --git a/packages/propel/src/scrollarea/scrollarea.tsx b/packages/propel/src/scrollarea/scrollarea.tsx
index 4c52e98d..14543223 100644
--- a/packages/propel/src/scrollarea/scrollarea.tsx
+++ b/packages/propel/src/scrollarea/scrollarea.tsx
@@ -5,7 +5,7 @@
  */
 
 import * as React from "react";
-import { ScrollArea as BaseScrollArea } from "@base-ui-components/react/scroll-area";
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
 
 import { cn } from "../utils/classname";
 
diff --git a/packages/propel/src/separator/separator.tsx b/packages/propel/src/separator/separator.tsx
index 22030e2a..a6ebcec2 100644
--- a/packages/propel/src/separator/separator.tsx
+++ b/packages/propel/src/separator/separator.tsx
@@ -5,7 +5,7 @@
  */
 
 import * as React from "react";
-import { Separator as SeparatorPrimitive } from "@base-ui-components/react/separator";
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
 import { cn } from "../utils";
 
 interface SeparatorProps extends React.ComponentProps<typeof SeparatorPrimitive> {
diff --git a/packages/propel/src/switch/root.tsx b/packages/propel/src/switch/root.tsx
index 0c3e87c2..7dfedd02 100644
--- a/packages/propel/src/switch/root.tsx
+++ b/packages/propel/src/switch/root.tsx
@@ -5,7 +5,7 @@
  */
 
 import * as React from "react";
-import { Switch as BaseSwitch } from "@base-ui-components/react/switch";
+import { Switch as BaseSwitch } from "@base-ui/react/switch";
 import { cn } from "../utils/classname";
 
 export interface IToggleSwitchProps {
diff --git a/packages/propel/src/tabs/tabs.tsx b/packages/propel/src/tabs/tabs.tsx
index 56c55a98..13b34445 100644
--- a/packages/propel/src/tabs/tabs.tsx
+++ b/packages/propel/src/tabs/tabs.tsx
@@ -5,7 +5,7 @@
  */
 
 import * as React from "react";
-import { Tabs as TabsPrimitive } from "@base-ui-components/react/tabs";
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
 import { cn } from "../utils/classname";
 
 type TabsVariant = "contained";
@@ -93,7 +93,7 @@ const TabsTrigger = React.forwardRef(function TabsTrigger(
       data-slot="tabs-trigger"
       className={cn(
         "flex w-full min-w-fit cursor-pointer items-center justify-center rounded-md border border-transparent p-1 font-medium text-primary transition-all duration-200 ease-in-out outline-none focus:outline-none",
-        "data-[selected]:shadow-sm data-[selected]:raised-200 data-[selected]:border data-[selected]:border-subtle-1 data-[selected]:bg-layer-2 data-[selected]:text-primary",
+        "data-[active]:shadow-sm data-[active]:raised-200 data-[active]:border data-[active]:border-subtle-1 data-[active]:bg-layer-2 data-[active]:text-primary",
         "text-placeholder hover:bg-layer-transparent-hover hover:text-tertiary",
         "disabled:cursor-not-allowed disabled:text-placeholder",
         {
diff --git a/packages/propel/src/toast/toast.tsx b/packages/propel/src/toast/toast.tsx
index 9985261f..59d8e699 100644
--- a/packages/propel/src/toast/toast.tsx
+++ b/packages/propel/src/toast/toast.tsx
@@ -5,7 +5,7 @@
  */
 
 import * as React from "react";
-import { Toast as BaseToast } from "@base-ui-components/react/toast";
+import { Toast as BaseToast } from "@base-ui/react/toast";
 import { CloseOutline, InfoOutline, TickOutline, WarningTriangleOutline } from "@makeplane/propel/icons";
 // spinner
 import { CircularBarSpinner } from "../spinners/circular-bar-spinner";
diff --git a/packages/propel/src/tooltip/root.tsx b/packages/propel/src/tooltip/root.tsx
index 19f06fc7..d90bf71b 100644
--- a/packages/propel/src/tooltip/root.tsx
+++ b/packages/propel/src/tooltip/root.tsx
@@ -5,7 +5,7 @@
  */
 
 import * as React from "react";
-import { Tooltip as BaseTooltip } from "@base-ui-components/react/tooltip";
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 import { cn } from "../utils";
 import type { TPlacement, TSide, TAlign } from "../utils/placement";
 import { convertPlacementToSideAndAlign } from "../utils/placement";
@@ -52,8 +52,9 @@ export function Tooltip(props: ITooltipProps) {
 
   // No `BaseTooltip.Provider` here on purpose: it exists to share one delay group across many tooltips, so one provider per tooltip is a `FloatingDelayGroup` of one that can never hand off to a neighbour. Mount it once per app root to get the adjacent-instant-open behaviour; the open delay below is passed per tooltip and wins over a provider either way.
   return (
-    <BaseTooltip.Root delay={openDelay} closeDelay={closeDelay} disabled={disabled}>
-      <BaseTooltip.Trigger render={children} />
+    // Base UI 1.x owns the hover delays on the trigger, not the root, so that one root can serve several detached triggers with different delays.
+    <BaseTooltip.Root disabled={disabled}>
+      <BaseTooltip.Trigger render={children} delay={openDelay} closeDelay={closeDelay} />
       <BaseTooltip.Portal>
         <BaseTooltip.Positioner
           className={cn(
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dab0eb99..c623184c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,9 +15,9 @@ catalogs:
     '@atlaskit/pragmatic-drag-and-drop-hitbox':
       specifier: 1.1.0
       version: 1.1.0
-    '@base-ui-components/react':
-      specifier: 1.0.0-beta.3
-      version: 1.0.0-beta.3
+    '@base-ui/react':
+      specifier: 1.7.0
+      version: 1.7.0
     '@bprogress/core':
       specifier: ^1.3.4
       version: 1.3.4
@@ -1251,9 +1251,9 @@ importers:
 
   packages/propel:
     dependencies:
-      '@base-ui-components/react':
+      '@base-ui/react':
         specifier: 'catalog:'
-        version: 1.0.0-beta.3(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+        version: 1.7.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@makeplane/propel':
         specifier: 'catalog:'
         version: 0.3.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)
@@ -1880,29 +1880,6 @@ packages:
     resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
     engines: {node: '>=6.9.0'}
 
-  '@base-ui-components/react@1.0.0-beta.3':
-    resolution: {integrity: sha512-4sAq6zmDA9ixV2HRjjeM1+tSEw5R6nvGjXUQmFoQnC3DZLEUdwO94gWDmUDdpoDuChn27jdbaJs9F0Ih4w2UAA==}
-    engines: {node: '>=14.0.0'}
-    deprecated: Package was renamed to @base-ui/react
-    peerDependencies:
-      '@types/react': 19.2.17
-      react: 19.2.8
-      react-dom: 19.2.8
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@base-ui-components/utils@0.1.1':
-    resolution: {integrity: sha512-HWXZA8upEKgrdL1rQqxWu1H+2tB2cXzY2jCxvgnpUv3eoWN2jldhXxMZnXIjZF7jahGxSWXfSIM/qskiTWFFxA==}
-    deprecated: Package was renamed to @base-ui/utils
-    peerDependencies:
-      '@types/react': 19.2.17
-      react: 19.2.8
-      react-dom: 19.2.8
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   '@base-ui/react@1.7.0':
     resolution: {integrity: sha512-j+8QjX44C32jrXD/qyEAGpFr70FRpGL2CY61mQd9nBPWN737CK0xxD1ceJ055rW4RtdvFDT1e7otzdlfxvsYug==}
     engines: {node: '>=14.0.0'}
@@ -8908,31 +8885,6 @@ snapshots:
       '@babel/helper-string-parser': 7.29.7
       '@babel/helper-validator-identifier': 7.29.7
 
-  '@base-ui-components/react@1.0.0-beta.3(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
-    dependencies:
-      '@babel/runtime': 7.29.7
-      '@base-ui-components/utils': 0.1.1(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@floating-ui/utils': 0.2.12
-      react: 19.2.8
-      react-dom: 19.2.8(react@19.2.8)
-      reselect: 5.3.0
-      tabbable: 6.2.0
-      use-sync-external-store: 1.6.0(react@19.2.8)
-    optionalDependencies:
-      '@types/react': 19.2.17
-
-  '@base-ui-components/utils@0.1.1(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
-    dependencies:
-      '@babel/runtime': 7.29.7
-      '@floating-ui/utils': 0.2.12
-      react: 19.2.8
-      react-dom: 19.2.8(react@19.2.8)
-      reselect: 5.3.0
-      use-sync-external-store: 1.6.0(react@19.2.8)
-    optionalDependencies:
-      '@types/react': 19.2.17
-
   '@base-ui/react@1.7.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@babel/runtime': 7.29.7
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 13076179..31292be2 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -8,7 +8,7 @@ catalog:
   "@atlaskit/pragmatic-drag-and-drop": "1.7.4"
   "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.4.0"
   "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0"
-  "@base-ui-components/react": "1.0.0-beta.3"
+  "@base-ui/react": "1.7.0"
   "@bprogress/core": "^1.3.4"
   "@chromatic-com/storybook": "5.2.1"
   "@floating-ui/dom": "^1.7.1"

From 635289de6245d39cd5afcfd0bbe87aa61250e21d Mon Sep 17 00:00:00 2001
From: Evan Hu <e-hu@unext.jp>
Date: Fri, 18 Sep 2026 23:19:31 +0900
Subject: [PATCH 2/5] fix(propel): ship the separator subpath and mark the
 package side-effect free
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The build config no longer described the package. `src/separator` existed with a working component and a Storybook story but had no `index.ts`, no tsdown entry and no `exports` key, so `@pace/propel/separator` could not be imported at all — which matters now, because the twelve zero-consumer subpaths are the landing zones the component consolidation is about to use, not dead code. Meanwhile the entry list still named `src/emoji-reaction-picker/index.ts` for a directory that does not exist; tsdown silently ignored it, so the stale entry only served to mislead.

`sideEffects: false` matches the sibling `@pace/ui` manifest and is safe here: nothing under `packages/propel/src` imports CSS or touches module-scope globals, and the one stylesheet the package publishes reaches apps/web and apps/space through a CSS `@import` in their `globals.css`, which bundler side-effect pruning does not see. Without the flag every consumer has to keep all forty-odd subpath modules it touches.
---
 packages/propel/package.json           | 2 ++
 packages/propel/src/separator/index.ts | 7 +++++++
 packages/propel/tsdown.config.ts       | 2 +-
 3 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 packages/propel/src/separator/index.ts

diff --git a/packages/propel/package.json b/packages/propel/package.json
index f38b5392..4a69e5dd 100644
--- a/packages/propel/package.json
+++ b/packages/propel/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "license": "AGPL-3.0",
   "type": "module",
+  "sideEffects": false,
   "exports": {
     "./accordion": "./dist/accordion/index.js",
     "./animated-counter": "./dist/animated-counter/index.js",
@@ -36,6 +37,7 @@
     "./popover": "./dist/popover/index.js",
     "./portal": "./dist/portal/index.js",
     "./scrollarea": "./dist/scrollarea/index.js",
+    "./separator": "./dist/separator/index.js",
     "./skeleton": "./dist/skeleton/index.js",
     "./spinners": "./dist/spinners/index.js",
     "./switch": "./dist/switch/index.js",
diff --git a/packages/propel/src/separator/index.ts b/packages/propel/src/separator/index.ts
new file mode 100644
index 00000000..b83063bf
--- /dev/null
+++ b/packages/propel/src/separator/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./separator";
diff --git a/packages/propel/tsdown.config.ts b/packages/propel/tsdown.config.ts
index 5e97cf6f..85d5f525 100644
--- a/packages/propel/tsdown.config.ts
+++ b/packages/propel/tsdown.config.ts
@@ -19,7 +19,6 @@ export default defineConfig({
     "src/empty-state/index.ts",
     "src/emoji-icon-picker/index.ts",
     "src/emoji-reaction/index.ts",
-    "src/emoji-reaction-picker/index.ts",
     "src/icon-button/index.ts",
     "src/icons/index.ts",
     "src/input/index.ts",
@@ -28,6 +27,7 @@ export default defineConfig({
     "src/popover/index.ts",
     "src/portal/index.ts",
     "src/scrollarea/index.ts",
+    "src/separator/index.ts",
     "src/skeleton/index.ts",
     "src/spinners/index.ts",
     "src/switch/index.ts",

From 058d5b5aeeb920d3766e73929a8c646051ad61ce Mon Sep 17 00:00:00 2001
From: Evan Hu <e-hu@unext.jp>
Date: Fri, 18 Sep 2026 23:49:56 +0900
Subject: [PATCH 3/5] chore: bump the workspace version, which check-version
 requires of every PR

---
 apps/admin/package.json                 | 2 +-
 apps/space/package.json                 | 2 +-
 apps/web/package.json                   | 2 +-
 package.json                            | 2 +-
 packages/codemods/package.json          | 2 +-
 packages/constants/package.json         | 2 +-
 packages/editor/package.json            | 2 +-
 packages/hooks/package.json             | 2 +-
 packages/i18n/package.json              | 2 +-
 packages/propel/package.json            | 2 +-
 packages/services/package.json          | 2 +-
 packages/shared-state/package.json      | 2 +-
 packages/tailwind-config/package.json   | 2 +-
 packages/types/package.json             | 2 +-
 packages/typescript-config/package.json | 2 +-
 packages/ui/package.json                | 2 +-
 packages/utils/package.json             | 2 +-
 17 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/apps/admin/package.json b/apps/admin/package.json
index e2361a51..64f8472c 100644
--- a/apps/admin/package.json
+++ b/apps/admin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "admin",
-  "version": "1.4.39",
+  "version": "1.4.40",
   "private": true,
   "description": "Admin UI for Pace",
   "license": "AGPL-3.0",
diff --git a/apps/space/package.json b/apps/space/package.json
index 7fe586f1..f0935b01 100644
--- a/apps/space/package.json
+++ b/apps/space/package.json
@@ -1,6 +1,6 @@
 {
   "name": "space",
-  "version": "1.4.39",
+  "version": "1.4.40",
   "private": true,
   "license": "AGPL-3.0",
   "type": "module",
diff --git a/apps/web/package.json b/apps/web/package.json
index cd55c38a..22923ab4 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "1.4.39",
+  "version": "1.4.40",
   "private": true,
   "license": "AGPL-3.0",
   "type": "module",
diff --git a/package.json b/package.json
index 6291a891..b95c88b7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pace",
-  "version": "1.4.39",
+  "version": "1.4.40",
   "private": true,
   "description": "Project management that keeps pace with the work",
   "license": "AGPL-3.0",
diff --git a/packages/codemods/package.json b/packages/codemods/package.json
index e20d849a..4cae1104 100644
--- a/packages/codemods/package.json
+++ b/packages/codemods/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pace/codemods",
-  "version": "1.4.39",
+  "version": "1.4.40",
   "private": true,
   "scripts": {
     "check:format": "oxfmt --check .",
diff --git a/packages/constants/package.json b/packages/constants/package.json
index b58b4f76..a6bb2ffb 100644
--- a/packages/constants/package.json
+++ b/packages/constants/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pace/constants",
-  "version": "1.4.39",
+  "version": "1.4.40",
   "private": true,
   "license": "AGPL-3.0",
   "type": "module",
diff --git a/packages/editor/package.json b/packages/editor/package.json
index cc755645..b03cf9c6 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pace/editor",
-  "version": "1.4.39",
+  "version": "1.4.40",
   "private": true,
   "description": "Core Editor that powers Pace",
   "keywords": [
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index a465e16a..17722550 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pace/hooks",
-  "version": "1.4.39",
+  "version": "1.4.40",
   "private": true,
   "description": "React hooks that are shared across multiple apps internally",
   "license": "AGPL-3.0",
diff --git a/packages/i18n/package.json b/packages/i18n/package.json
index afd8f563..bd192ae2 100644
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pace/i18n",
-  "version": "1.4.39",
+  "version": "1.4.40",
   "private": true,
   "description": "I18n shared across multiple apps internally",
   "license": "AGPL-3.0",
diff --git a/packages/propel/package.json b/packages/propel/package.json
index 4a69e5dd..be472ef3 100644
--- a/packages/propel/package.json
+++ b/packages/propel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pace/propel",
-  "version": "1.4.39",
+  "version": "1.4.40",
   "private": true,
   "license": "AGPL-3.0",
   "type": "module",
diff --git a/packages/services/package.json b/packages/services/package.json
index b2d62b85..3fa4f12d 100644
--- a/packages/services/package.json
+++ b/packages/services/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pace/services",
-  "version": "1.4.39",
+  "version": "1.4.40",
   "private": true,
   "license": "AGPL-3.0",
   "type": "module",
diff --git a/packages/shared-state/package.json b/packages/shared-state/package.json
index a1f21d63..655d6696 100644
--- a/packages/shared-state/package.json
+++ b/packages/shared-state/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pace/shared-state",
-  "version": "1.4.39",
+  "version": "1.4.40",
   "private": true,
   "description": "Shared state shared across multiple apps internally",
   "license": "AGPL-3.0",
diff --git a/packages/tailwind-config/package.json b/packages/tailwind-config/package.json
index 4fef73fa..325e18d1 100644
--- a/packages/tailwind-config/package.json
+++ b/packages/tailwind-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pace/tailwind-config",
-  "version": "1.4.39",
+  "version": "1.4.40",
   "private": true,
   "description": "common tailwind configuration across monorepo",
   "license": "AGPL-3.0",
diff --git a/packages/types/package.json b/packages/types/package.json
index f16a1dfd..cb4201ca 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pace/types",
-  "version": "1.4.39",
+  "version": "1.4.40",
   "private": true,
   "license": "AGPL-3.0",
   "type": "module",
diff --git a/packages/typescript-config/package.json b/packages/typescript-config/package.json
index a65311ee..4c0aef1e 100644
--- a/packages/typescript-config/package.json
+++ b/packages/typescript-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pace/typescript-config",
-  "version": "1.4.39",
+  "version": "1.4.40",
   "private": true,
   "license": "AGPL-3.0",
   "files": [
diff --git a/packages/ui/package.json b/packages/ui/package.json
index d3f99689..d639ad76 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pace/ui",
-  "version": "1.4.39",
+  "version": "1.4.40",
   "private": true,
   "description": "UI components shared across multiple apps internally",
   "license": "AGPL-3.0",
diff --git a/packages/utils/package.json b/packages/utils/package.json
index 84fd1eca..9b0a310c 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pace/utils",
-  "version": "1.4.39",
+  "version": "1.4.40",
   "private": true,
   "description": "Helper functions shared across multiple apps internally",
   "license": "AGPL-3.0",

From 51a8a6bd7252bc0cf4135d148d6100ffc0d5d2f8 Mon Sep 17 00:00:00 2001
From: Evan <suzukaze.haduki@gmail.com>
Date: Sat, 19 Sep 2026 20:25:01 +0800
Subject: [PATCH 4/5] refactor: retire the duplicate @pace/ui components onto
 @pace/propel (#259)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor(ui): drop the duplicate Card and point its call sites at @pace/propel

@pace/propel is the library the repo standardises on, and Card is the one place where the two copies were a byte-level duplicate rather than a redesign: packages/propel/src/card/helper.tsx and packages/ui/src/card/helper.tsx were identical, and the two card.tsx files differed on exactly one line — whether `cn` comes from `../utils/classname` or `../utils`. Both are clsx + tailwind-merge, so there is no behaviour to preserve and nothing to decide.

Two of the six consumers (profile/overview/workload.tsx and state-distribution.tsx) imported nothing else from @pace/ui and now import no @pace/ui at all. The rest keep the symbols that have no propel twin, so the specifier is split rather than the whole statement moved.

packages/ui survives as the app-composites layer; only the components that have a propel equivalent leave it.

* chore(codemods): add the @pace/ui Loader to @pace/propel Skeleton rename

The sweep this drives touches 80 files, so the reviewable artefact is the transform and its tests rather than the hunks: the transform has to be provably incapable of changing anything but the import lines and the identifier at its use sites.

It keys off the import source and never off the name. `Loader` is a name app code also defines for itself, and @pace/propel's own emoji picker re-exports a lucide `Loader`; a transform matching `<Loader>` in JSX would rewrite first-party components in files that import nothing from @pace/ui. The headlessui-v2-default-tags transform already makes that guard and its comment explains why.

It uses the AST only to locate character offsets and splices the replacement into the original text instead of returning `root.toSource()`. An earlier sweep in this effort did go through recast, and recast rewrote unrelated JSX in 7 files — it reprints a whole subtree whenever it cannot reconcile comment attachment, and several of these files carry `// oxlint-disable-next-line` comments inside their JSX. The spec pins that by asserting full output equality on exactly that shape.

Two things were easy to get wrong and are pinned by tests. JSXIdentifier is declared as a subtype of Identifier in ast-types, so searching both types splices every JSX element name twice. And the scope hangs off Program, not off the File node the root path points at — `root.get().scope` is null, so comparing a lookup against it matches every unresolved identifier rather than none, which is the difference between leaving a function-scoped `const Loader` alone and renaming it.

* refactor(ui): retire Loader in favour of @pace/propel's Skeleton across 80 files

Loader and Skeleton are the same component under two names: both wrap their children in `animate-pulse` with `role="status"`, both expose an `.Item` taking `height`/`width`/`className` defaulting to `"auto"`, and the class expressions are identical. Skeleton is the one that lives in the library everything standardises on, and it had zero consumers until now.

Skeleton additionally emits `data-slot` attributes and an `aria-label="Loading content"`, so the rendered markup gains an accessible name it did not have. Nothing styles the old markup — `plane-ui-loader` appeared only on the deleted component's own `displayName`, and the call sites pass only `height`, `width` and `className`, all of which Skeleton supports.

63 of the 80 files imported nothing else from @pace/ui and now import no @pace/ui at all. The rest keep the composites that have no propel twin, so the specifier is split out rather than the statement moved.

Produced by `pnpm --filter @pace/codemods run ui-loader-to-propel-skeleton`; every hunk is an import line or a bare identifier.

* refactor(ui): retire the duplicate Spinner onto @pace/propel/spinners

Both packages exported a `Spinner` with the same name, the same `ISpinner { height = "32px", width = "32px", className }` and the same two SVG paths verbatim. They differed in two places, so propel's copy is corrected first and the 33 call sites move second — that ordering is what makes the swap a no-op rather than a visual change.

The accent fill moves from the arc `<path>` onto the `<svg>`, and the arc gets `fill="currentFill"` back. Those two halves are one mechanism: `currentFill` is not a valid paint value, so the attribute is dropped and the arc inherits the svg's computed fill, while the track keeps `fill="currentColor"` from `text-secondary`. Rendered output is the same either way, but only the @pace/ui arrangement lets a caller's `fill-*` class reach the arc, and it is the arrangement 33 live call sites were drawn against.

`clsx` becomes the package's own `cn`, which is the difference that can actually be seen today: `apps/web/core/components/analytics/work-items/modal/content.tsx` renders `<Spinner className="text-blue-500" />`, and only tailwind-merge drops the component's `text-secondary` in favour of it. clsx would emit both classes and let stylesheet order decide. @pace/propel's `cn` and @pace/ui's (re-exported from @pace/utils) are the same extended tailwind-merge, so nothing else about the class strings changes.

Confirmed by diffing the two files after the edit: they are byte-identical apart from `cn` coming from `../utils/classname` rather than `../utils`.

* refactor(space): point the auth forms at @pace/propel's Input

packages/propel/src/input/input.tsx and packages/ui/src/form-fields/input.tsx are the same component: the same `mode`/`inputSize`/`hasError` props with the same defaults and a character-for-character identical class expression. propel's renders Base UI's `Input` instead of a bare `<input>` and adds `aria-invalid` when `hasError` is set, which is the only difference the three auth forms can see — none of them passes `hasError`, and Base UI's input is a `Field.Control` that forwards every native prop and composes its own change/focus handlers with the caller's.

@pace/ui stops re-exporting its copy, so no app can reach it any more, but the file itself stays: input-color-picker still composes it and that composite has no propel counterpart. Deleting the file would mean migrating a screen that is not part of this work.

* feat(propel): honour showTooltip on Avatar and take over AvatarGroup

`showTooltip` was already declared in propel Avatar's prop type and never destructured, so passing it did nothing — the same class of dead prop as the ones in propel's menu. It now does what @pace/ui's Avatar did: wraps the avatar in propel's Tooltip labelled `fallbackText ?? name ?? "?"`, and passes `disabled` rather than dropping the wrapper, so the DOM is the same shape whether the tooltip is on or off.

The default is `true` because that is what the call sites being migrated were written against. apps/space's group-by column headers (`issue-layouts/utils.tsx`) render `<Avatar name={...} size="md" />` with no `showTooltip` and rely on the name appearing on hover; `properties/member.tsx` and `navbar/user-avatar.tsx` pass it explicitly and are unaffected by the choice. The one pre-existing propel Avatar call site, apps/web's profile activity feed, therefore gains a tooltip carrying the actor's display name where it had none.

AvatarGroup moves across as-is (`max`, `showTooltip`, `size`, the `+N` overflow chip) with only its import paths rewritten; it was already reaching into @pace/propel for the Tooltip, so the move shortens that edge rather than creating one. @pace/ui's avatar/helper.tsx duplicated propel's `getSizeInfo`/`getBorderRadius`/`isAValidNumber` verbatim and goes with it.

Two visible consequences for the three apps/space sites, both wanted: the fallback initial's background stops being the hardcoded `#028375`/`#ffffff` and reads `--background-color-accent-primary`/`--text-color-on-color`, which is what makes it correct in dark mode; and the avatar image regains its `alt`, which Base UI's Avatar.Image does not set on its own. Neither is verifiable without a browser — nothing here renders one.

* refactor(web): import cn from @pace/utils rather than through @pace/ui

Five files reached for `cn` through the component library. @pace/ui's is a one-line re-export of @pace/utils' `cn`, which is where the extended tailwind-merge configuration actually lives and where 358 other app files already import it from, so this points them at the owner instead of at a hop through a UI package they otherwise may not need.

The plan suggested @pace/propel/utils. That would have been the wrong target: propel keeps its own copy of the same function, only two files in the repo import from there, and `cn` is not a component, so the decision to standardise components on @pace/propel does not apply to it. @pace/ui keeps re-exporting `cn` for its own internal use, which costs nothing now that no app goes through it.

* fix(propel): let Tooltip's side and align props reach the positioner

`position` defaulted to `"top"`, and the placement branch reads `if (position)`, so the branch was taken for every caller and `side`/`align` were props that could be typed, documented and passed with no effect whatsoever. Nothing in the repo notices today — all 26 in-repo call sites pass either `position` or nothing — but it is the trap waiting for the apps/web Tooltip migration, where 25 call sites pass `side` and 13 pass `align` and would have type-checked into silently top-centred tooltips.

The defaults move onto `side` and `align` instead, and `"top"`/`"center"` is precisely what `convertPlacementToSideAndAlign("top")` returned, so the 19 call sites that pass neither prop are placed exactly where they were and the 7 that pass `position` still go through the conversion.

* chore: bump the workspace version, which check-version requires of every PR
---
 .../components/account/auth-forms/email.tsx   |   3 +-
 .../account/auth-forms/password.tsx           |   4 +-
 .../account/auth-forms/unique-code.tsx        |   3 +-
 .../core/components/issues/filters/labels.tsx |  12 +-
 .../core/components/issues/filters/state.tsx  |  12 +-
 .../issue-layouts/properties/member.tsx       |   3 +-
 .../components/issues/issue-layouts/utils.tsx |   2 +-
 .../components/issues/navbar/user-avatar.tsx  |   2 +-
 .../peek-overview/full-screen-peek-view.tsx   |  26 +--
 .../issues/peek-overview/side-peek-view.tsx   |  14 +-
 .../(projects)/browse/[workItem]/page.tsx     |  22 +--
 .../(detail)/[archivedIssueId]/page.tsx       |  22 +--
 .../components/account/auth-forms/email.tsx   |   2 +-
 .../account/auth-forms/password.tsx           |   3 +-
 .../account/auth-forms/unique-code.tsx        |   2 +-
 .../components/analytics/insight-card.tsx     |   4 +-
 .../analytics/insight-table/loader.tsx        |   4 +-
 .../web/core/components/analytics/loaders.tsx |  26 +--
 .../analytics/overview/active-projects.tsx    |   4 +-
 .../analytics/work-items/modal/content.tsx    |   2 +-
 .../automation/auto-archive-automation.tsx    |   9 +-
 .../automation/auto-close-automation.tsx      |   9 +-
 .../components/base-layouts/gantt/sidebar.tsx |  15 +-
 .../components/base-layouts/list/group.tsx    |   2 +-
 .../components/base-layouts/list/layout.tsx   |   2 +-
 .../components/common/filters/created-by.tsx  |  12 +-
 .../core/description-versions/modal.tsx       |  19 +-
 .../components/core/image-picker-popover.tsx  |  22 +--
 .../core/modals/bulk-delete-issues-modal.tsx  |  15 +-
 .../modals/existing-issues-list-modal.tsx     |  15 +-
 .../cycles/active-cycle/cycle-stats.tsx       |  18 +-
 .../cycles/active-cycle/productivity.tsx      |   8 +-
 .../cycles/active-cycle/progress.tsx          |   8 +-
 .../cycles/analytics-sidebar/root.tsx         |  16 +-
 .../analytics-sidebar/sidebar-chart.tsx       |   8 +-
 .../dropdowns/intake-state/base.tsx           |   3 +-
 .../core/components/dropdowns/state/base.tsx  |   3 +-
 .../rich-text/description-input/loader.tsx    |  24 +--
 .../components/estimates/loader-screen.tsx    |  14 +-
 .../components/estimates/points/create.tsx    |   2 +-
 .../components/estimates/points/update.tsx    |   2 +-
 .../gantt-chart/sidebar/issues/sidebar.tsx    |  14 +-
 .../gantt-chart/sidebar/modules/sidebar.tsx   |  14 +-
 .../global/product-updates/changelog.tsx      |   8 +-
 .../home/widgets/loaders/home-loader.tsx      |  10 +-
 .../home/widgets/loaders/quick-links.tsx      |   8 +-
 .../home/widgets/loaders/recent-activity.tsx  |  10 +-
 .../inbox/inbox-filter/filters/labels.tsx     |  12 +-
 .../inbox/inbox-filter/filters/members.tsx    |  12 +-
 .../inbox/inbox-filter/filters/state.tsx      |  12 +-
 .../modals/create-modal/issue-description.tsx |   8 +-
 .../inbox/modals/select-duplicate.tsx         |  15 +-
 .../core/components/inbox/sidebar/root.tsx    |  11 +-
 .../integration/single-integration-card.tsx   |   8 +-
 .../integration/slack/select-channel.tsx      |   8 +-
 .../issue-detail/issue-activity/loader.tsx    |  30 +--
 .../issues/issue-detail/subscription.tsx      |   8 +-
 .../issue-layouts/calendar/calendar.tsx       |   2 +-
 .../filters/header/filters/assignee.tsx       |  12 +-
 .../filters/header/filters/created-by.tsx     |  12 +-
 .../filters/header/filters/cycle.tsx          |  12 +-
 .../filters/header/filters/labels.tsx         |  12 +-
 .../filters/header/filters/mentions.tsx       |  12 +-
 .../filters/header/filters/module.tsx         |  12 +-
 .../filters/header/filters/project.tsx        |  12 +-
 .../filters/header/filters/state.tsx          |  12 +-
 .../issues/issue-layouts/list/block.tsx       |   3 +-
 .../roots/project-layout-root.tsx             |   2 +-
 .../components/description-editor.tsx         |  24 +--
 .../issues/parent-issues-list-modal.tsx       |  15 +-
 .../issues/peek-overview/loader.tsx           |  72 +++----
 .../labels/project-setting-label-list.tsx     |  14 +-
 .../license/modal/card/checkout-button.tsx    |  14 +-
 .../license/modal/card/talk-to-sales.tsx      |  14 +-
 .../analytics-sidebar/issue-progress.tsx      |   3 +-
 .../modules/analytics-sidebar/root.tsx        |  17 +-
 .../modules/dropdowns/filters/lead.tsx        |  12 +-
 .../modules/dropdowns/filters/members.tsx     |  12 +-
 .../components/modules/module-card-item.tsx   |   3 +-
 .../onboarding/create-workspace.tsx           |   3 +-
 .../components/onboarding/invitations.tsx     |   2 +-
 .../components/onboarding/invite-members.tsx  |   2 +-
 .../components/onboarding/profile-setup.tsx   |   3 +-
 .../components/onboarding/steps/team/root.tsx |   2 +-
 .../onboarding/steps/workspace/create.tsx     |   2 +-
 .../steps/workspace/join-invites.tsx          |   2 +-
 .../pages/loaders/page-content-loader.tsx     |  80 ++++----
 .../components/pages/loaders/page-loader.tsx  |  26 +--
 .../core/components/pages/version/editor.tsx  |  38 ++--
 .../context-based/work-item/cycles-menu.tsx   |   2 +-
 .../work-item/estimates-menu.tsx              |   2 +-
 .../context-based/work-item/labels-menu.tsx   |   2 +-
 .../context-based/work-item/modules-menu.tsx  |   2 +-
 .../context-based/work-item/states-menu.tsx   |   2 +-
 .../pages/open-entity/project-cycles-menu.tsx |   2 +-
 .../open-entity/project-modules-menu.tsx      |   2 +-
 .../pages/open-entity/project-views-menu.tsx  |   2 +-
 .../ui/pages/open-entity/projects-menu.tsx    |   2 +-
 .../ui/pages/open-entity/workspaces-menu.tsx  |   2 +-
 .../components/profile/overview/activity.tsx  |  17 +-
 .../overview/priority-distribution.tsx        |  23 +--
 .../profile/overview/state-distribution.tsx   |   9 +-
 .../components/profile/overview/stats.tsx     |  13 +-
 .../components/profile/overview/workload.tsx  |   2 +-
 apps/web/core/components/profile/sidebar.tsx  |  18 +-
 .../core/components/project-states/loader.tsx |  14 +-
 .../project/dropdowns/filters/lead.tsx        |  12 +-
 .../project/dropdowns/filters/members.tsx     |  12 +-
 .../core/components/project/form-loader.tsx   |  50 ++---
 .../project-settings-member-defaults.tsx      |  14 +-
 .../project/publish-project/modal.tsx         |  15 +-
 apps/web/core/components/readonly/state.tsx   |  10 +-
 .../rich-filters/filter-item/loader.tsx       |   8 +-
 .../components/rich-filters/filters-row.tsx   |  10 +-
 apps/web/core/components/settings/heading.tsx |   2 +-
 .../components/settings/profile/heading.tsx   |   2 +-
 .../stickies/layout/stickies-infinite.tsx     |   9 +-
 .../stickies/layout/stickies-loader.tsx       |  38 ++--
 .../project-inbox/inbox-layout-loader.tsx     |  16 +-
 .../sidebar/header/options/root.tsx           |   2 +-
 .../workspace/sidebar/projects-list.tsx       |   8 +-
 .../workspace/sidebar/workspace-menu-root.tsx |  10 +-
 .../ui-loader-to-propel-skeleton.spec.ts      | 183 ++++++++++++++++++
 .../codemods/ui-loader-to-propel-skeleton.ts  | 152 +++++++++++++++
 .../components/editors/document/loader.tsx    |  36 ++--
 .../src/avatar/avatar-group.tsx               |   6 +-
 packages/propel/src/avatar/avatar.tsx         |  67 ++++---
 packages/propel/src/avatar/index.ts           |   1 +
 .../propel/src/spinners/circular-spinner.tsx  |   6 +-
 packages/propel/src/tooltip/root.tsx          |   5 +-
 packages/ui/src/avatar/avatar.stories.tsx     |  24 ---
 packages/ui/src/avatar/avatar.tsx             | 111 -----------
 packages/ui/src/avatar/helper.tsx             |  70 -------
 packages/ui/src/avatar/index.ts               |   8 -
 packages/ui/src/card/card.tsx                 |  40 ----
 packages/ui/src/card/helper.tsx               |  41 ----
 packages/ui/src/card/index.ts                 |   7 -
 packages/ui/src/form-fields/index.ts          |   2 +-
 packages/ui/src/index.ts                      |   4 -
 packages/ui/src/loader.tsx                    |  38 ----
 packages/ui/src/spinners/circular-spinner.tsx |  41 ----
 packages/ui/src/spinners/index.ts             |   7 -
 142 files changed, 1109 insertions(+), 1123 deletions(-)
 create mode 100644 packages/codemods/tests/ui-loader-to-propel-skeleton.spec.ts
 create mode 100644 packages/codemods/ui-loader-to-propel-skeleton.ts
 rename packages/{ui => propel}/src/avatar/avatar-group.tsx (94%)
 delete mode 100644 packages/ui/src/avatar/avatar.stories.tsx
 delete mode 100644 packages/ui/src/avatar/avatar.tsx
 delete mode 100644 packages/ui/src/avatar/helper.tsx
 delete mode 100644 packages/ui/src/avatar/index.ts
 delete mode 100644 packages/ui/src/card/card.tsx
 delete mode 100644 packages/ui/src/card/helper.tsx
 delete mode 100644 packages/ui/src/card/index.ts
 delete mode 100644 packages/ui/src/loader.tsx
 delete mode 100644 packages/ui/src/spinners/circular-spinner.tsx
 delete mode 100644 packages/ui/src/spinners/index.ts

diff --git a/apps/space/core/components/account/auth-forms/email.tsx b/apps/space/core/components/account/auth-forms/email.tsx
index 303b4025..a0520c43 100644
--- a/apps/space/core/components/account/auth-forms/email.tsx
+++ b/apps/space/core/components/account/auth-forms/email.tsx
@@ -13,7 +13,8 @@ import { CloseCircleOutline, WarningCircleOutline } from "@makeplane/propel/icon
 import { Button } from "@pace/propel/button";
 import type { IEmailCheckData } from "@pace/types";
 // ui
-import { Input, Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
+import { Input } from "@pace/propel/input";
 // helpers
 import { checkEmailValidity, cn } from "@pace/utils";
 
diff --git a/apps/space/core/components/account/auth-forms/password.tsx b/apps/space/core/components/account/auth-forms/password.tsx
index a33e5acd..e2dfd3e9 100644
--- a/apps/space/core/components/account/auth-forms/password.tsx
+++ b/apps/space/core/components/account/auth-forms/password.tsx
@@ -11,7 +11,9 @@ import { CloseCircleOutline, HideOutline, ShowOutline } from "@makeplane/propel/
 import { API_BASE_URL, EAuthModes, EAuthSteps, E_PASSWORD_STRENGTH } from "@pace/constants";
 import { Button } from "@pace/propel/button";
 import { AuthService } from "@pace/services";
-import { Input, Spinner, PasswordStrengthIndicator } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
+import { Input } from "@pace/propel/input";
+import { PasswordStrengthIndicator } from "@pace/ui";
 import { getPasswordStrength } from "@pace/utils";
 // types
 
diff --git a/apps/space/core/components/account/auth-forms/unique-code.tsx b/apps/space/core/components/account/auth-forms/unique-code.tsx
index db87689b..768ee74b 100644
--- a/apps/space/core/components/account/auth-forms/unique-code.tsx
+++ b/apps/space/core/components/account/auth-forms/unique-code.tsx
@@ -10,7 +10,8 @@ import { CloseCircleOutline, TickCircleOutline } from "@makeplane/propel/icons";
 import { API_BASE_URL, EAuthModes } from "@pace/constants";
 import { Button } from "@pace/propel/button";
 import { AuthService } from "@pace/services";
-import { Input, Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
+import { Input } from "@pace/propel/input";
 // hooks
 import { useTimer } from "@pace/hooks";
 // types
diff --git a/apps/space/core/components/issues/filters/labels.tsx b/apps/space/core/components/issues/filters/labels.tsx
index 8c8ed7d6..7e6751ca 100644
--- a/apps/space/core/components/issues/filters/labels.tsx
+++ b/apps/space/core/components/issues/filters/labels.tsx
@@ -6,7 +6,7 @@
 
 import React, { useState } from "react";
 // pace imports
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // types
 import type { IIssueLabel } from "@/types/issue";
 // local imports
@@ -76,11 +76,11 @@ export function FilterLabels(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Loader className="space-y-2">
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-            </Loader>
+            <Skeleton className="space-y-2">
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+            </Skeleton>
           )}
         </div>
       )}
diff --git a/apps/space/core/components/issues/filters/state.tsx b/apps/space/core/components/issues/filters/state.tsx
index edfbe282..35ad7879 100644
--- a/apps/space/core/components/issues/filters/state.tsx
+++ b/apps/space/core/components/issues/filters/state.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 // ui
 import { EIconSize } from "@pace/constants";
 import { StateGroupIcon } from "@pace/propel/icons";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // hooks
 import { useStates } from "@/hooks/store/use-state";
 // local imports
@@ -76,11 +76,11 @@ export const FilterState = observer(function FilterState(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Loader className="space-y-2">
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-            </Loader>
+            <Skeleton className="space-y-2">
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+            </Skeleton>
           )}
         </div>
       )}
diff --git a/apps/space/core/components/issues/issue-layouts/properties/member.tsx b/apps/space/core/components/issues/issue-layouts/properties/member.tsx
index 0f31d34b..f20d88d6 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/member.tsx
+++ b/apps/space/core/components/issues/issue-layouts/properties/member.tsx
@@ -8,8 +8,7 @@ import { observer } from "mobx-react";
 // icons
 import type { LucideIcon } from "lucide-react";
 import { MembersOutline } from "@makeplane/propel/icons";
-// pace ui
-import { Avatar, AvatarGroup } from "@pace/ui";
+import { Avatar, AvatarGroup } from "@pace/propel/avatar";
 // pace utils
 import { cn } from "@pace/utils";
 // hooks
diff --git a/apps/space/core/components/issues/issue-layouts/utils.tsx b/apps/space/core/components/issues/issue-layouts/utils.tsx
index fd28cec7..4eed7600 100644
--- a/apps/space/core/components/issues/issue-layouts/utils.tsx
+++ b/apps/space/core/components/issues/issue-layouts/utils.tsx
@@ -7,6 +7,7 @@
 import { isNil } from "lodash-es";
 // types
 import { EIconSize, ISSUE_PRIORITIES } from "@pace/constants";
+import { Avatar } from "@pace/propel/avatar";
 import { CycleGroupIcon, PriorityIcon, StateGroupIcon } from "@pace/propel/icons";
 import { CyclesOutline, ModuleOutline } from "@makeplane/propel/icons";
 import type {
@@ -17,7 +18,6 @@ import type {
   TGroupedIssues,
 } from "@pace/types";
 // ui
-import { Avatar } from "@pace/ui";
 // components
 // constants
 // stores
diff --git a/apps/space/core/components/issues/navbar/user-avatar.tsx b/apps/space/core/components/issues/navbar/user-avatar.tsx
index 17cc2a61..a1c809b3 100644
--- a/apps/space/core/components/issues/navbar/user-avatar.tsx
+++ b/apps/space/core/components/issues/navbar/user-avatar.tsx
@@ -13,9 +13,9 @@ import { LogOutOutline } from "@makeplane/propel/icons";
 import { Popover, Transition } from "@headlessui/react";
 // pace imports
 import { API_BASE_URL } from "@pace/constants";
+import { Avatar } from "@pace/propel/avatar";
 import { Button } from "@pace/propel/button";
 import { AuthService } from "@pace/services";
-import { Avatar } from "@pace/ui";
 import { getFileURL } from "@pace/utils";
 // helpers
 import { queryParamGenerator } from "@/helpers/query-param-generator";
diff --git a/apps/space/core/components/issues/peek-overview/full-screen-peek-view.tsx b/apps/space/core/components/issues/peek-overview/full-screen-peek-view.tsx
index 2538749c..22e1041e 100644
--- a/apps/space/core/components/issues/peek-overview/full-screen-peek-view.tsx
+++ b/apps/space/core/components/issues/peek-overview/full-screen-peek-view.tsx
@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 // pace imports
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // types
 import type { IIssue } from "@/types/issue";
 // local imports
@@ -44,14 +44,14 @@ export const FullScreenPeekView = observer(function FullScreenPeekView(props: Pr
             </div>
           </div>
         ) : (
-          <Loader className="px-6">
-            <Loader.Item height="30px" />
+          <Skeleton className="px-6">
+            <Skeleton.Item height="30px" />
             <div className="mt-3 space-y-2">
-              <Loader.Item height="20px" width="70%" />
-              <Loader.Item height="20px" width="60%" />
-              <Loader.Item height="20px" width="60%" />
+              <Skeleton.Item height="20px" width="70%" />
+              <Skeleton.Item height="20px" width="60%" />
+              <Skeleton.Item height="20px" width="60%" />
             </div>
-          </Loader>
+          </Skeleton>
         )}
       </div>
       <div className="col-span-3 h-full w-full overflow-y-auto">
@@ -60,12 +60,12 @@ export const FullScreenPeekView = observer(function FullScreenPeekView(props: Pr
           {issueDetails ? (
             <PeekOverviewIssueProperties issueDetails={issueDetails} />
           ) : (
-            <Loader className="mt-11 space-y-4">
-              <Loader.Item height="30px" />
-              <Loader.Item height="30px" />
-              <Loader.Item height="30px" />
-              <Loader.Item height="30px" />
-            </Loader>
+            <Skeleton className="mt-11 space-y-4">
+              <Skeleton.Item height="30px" />
+              <Skeleton.Item height="30px" />
+              <Skeleton.Item height="30px" />
+              <Skeleton.Item height="30px" />
+            </Skeleton>
           )}
         </div>
       </div>
diff --git a/apps/space/core/components/issues/peek-overview/side-peek-view.tsx b/apps/space/core/components/issues/peek-overview/side-peek-view.tsx
index 1feb9a7c..4faf0895 100644
--- a/apps/space/core/components/issues/peek-overview/side-peek-view.tsx
+++ b/apps/space/core/components/issues/peek-overview/side-peek-view.tsx
@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 // pace imports
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // store hooks
 import { usePublish } from "@/hooks/store/publish";
 // types
@@ -53,14 +53,14 @@ export const SidePeekView = observer(function SidePeekView(props: Props) {
           )}
         </div>
       ) : (
-        <Loader className="px-6">
-          <Loader.Item height="30px" />
+        <Skeleton className="px-6">
+          <Skeleton.Item height="30px" />
           <div className="mt-3 space-y-2">
-            <Loader.Item height="20px" width="70%" />
-            <Loader.Item height="20px" width="60%" />
-            <Loader.Item height="20px" width="60%" />
+            <Skeleton.Item height="20px" width="70%" />
+            <Skeleton.Item height="20px" width="60%" />
+            <Skeleton.Item height="20px" width="60%" />
           </div>
-        </Loader>
+        </Skeleton>
       )}
     </div>
   );
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx
index 04ad07cb..fd402336 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx
@@ -12,7 +12,7 @@ import useSWR from "swr";
 import { useTranslation } from "@pace/i18n";
 import type { TIssue } from "@pace/types";
 import { EIssueServiceType } from "@pace/types";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // assets
 import emptyIssueDark from "@/app/assets/empty-state/search/issues-dark.webp?url";
 import emptyIssueLight from "@/app/assets/empty-state/search/issues-light.webp?url";
@@ -107,20 +107,20 @@ export const IssueDetailsPage = observer(function IssueDetailsPage({ params }: R
 
   if (issueLoader) {
     return (
-      <Loader className="flex h-full gap-5 p-5">
+      <Skeleton className="flex h-full gap-5 p-5">
         <div className="basis-2/3 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%" />
+          <Skeleton.Item height="30px" width="40%" />
+          <Skeleton.Item height="15px" width="60%" />
+          <Skeleton.Item height="15px" width="60%" />
+          <Skeleton.Item height="15px" width="40%" />
         </div>
         <div className="basis-1/3 space-y-3">
-          <Loader.Item height="30px" />
-          <Loader.Item height="30px" />
-          <Loader.Item height="30px" />
-          <Loader.Item height="30px" />
+          <Skeleton.Item height="30px" />
+          <Skeleton.Item height="30px" />
+          <Skeleton.Item height="30px" />
+          <Skeleton.Item height="30px" />
         </div>
-      </Loader>
+      </Skeleton>
     );
   }
 
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx
index 81bc4c6c..abee02b0 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx
@@ -12,7 +12,7 @@ import { Banner } from "@makeplane/propel/components/banner";
 import { ArchiveOutline } from "@makeplane/propel/icons";
 import { useTranslation } from "@pace/i18n";
 import { Button } from "@pace/propel/button";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // components
 import { PageHead } from "@/components/core/page-title";
 import { IssueDetailRoot } from "@/components/issues/issue-detail";
@@ -53,20 +53,20 @@ function ArchivedIssueDetailsPage({ params }: Route.ComponentProps) {
     <>
       <PageHead title={pageTitle} />
       {issueLoader ? (
-        <Loader className="flex h-full gap-5 p-5">
+        <Skeleton className="flex h-full gap-5 p-5">
           <div className="basis-2/3 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%" />
+            <Skeleton.Item height="30px" width="40%" />
+            <Skeleton.Item height="15px" width="60%" />
+            <Skeleton.Item height="15px" width="60%" />
+            <Skeleton.Item height="15px" width="40%" />
           </div>
           <div className="basis-1/3 space-y-3">
-            <Loader.Item height="30px" />
-            <Loader.Item height="30px" />
-            <Loader.Item height="30px" />
-            <Loader.Item height="30px" />
+            <Skeleton.Item height="30px" />
+            <Skeleton.Item height="30px" />
+            <Skeleton.Item height="30px" />
+            <Skeleton.Item height="30px" />
           </div>
-        </Loader>
+        </Skeleton>
       ) : (
         <>
           <Banner
diff --git a/apps/web/core/components/account/auth-forms/email.tsx b/apps/web/core/components/account/auth-forms/email.tsx
index 93cf5c61..4f7c68bb 100644
--- a/apps/web/core/components/account/auth-forms/email.tsx
+++ b/apps/web/core/components/account/auth-forms/email.tsx
@@ -15,7 +15,7 @@ import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { useTranslation } from "@pace/i18n";
 import { Button } from "@pace/propel/button";
 import type { IEmailCheckData } from "@pace/types";
-import { Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
 import { checkEmailValidity } from "@pace/utils";
 // helpers
 type TAuthEmailForm = {
diff --git a/apps/web/core/components/account/auth-forms/password.tsx b/apps/web/core/components/account/auth-forms/password.tsx
index ce42572f..26a82099 100644
--- a/apps/web/core/components/account/auth-forms/password.tsx
+++ b/apps/web/core/components/account/auth-forms/password.tsx
@@ -15,7 +15,8 @@ import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@pace/constants";
 import { useTranslation } from "@pace/i18n";
 import { Button } from "@pace/propel/button";
-import { PasswordStrengthIndicator, Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
+import { PasswordStrengthIndicator } from "@pace/ui";
 import { getPasswordStrength } from "@pace/utils";
 // components
 import { ForgotPasswordPopover } from "@/components/account/auth-forms/forgot-password-popover";
diff --git a/apps/web/core/components/account/auth-forms/unique-code.tsx b/apps/web/core/components/account/auth-forms/unique-code.tsx
index b1b9a929..92721622 100644
--- a/apps/web/core/components/account/auth-forms/unique-code.tsx
+++ b/apps/web/core/components/account/auth-forms/unique-code.tsx
@@ -10,7 +10,7 @@ import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { API_BASE_URL } from "@pace/constants";
 import { useTranslation } from "@pace/i18n";
 import { Button } from "@pace/propel/button";
-import { Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
 // constants
 // helpers
 import { EAuthModes } from "@/helpers/authentication.helper";
diff --git a/apps/web/core/components/analytics/insight-card.tsx b/apps/web/core/components/analytics/insight-card.tsx
index 223fe1d3..8c5a2cfb 100644
--- a/apps/web/core/components/analytics/insight-card.tsx
+++ b/apps/web/core/components/analytics/insight-card.tsx
@@ -7,7 +7,7 @@
 // pace package imports
 import React from "react";
 import type { IAnalyticsResponseFields } from "@pace/types";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 
 export type InsightCardProps = {
   data?: IAnalyticsResponseFields;
@@ -27,7 +27,7 @@ function InsightCard(props: InsightCardProps) {
           <div className="text-20 font-bold text-primary">{count}</div>
         </div>
       ) : (
-        <Loader.Item height="50px" width="100%" />
+        <Skeleton.Item height="50px" width="100%" />
       )}
     </div>
   );
diff --git a/apps/web/core/components/analytics/insight-table/loader.tsx b/apps/web/core/components/analytics/insight-table/loader.tsx
index 8a7f77db..1b787608 100644
--- a/apps/web/core/components/analytics/insight-table/loader.tsx
+++ b/apps/web/core/components/analytics/insight-table/loader.tsx
@@ -7,7 +7,7 @@
 import * as React from "react";
 import type { ColumnDef } from "@tanstack/react-table";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@pace/propel/table";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 
 interface TableSkeletonProps {
   columns: ColumnDef<any>[];
@@ -31,7 +31,7 @@ export function TableLoader({ columns, rows }: TableSkeletonProps) {
           <TableRow key={rowIndex}>
             {columns.map((_, colIndex) => (
               <TableCell key={colIndex}>
-                <Loader.Item height="20px" width="100%" />
+                <Skeleton.Item height="20px" width="100%" />
               </TableCell>
             ))}
           </TableRow>
diff --git a/apps/web/core/components/analytics/loaders.tsx b/apps/web/core/components/analytics/loaders.tsx
index a62787cf..c9f1fdf4 100644
--- a/apps/web/core/components/analytics/loaders.tsx
+++ b/apps/web/core/components/analytics/loaders.tsx
@@ -4,21 +4,21 @@
  * See the LICENSE file for details.
  */
 
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 
 export function ProjectInsightsLoader() {
   return (
     <div className="flex h-[200px] gap-1">
-      <Loader className="h-full w-full">
-        <Loader.Item height="100%" width="100%" />
-      </Loader>
+      <Skeleton className="h-full w-full">
+        <Skeleton.Item height="100%" width="100%" />
+      </Skeleton>
       <div className="flex h-full w-full flex-col gap-1">
-        <Loader className="h-12 w-full">
-          <Loader.Item height="100%" width="100%" />
-        </Loader>
-        <Loader className="h-full w-full">
-          <Loader.Item height="100%" width="100%" />
-        </Loader>
+        <Skeleton className="h-12 w-full">
+          <Skeleton.Item height="100%" width="100%" />
+        </Skeleton>
+        <Skeleton className="h-full w-full">
+          <Skeleton.Item height="100%" width="100%" />
+        </Skeleton>
       </div>
     </div>
   );
@@ -26,8 +26,8 @@ export function ProjectInsightsLoader() {
 
 export function ChartLoader() {
   return (
-    <Loader className="h-[350px] w-full">
-      <Loader.Item height="100%" width="100%" />
-    </Loader>
+    <Skeleton className="h-[350px] w-full">
+      <Skeleton.Item height="100%" width="100%" />
+    </Skeleton>
   );
 }
diff --git a/apps/web/core/components/analytics/overview/active-projects.tsx b/apps/web/core/components/analytics/overview/active-projects.tsx
index ca157ba1..f8abacbe 100644
--- a/apps/web/core/components/analytics/overview/active-projects.tsx
+++ b/apps/web/core/components/analytics/overview/active-projects.tsx
@@ -10,7 +10,7 @@ import { useParams } from "@/app/hooks/navigation";
 import useSWR from "swr";
 // pace package imports
 import { useTranslation } from "@pace/i18n";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // pace web hooks
 import { useAnalytics } from "@/hooks/store/use-analytics";
 import { useProject } from "@/hooks/store/use-project";
@@ -40,7 +40,7 @@ const ActiveProjects = observer(function ActiveProjects() {
     >
       <div className="flex h-[350px] flex-col gap-4 overflow-auto">
         {isProjectAnalyticsCountLoading &&
-          Array.from({ length: 5 }).map((_, index) => <Loader.Item key={index} height="40px" width="100%" />)}
+          Array.from({ length: 5 }).map((_, index) => <Skeleton.Item key={index} height="40px" width="100%" />)}
         {!isProjectAnalyticsCountLoading &&
           projectAnalyticsCount?.map((project) => <ActiveProjectItem key={project.id} project={project} />)}
       </div>
diff --git a/apps/web/core/components/analytics/work-items/modal/content.tsx b/apps/web/core/components/analytics/work-items/modal/content.tsx
index fe872c43..11a11e63 100644
--- a/apps/web/core/components/analytics/work-items/modal/content.tsx
+++ b/apps/web/core/components/analytics/work-items/modal/content.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { Tab } from "@headlessui/react";
 // pace package imports
 import type { ICycle, IModule, IProject } from "@pace/types";
-import { Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
 // hooks
 import { useAnalytics } from "@/hooks/store/use-analytics";
 // pace web components
diff --git a/apps/web/core/components/automation/auto-archive-automation.tsx b/apps/web/core/components/automation/auto-archive-automation.tsx
index 079423bf..8df151a5 100644
--- a/apps/web/core/components/automation/auto-archive-automation.tsx
+++ b/apps/web/core/components/automation/auto-archive-automation.tsx
@@ -13,7 +13,8 @@ import { PROJECT_AUTOMATION_MONTHS, EUserPermissions, EUserPermissionsLevel } fr
 import { useTranslation } from "@pace/i18n";
 import type { IProject } from "@pace/types";
 import { Switch } from "@makeplane/propel/components/switch";
-import { CustomSelect, Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
+import { CustomSelect } from "@pace/ui";
 // component
 import { SelectMonthModal } from "@/components/automation";
 import { SettingsControlItem } from "@/components/settings/control-item";
@@ -125,9 +126,9 @@ export const AutoArchiveAutomation = observer(function AutoArchiveAutomation(pro
             </div>
           )
         ) : (
-          <Loader className="ml-13">
-            <Loader.Item height="50px" />
-          </Loader>
+          <Skeleton className="ml-13">
+            <Skeleton.Item height="50px" />
+          </Skeleton>
         )}
       </div>
     </>
diff --git a/apps/web/core/components/automation/auto-close-automation.tsx b/apps/web/core/components/automation/auto-close-automation.tsx
index a780560c..6024c8de 100644
--- a/apps/web/core/components/automation/auto-close-automation.tsx
+++ b/apps/web/core/components/automation/auto-close-automation.tsx
@@ -14,7 +14,8 @@ import { useTranslation } from "@pace/i18n";
 import { StateGroupIcon } from "@pace/propel/icons";
 import type { IProject } from "@pace/types";
 import { Switch } from "@makeplane/propel/components/switch";
-import { CustomSelect, CustomSearchSelect, Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
+import { CustomSelect, CustomSearchSelect } from "@pace/ui";
 import { SelectMonthModal } from "@/components/automation";
 import { SettingsControlItem } from "@/components/settings/control-item";
 // hooks
@@ -188,9 +189,9 @@ export const AutoCloseAutomation = observer(function AutoCloseAutomation(props:
             </div>
           )
         ) : (
-          <Loader className="ml-13">
-            <Loader.Item height="50px" />
-          </Loader>
+          <Skeleton className="ml-13">
+            <Skeleton.Item height="50px" />
+          </Skeleton>
         )}
       </div>
     </>
diff --git a/apps/web/core/components/base-layouts/gantt/sidebar.tsx b/apps/web/core/components/base-layouts/gantt/sidebar.tsx
index 57e0c666..a5311520 100644
--- a/apps/web/core/components/base-layouts/gantt/sidebar.tsx
+++ b/apps/web/core/components/base-layouts/gantt/sidebar.tsx
@@ -8,7 +8,8 @@ import type { RefObject } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
 import type { IBaseLayoutsBaseItem, IBlockUpdateData } from "@pace/types";
-import { Loader, Row } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
+import { Row } from "@pace/ui";
 import { cn } from "@pace/utils";
 import RenderIfVisible from "@/components/core/render-if-visible-HOC";
 import { BLOCK_HEIGHT } from "@/components/gantt-chart/constants";
@@ -143,12 +144,12 @@ export const BaseGanttSidebar = observer(function BaseGanttSidebar<T extends IBa
           )}
         </>
       ) : (
-        <Loader className="space-y-3 pr-2">
-          <Loader.Item height="34px" />
-          <Loader.Item height="34px" />
-          <Loader.Item height="34px" />
-          <Loader.Item height="34px" />
-        </Loader>
+        <Skeleton className="space-y-3 pr-2">
+          <Skeleton.Item height="34px" />
+          <Skeleton.Item height="34px" />
+          <Skeleton.Item height="34px" />
+          <Skeleton.Item height="34px" />
+        </Skeleton>
       )}
     </div>
   );
diff --git a/apps/web/core/components/base-layouts/list/group.tsx b/apps/web/core/components/base-layouts/list/group.tsx
index 5f847275..c3d2b28f 100644
--- a/apps/web/core/components/base-layouts/list/group.tsx
+++ b/apps/web/core/components/base-layouts/list/group.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 import { useTranslation } from "@pace/i18n";
 import type { IBaseLayoutsListItem, IBaseLayoutsListGroupProps } from "@pace/types";
-import { cn } from "@pace/ui";
+import { cn } from "@pace/utils";
 import { useGroupDropTarget } from "../hooks/use-group-drop-target";
 import { GroupHeader } from "./group-header";
 import { BaseListItem } from "./item";
diff --git a/apps/web/core/components/base-layouts/list/layout.tsx b/apps/web/core/components/base-layouts/list/layout.tsx
index c4879863..0d2edb73 100644
--- a/apps/web/core/components/base-layouts/list/layout.tsx
+++ b/apps/web/core/components/base-layouts/list/layout.tsx
@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 import type { IBaseLayoutsListItem, IBaseLayoutsListProps } from "@pace/types";
-import { cn } from "@pace/ui";
+import { cn } from "@pace/utils";
 import { useLayoutState } from "../hooks/use-layout-state";
 import { BaseListGroup } from "./group";
 
diff --git a/apps/web/core/components/common/filters/created-by.tsx b/apps/web/core/components/common/filters/created-by.tsx
index 9e654c5c..aa970c27 100644
--- a/apps/web/core/components/common/filters/created-by.tsx
+++ b/apps/web/core/components/common/filters/created-by.tsx
@@ -9,7 +9,7 @@ import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 // ui
 import { Avatar } from "@makeplane/propel/components/avatar";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // components
 import { getFileURL } from "@pace/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -103,11 +103,11 @@ export const FilterCreatedBy = observer(function FilterCreatedBy(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Loader className="space-y-2">
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-            </Loader>
+            <Skeleton className="space-y-2">
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+            </Skeleton>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/core/description-versions/modal.tsx b/apps/web/core/components/core/description-versions/modal.tsx
index 5d68d6e9..be897c90 100644
--- a/apps/web/core/components/core/description-versions/modal.tsx
+++ b/apps/web/core/components/core/description-versions/modal.tsx
@@ -15,7 +15,8 @@ import { ChevronLeftOutline, ChevronRightOutline, CopyOutline } from "@makeplane
 import { setToast, TOAST_TYPE } from "@pace/propel/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { TDescriptionVersion } from "@pace/types";
-import { EModalPosition, EModalWidth, Loader, ModalCore } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
+import { EModalPosition, EModalWidth, ModalCore } from "@pace/ui";
 import { calculateTimeAgo, cn, getFileURL } from "@pace/utils";
 // components
 import { RichTextEditor } from "@/components/editor/rich-text";
@@ -140,18 +141,18 @@ export const DescriptionVersionsModal = observer(function DescriptionVersionsMod
             />
           ) : (
             <div className="space-y-1">
-              <Loader.Item width="300px" height="15px" />
-              <Loader.Item width="400px" height="15px" />
+              <Skeleton.Item width="300px" height="15px" />
+              <Skeleton.Item width="400px" height="15px" />
               <div className="flex items-center gap-2">
-                <Loader.Item width="20px" height="15px" />
-                <Loader.Item width="500px" height="15px" />
+                <Skeleton.Item width="20px" height="15px" />
+                <Skeleton.Item width="500px" height="15px" />
               </div>
               <div className="flex items-center gap-2">
-                <Loader.Item width="20px" height="15px" />
-                <Loader.Item width="200px" height="15px" />
+                <Skeleton.Item width="20px" height="15px" />
+                <Skeleton.Item width="200px" height="15px" />
               </div>
-              <Loader.Item width="300px" height="15px" />
-              <Loader.Item width="200px" height="15px" />
+              <Skeleton.Item width="300px" height="15px" />
+              <Skeleton.Item width="200px" height="15px" />
             </div>
           )}
         </div>
diff --git a/apps/web/core/components/core/image-picker-popover.tsx b/apps/web/core/components/core/image-picker-popover.tsx
index ff43dbc4..c04d6121 100644
--- a/apps/web/core/components/core/image-picker-popover.tsx
+++ b/apps/web/core/components/core/image-picker-popover.tsx
@@ -20,7 +20,7 @@ import { useOutsideClickDetector } from "@pace/hooks";
 import { Button, getButtonStyling } from "@pace/propel/button";
 import { TOAST_TYPE, setToast } from "@pace/propel/toast";
 import { EFileAssetType } from "@pace/types";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // helpers
 import { STATIC_COVER_IMAGES, getCoverImageDisplayURL } from "@/helpers/cover-image.helper";
 // hooks
@@ -277,16 +277,16 @@ function ImagePickerPopoverComponent<TFieldValues extends FieldValues = FieldVal
                                 <p className="pt-7 text-center text-11 text-secondary">No images found.</p>
                               )
                             ) : (
-                              <Loader className="grid grid-cols-4 gap-4">
-                                <Loader.Item height="80px" width="100%" />
-                                <Loader.Item height="80px" width="100%" />
-                                <Loader.Item height="80px" width="100%" />
-                                <Loader.Item height="80px" width="100%" />
-                                <Loader.Item height="80px" width="100%" />
-                                <Loader.Item height="80px" width="100%" />
-                                <Loader.Item height="80px" width="100%" />
-                                <Loader.Item height="80px" width="100%" />
-                              </Loader>
+                              <Skeleton className="grid grid-cols-4 gap-4">
+                                <Skeleton.Item height="80px" width="100%" />
+                                <Skeleton.Item height="80px" width="100%" />
+                                <Skeleton.Item height="80px" width="100%" />
+                                <Skeleton.Item height="80px" width="100%" />
+                                <Skeleton.Item height="80px" width="100%" />
+                                <Skeleton.Item height="80px" width="100%" />
+                                <Skeleton.Item height="80px" width="100%" />
+                                <Skeleton.Item height="80px" width="100%" />
+                              </Skeleton>
                             )}
                           </>
                         )}
diff --git a/apps/web/core/components/core/modals/bulk-delete-issues-modal.tsx b/apps/web/core/components/core/modals/bulk-delete-issues-modal.tsx
index 49fcecfe..7bdc0a4b 100644
--- a/apps/web/core/components/core/modals/bulk-delete-issues-modal.tsx
+++ b/apps/web/core/components/core/modals/bulk-delete-issues-modal.tsx
@@ -18,7 +18,8 @@ import { SearchOutline } from "@makeplane/propel/icons";
 import { TOAST_TYPE, setToast } from "@pace/propel/toast";
 import type { ISearchIssueResponse, IUser } from "@pace/types";
 import { EIssuesStoreType } from "@pace/types";
-import { Loader, EModalPosition, EModalWidth, ModalCore } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
+import { EModalPosition, EModalWidth, ModalCore } from "@pace/ui";
 // assets
 import darkIssuesAsset from "@/app/assets/empty-state/search/issues-dark.webp?url";
 import lightIssuesAsset from "@/app/assets/empty-state/search/issues-light.webp?url";
@@ -185,12 +186,12 @@ export const BulkDeleteIssuesModal = observer(function BulkDeleteIssuesModal(pro
 
           <Combobox.Options as="ul" static className="max-h-80 scroll-py-2 divide-y divide-subtle-1 overflow-y-auto">
             {isSearching ? (
-              <Loader className="space-y-3 p-3">
-                <Loader.Item height="40px" />
-                <Loader.Item height="40px" />
-                <Loader.Item height="40px" />
-                <Loader.Item height="40px" />
-              </Loader>
+              <Skeleton className="space-y-3 p-3">
+                <Skeleton.Item height="40px" />
+                <Skeleton.Item height="40px" />
+                <Skeleton.Item height="40px" />
+                <Skeleton.Item height="40px" />
+              </Skeleton>
             ) : (
               <>{issueList}</>
             )}
diff --git a/apps/web/core/components/core/modals/existing-issues-list-modal.tsx b/apps/web/core/components/core/modals/existing-issues-list-modal.tsx
index 7a5bf364..f1a7124c 100644
--- a/apps/web/core/components/core/modals/existing-issues-list-modal.tsx
+++ b/apps/web/core/components/core/modals/existing-issues-list-modal.tsx
@@ -16,7 +16,8 @@ import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { ISearchIssueResponse, TProjectIssuesSearchParams } from "@pace/types";
 // ui
 import { Switch } from "@makeplane/propel/components/switch";
-import { Loader, EModalPosition, EModalWidth, ModalCore } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
+import { EModalPosition, EModalWidth, ModalCore } from "@pace/ui";
 import { generateWorkItemLink, getTabIndex } from "@pace/utils";
 // helpers
 // hooks
@@ -235,12 +236,12 @@ export function ExistingIssuesListModal(props: Props) {
           )}
 
           {isSearching || isLoading ? (
-            <Loader className="space-y-3 p-3">
-              <Loader.Item height="40px" />
-              <Loader.Item height="40px" />
-              <Loader.Item height="40px" />
-              <Loader.Item height="40px" />
-            </Loader>
+            <Skeleton className="space-y-3 p-3">
+              <Skeleton.Item height="40px" />
+              <Skeleton.Item height="40px" />
+              <Skeleton.Item height="40px" />
+              <Skeleton.Item height="40px" />
+            </Skeleton>
           ) : (
             <>
               {filteredIssues.length === 0 ? (
diff --git a/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx b/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx
index ecb851db..ad1f5dfc 100644
--- a/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx
+++ b/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx
@@ -20,7 +20,7 @@ import type { TWorkItemFilterCondition } from "@pace/shared-state";
 import type { ICycle } from "@pace/types";
 import { EIssuesStoreType } from "@pace/types";
 // ui
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 import { cn, renderFormattedDate, renderFormattedDateWithoutYear, getFileURL } from "@pace/utils";
 // assets
 import darkAssigneeAsset from "@/app/assets/empty-state/active-cycle/assignee-dark.webp?url";
@@ -97,11 +97,11 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
   useIntersectionObserver(issuesContainerRef, issuesLoaderElement, loadMoreIssues, `0% 0% 100% 0%`);
 
   const loaders = (
-    <Loader className="space-y-3">
-      <Loader.Item height="30px" />
-      <Loader.Item height="30px" />
-      <Loader.Item height="30px" />
-    </Loader>
+    <Skeleton className="space-y-3">
+      <Skeleton.Item height="30px" />
+      <Skeleton.Item height="30px" />
+      <Skeleton.Item height="30px" />
+    </Skeleton>
   );
 
   return cycleId ? (
@@ -370,8 +370,8 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
       </Tab.Group>
     </div>
   ) : (
-    <Loader className="col-span-1 flex min-h-[17rem] flex-col gap-4 overflow-hidden bg-surface-1 lg:col-span-2 xl:col-span-1">
-      <Loader.Item width="100%" height="17rem" />
-    </Loader>
+    <Skeleton className="col-span-1 flex min-h-[17rem] flex-col gap-4 overflow-hidden bg-surface-1 lg:col-span-2 xl:col-span-1">
+      <Skeleton.Item width="100%" height="17rem" />
+    </Skeleton>
   );
 });
diff --git a/apps/web/core/components/cycles/active-cycle/productivity.tsx b/apps/web/core/components/cycles/active-cycle/productivity.tsx
index 57e6a81f..cabb1619 100644
--- a/apps/web/core/components/cycles/active-cycle/productivity.tsx
+++ b/apps/web/core/components/cycles/active-cycle/productivity.tsx
@@ -11,7 +11,7 @@ import { useTheme } from "next-themes";
 // pace imports
 import { useTranslation } from "@pace/i18n";
 import type { ICycle, TCycleEstimateType } from "@pace/types";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // assets
 import darkChartAsset from "@/app/assets/empty-state/active-cycle/chart-dark.webp?url";
 import lightChartAsset from "@/app/assets/empty-state/active-cycle/chart-light.webp?url";
@@ -101,8 +101,8 @@ export const ActiveCycleProductivity = observer(function ActiveCycleProductivity
       </Link>
     </div>
   ) : (
-    <Loader className="flex min-h-[17rem] flex-col gap-5 rounded-lg border border-subtle bg-surface-1">
-      <Loader.Item width="100%" height="100%" />
-    </Loader>
+    <Skeleton className="flex min-h-[17rem] flex-col gap-5 rounded-lg border border-subtle bg-surface-1">
+      <Skeleton.Item width="100%" height="100%" />
+    </Skeleton>
   );
 });
diff --git a/apps/web/core/components/cycles/active-cycle/progress.tsx b/apps/web/core/components/cycles/active-cycle/progress.tsx
index f4d97b61..b54e5c2d 100644
--- a/apps/web/core/components/cycles/active-cycle/progress.tsx
+++ b/apps/web/core/components/cycles/active-cycle/progress.tsx
@@ -12,7 +12,7 @@ import { useTranslation } from "@pace/i18n";
 import type { TWorkItemFilterCondition } from "@pace/shared-state";
 import { LinearProgress } from "@makeplane/propel/components/linear-progress";
 import type { ICycle } from "@pace/types";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // assets
 import darkProgressAsset from "@/app/assets/empty-state/active-cycle/progress-dark.webp?url";
 import lightProgressAsset from "@/app/assets/empty-state/active-cycle/progress-light.webp?url";
@@ -116,8 +116,8 @@ export const ActiveCycleProgress = observer(function ActiveCycleProgress(props:
       )}
     </div>
   ) : (
-    <Loader className="flex min-h-[17rem] flex-col gap-5 rounded-lg border border-subtle bg-surface-1">
-      <Loader.Item width="100%" height="100%" />
-    </Loader>
+    <Skeleton className="flex min-h-[17rem] flex-col gap-5 rounded-lg border border-subtle bg-surface-1">
+      <Skeleton.Item width="100%" height="100%" />
+    </Skeleton>
   );
 });
diff --git a/apps/web/core/components/cycles/analytics-sidebar/root.tsx b/apps/web/core/components/cycles/analytics-sidebar/root.tsx
index 30253e09..77712ccd 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/root.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/root.tsx
@@ -7,7 +7,7 @@
 import React from "react";
 import { observer } from "mobx-react";
 // pace imports
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // local imports
 import useCyclesDetails from "../active-cycle/use-cycles-details";
 import { CycleAnalyticsProgress } from "./issue-progress";
@@ -34,17 +34,17 @@ export const CycleDetailsSidebar = observer(function CycleDetailsSidebar(props:
 
   if (!cycleDetails)
     return (
-      <Loader className="px-5">
+      <Skeleton className="px-5">
         <div className="space-y-2">
-          <Loader.Item height="15px" width="50%" />
-          <Loader.Item height="15px" width="30%" />
+          <Skeleton.Item height="15px" width="50%" />
+          <Skeleton.Item height="15px" width="30%" />
         </div>
         <div className="mt-8 space-y-3">
-          <Loader.Item height="30px" />
-          <Loader.Item height="30px" />
-          <Loader.Item height="30px" />
+          <Skeleton.Item height="30px" />
+          <Skeleton.Item height="30px" />
+          <Skeleton.Item height="30px" />
         </div>
-      </Loader>
+      </Skeleton>
     );
 
   return (
diff --git a/apps/web/core/components/cycles/analytics-sidebar/sidebar-chart.tsx b/apps/web/core/components/cycles/analytics-sidebar/sidebar-chart.tsx
index b8d35190..cde79d59 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/sidebar-chart.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/sidebar-chart.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 // pace imports
 import { useTranslation } from "@pace/i18n";
 import type { TCycleEstimateType } from "@pace/types";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 import { getDate } from "@pace/utils";
 // components
 import ProgressChart from "@/components/core/sidebar/progress-chart";
@@ -79,9 +79,9 @@ export const SidebarChart = observer(function SidebarChart(props: ProgressChartP
               />
             </Fragment>
           ) : (
-            <Loader className="mt-4 h-[160px] w-full">
-              <Loader.Item width="100%" height="100%" />
-            </Loader>
+            <Skeleton className="mt-4 h-[160px] w-full">
+              <Skeleton.Item width="100%" height="100%" />
+            </Skeleton>
           )}
         </div>
       </div>
diff --git a/apps/web/core/components/dropdowns/intake-state/base.tsx b/apps/web/core/components/dropdowns/intake-state/base.tsx
index 6f936f04..ca8d2e4c 100644
--- a/apps/web/core/components/dropdowns/intake-state/base.tsx
+++ b/apps/web/core/components/dropdowns/intake-state/base.tsx
@@ -14,7 +14,8 @@ import { useTranslation } from "@pace/i18n";
 import { IntakeStateGroupIcon } from "@pace/propel/icons";
 import { ChevronDownOutline, SearchOutline } from "@makeplane/propel/icons";
 import type { IIntakeState } from "@pace/types";
-import { ComboDropDown, Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
+import { ComboDropDown } from "@pace/ui";
 import { cn } from "@pace/utils";
 // components
 import { DropdownButton } from "@/components/dropdowns/buttons";
diff --git a/apps/web/core/components/dropdowns/state/base.tsx b/apps/web/core/components/dropdowns/state/base.tsx
index 6889263d..747a4b48 100644
--- a/apps/web/core/components/dropdowns/state/base.tsx
+++ b/apps/web/core/components/dropdowns/state/base.tsx
@@ -14,7 +14,8 @@ import { useTranslation } from "@pace/i18n";
 import { StateGroupIcon } from "@pace/propel/icons";
 import { ChevronDownOutline, SearchOutline } from "@makeplane/propel/icons";
 import type { IState } from "@pace/types";
-import { ComboDropDown, Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
+import { ComboDropDown } from "@pace/ui";
 import { cn } from "@pace/utils";
 // components
 import { DropdownButton } from "@/components/dropdowns/buttons";
diff --git a/apps/web/core/components/editor/rich-text/description-input/loader.tsx b/apps/web/core/components/editor/rich-text/description-input/loader.tsx
index 7651dadf..5bddc4d0 100644
--- a/apps/web/core/components/editor/rich-text/description-input/loader.tsx
+++ b/apps/web/core/components/editor/rich-text/description-input/loader.tsx
@@ -5,7 +5,7 @@
  */
 
 // pace imports
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 import { cn } from "@pace/utils";
 
 type Props = {
@@ -16,24 +16,24 @@ export function DescriptionInputLoader(props: Props) {
   const { className } = props;
 
   return (
-    <Loader className={cn("space-y-2", className)}>
-      <Loader.Item width="100%" height="26px" />
+    <Skeleton className={cn("space-y-2", className)}>
+      <Skeleton.Item width="100%" height="26px" />
       <div className="flex items-center gap-2">
-        <Loader.Item width="26px" height="26px" />
-        <Loader.Item width="400px" height="26px" />
+        <Skeleton.Item width="26px" height="26px" />
+        <Skeleton.Item width="400px" height="26px" />
       </div>
       <div className="flex items-center gap-2">
-        <Loader.Item width="26px" height="26px" />
-        <Loader.Item width="400px" height="26px" />
+        <Skeleton.Item width="26px" height="26px" />
+        <Skeleton.Item width="400px" height="26px" />
       </div>
-      <Loader.Item width="80%" height="26px" />
+      <Skeleton.Item width="80%" height="26px" />
       <div className="flex items-center gap-2">
-        <Loader.Item width="50%" height="26px" />
+        <Skeleton.Item width="50%" height="26px" />
       </div>
       <div className="border-0.5 absolute right-3.5 bottom-2 z-10 flex items-center gap-2">
-        <Loader.Item width="100px" height="26px" />
-        <Loader.Item width="50px" height="26px" />
+        <Skeleton.Item width="100px" height="26px" />
+        <Skeleton.Item width="50px" height="26px" />
       </div>
-    </Loader>
+    </Skeleton>
   );
 }
diff --git a/apps/web/core/components/estimates/loader-screen.tsx b/apps/web/core/components/estimates/loader-screen.tsx
index 15453c82..393d3236 100644
--- a/apps/web/core/components/estimates/loader-screen.tsx
+++ b/apps/web/core/components/estimates/loader-screen.tsx
@@ -4,15 +4,15 @@
  * See the LICENSE file for details.
  */
 
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 
 export function EstimateLoaderScreen() {
   return (
-    <Loader className="mt-5 space-y-5">
-      <Loader.Item height="40px" />
-      <Loader.Item height="40px" />
-      <Loader.Item height="40px" />
-      <Loader.Item height="40px" />
-    </Loader>
+    <Skeleton className="mt-5 space-y-5">
+      <Skeleton.Item height="40px" />
+      <Skeleton.Item height="40px" />
+      <Skeleton.Item height="40px" />
+      <Skeleton.Item height="40px" />
+    </Skeleton>
   );
 }
diff --git a/apps/web/core/components/estimates/points/create.tsx b/apps/web/core/components/estimates/points/create.tsx
index 953be1e1..5f4414a1 100644
--- a/apps/web/core/components/estimates/points/create.tsx
+++ b/apps/web/core/components/estimates/points/create.tsx
@@ -13,7 +13,7 @@ import { useTranslation } from "@pace/i18n";
 import { TOAST_TYPE, setToast } from "@pace/propel/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeErrorObject } from "@pace/types";
-import { Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
 import { cn, isEstimatePointValuesRepeated } from "@pace/utils";
 import { EstimateInputRoot } from "@/components/estimates/inputs/root";
 // helpers
diff --git a/apps/web/core/components/estimates/points/update.tsx b/apps/web/core/components/estimates/points/update.tsx
index 2c750be5..c57b7359 100644
--- a/apps/web/core/components/estimates/points/update.tsx
+++ b/apps/web/core/components/estimates/points/update.tsx
@@ -13,7 +13,7 @@ import { useTranslation } from "@pace/i18n";
 import { TOAST_TYPE, setToast } from "@pace/propel/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeErrorObject } from "@pace/types";
-import { Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
 import { cn, isEstimatePointValuesRepeated } from "@pace/utils";
 import { EstimateInputRoot } from "@/components/estimates/inputs/root";
 // helpers
diff --git a/apps/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx b/apps/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx
index 639ee7d2..7e1a6850 100644
--- a/apps/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx
+++ b/apps/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx
@@ -10,7 +10,7 @@ import { observer } from "mobx-react";
 // ui
 import { GANTT_TIMELINE_TYPE } from "@pace/types";
 import type { IBlockUpdateData } from "@pace/types";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // components
 import RenderIfVisible from "@/components/core/render-if-visible-HOC";
 import { GanttLayoutListItemLoader } from "@/components/ui/loader/layouts/gantt-layout-loader";
@@ -122,12 +122,12 @@ export const IssueGanttSidebar = observer(function IssueGanttSidebar(props: Prop
           )}
         </>
       ) : (
-        <Loader className="space-y-3 pr-2">
-          <Loader.Item height="34px" />
-          <Loader.Item height="34px" />
-          <Loader.Item height="34px" />
-          <Loader.Item height="34px" />
-        </Loader>
+        <Skeleton className="space-y-3 pr-2">
+          <Skeleton.Item height="34px" />
+          <Skeleton.Item height="34px" />
+          <Skeleton.Item height="34px" />
+          <Skeleton.Item height="34px" />
+        </Skeleton>
       )}
     </div>
   );
diff --git a/apps/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx b/apps/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx
index 2048b17a..fae2bc59 100644
--- a/apps/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx
+++ b/apps/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 // ui
 import { GANTT_TIMELINE_TYPE } from "@pace/types";
 import type { IBlockUpdateData } from "@pace/types";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // components
 // hooks
 import { useTimeLineChart } from "@/hooks/use-timeline-chart";
@@ -52,12 +52,12 @@ export const ModuleGanttSidebar = observer(function ModuleGanttSidebar(props: Pr
           </GanttDnDHOC>
         ))
       ) : (
-        <Loader className="space-y-3 pr-2">
-          <Loader.Item height="34px" />
-          <Loader.Item height="34px" />
-          <Loader.Item height="34px" />
-          <Loader.Item height="34px" />
-        </Loader>
+        <Skeleton className="space-y-3 pr-2">
+          <Skeleton.Item height="34px" />
+          <Skeleton.Item height="34px" />
+          <Skeleton.Item height="34px" />
+          <Skeleton.Item height="34px" />
+        </Skeleton>
       )}
     </div>
   );
diff --git a/apps/web/core/components/global/product-updates/changelog.tsx b/apps/web/core/components/global/product-updates/changelog.tsx
index e9f565ad..d3dfa7c1 100644
--- a/apps/web/core/components/global/product-updates/changelog.tsx
+++ b/apps/web/core/components/global/product-updates/changelog.tsx
@@ -7,7 +7,7 @@
 import { useState, useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 // hooks
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 import { ProductUpdatesFallback } from "@/components/global/product-updates/fallback";
 import { useInstance } from "@/hooks/store/use-instance";
 
@@ -74,9 +74,9 @@ export const ProductUpdatesChangelog = observer(function ProductUpdatesChangelog
   return (
     <div className="vertical-scrollbar relative mx-0.5 flex scrollbar-xs h-[550px] flex-col overflow-hidden overflow-y-scroll px-6">
       {isLoading && (
-        <Loader className="absolute inset-0 flex h-full w-full flex-col items-center justify-center gap-3">
-          <Loader.Item height="95%" width="95%" />
-        </Loader>
+        <Skeleton className="absolute inset-0 flex h-full w-full flex-col items-center justify-center gap-3">
+          <Skeleton.Item height="95%" width="95%" />
+        </Skeleton>
       )}
       {/* eslint-disable-next-line react/iframe-missing-sandbox oxlint-disable-next-line jsx_a11y/iframe-has-title */}
       <iframe
diff --git a/apps/web/core/components/home/widgets/loaders/home-loader.tsx b/apps/web/core/components/home/widgets/loaders/home-loader.tsx
index bf3e52dd..65eb1c0c 100644
--- a/apps/web/core/components/home/widgets/loaders/home-loader.tsx
+++ b/apps/web/core/components/home/widgets/loaders/home-loader.tsx
@@ -6,7 +6,7 @@
 
 import { range } from "lodash-es";
 // ui
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 
 export function HomeLoader() {
   return (
@@ -15,11 +15,11 @@ export function HomeLoader() {
         <div key={index}>
           <div className="mb-2">
             <div className="mb-4 text-14 font-semibold text-tertiary">
-              <Loader.Item height="20px" width="100px" />
+              <Skeleton.Item height="20px" width="100px" />
             </div>
-            <Loader className="flex h-[110px] w-full items-center justify-center gap-2 rounded-sm text-placeholder">
-              <Loader.Item height="100%" width="100%" />
-            </Loader>
+            <Skeleton className="flex h-[110px] w-full items-center justify-center gap-2 rounded-sm text-placeholder">
+              <Skeleton.Item height="100%" width="100%" />
+            </Skeleton>
           </div>
         </div>
       ))}
diff --git a/apps/web/core/components/home/widgets/loaders/quick-links.tsx b/apps/web/core/components/home/widgets/loaders/quick-links.tsx
index 6e3cd1c6..b2b92df7 100644
--- a/apps/web/core/components/home/widgets/loaders/quick-links.tsx
+++ b/apps/web/core/components/home/widgets/loaders/quick-links.tsx
@@ -6,14 +6,14 @@
 
 import { range } from "lodash-es";
 // ui
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 
 export function QuickLinksWidgetLoader() {
   return (
-    <Loader className="flex flex-wrap gap-2 rounded-xl bg-surface-1">
+    <Skeleton className="flex flex-wrap gap-2 rounded-xl bg-surface-1">
       {range(4).map((index) => (
-        <Loader.Item key={index} height="56px" width="230px" />
+        <Skeleton.Item key={index} height="56px" width="230px" />
       ))}
-    </Loader>
+    </Skeleton>
   );
 }
diff --git a/apps/web/core/components/home/widgets/loaders/recent-activity.tsx b/apps/web/core/components/home/widgets/loaders/recent-activity.tsx
index 1ad7a880..cd629c3b 100644
--- a/apps/web/core/components/home/widgets/loaders/recent-activity.tsx
+++ b/apps/web/core/components/home/widgets/loaders/recent-activity.tsx
@@ -6,21 +6,21 @@
 
 import { range } from "lodash-es";
 // ui
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 
 export function RecentActivityWidgetLoader() {
   return (
-    <Loader className="space-y-6 rounded-xl px-2">
+    <Skeleton className="space-y-6 rounded-xl px-2">
       {range(5).map((index) => (
         <div key={index} className="flex items-start gap-3.5">
           <div className="flex-shrink-0">
-            <Loader.Item height="32px" width="32px" />
+            <Skeleton.Item height="32px" width="32px" />
           </div>
           <div className="my-auto w-full flex-shrink-0 space-y-3">
-            <Loader.Item height="15px" width="70%" />
+            <Skeleton.Item height="15px" width="70%" />
           </div>
         </div>
       ))}
-    </Loader>
+    </Skeleton>
   );
 }
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/labels.tsx b/apps/web/core/components/inbox/inbox-filter/filters/labels.tsx
index a4e5cc4d..71f036d2 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/labels.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/labels.tsx
@@ -7,7 +7,7 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 import type { IIssueLabel } from "@pace/types";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // components
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
 // hooks
@@ -81,11 +81,11 @@ export const FilterLabels = observer(function FilterLabels(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Loader className="space-y-2">
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-            </Loader>
+            <Skeleton className="space-y-2">
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+            </Skeleton>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/members.tsx b/apps/web/core/components/inbox/inbox-filter/filters/members.tsx
index a82ddf8f..86a107d6 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/members.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/members.tsx
@@ -11,7 +11,7 @@ import { observer } from "mobx-react";
 import { Avatar } from "@makeplane/propel/components/avatar";
 import type { TInboxIssueFilterMemberKeys } from "@pace/types";
 // pace ui
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // components
 import { getFileURL } from "@pace/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -111,11 +111,11 @@ export const FilterMember = observer(function FilterMember(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Loader className="space-y-2">
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-            </Loader>
+            <Skeleton className="space-y-2">
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+            </Skeleton>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/state.tsx b/apps/web/core/components/inbox/inbox-filter/filters/state.tsx
index f4bb7b11..9aca12d1 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/state.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/state.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { EIconSize } from "@pace/constants";
 import { StateGroupIcon } from "@pace/propel/icons";
 import type { IState } from "@pace/types";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // components
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
 // hooks
@@ -86,11 +86,11 @@ export const FilterState = observer(function FilterState(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Loader className="space-y-2">
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-            </Loader>
+            <Skeleton className="space-y-2">
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+            </Skeleton>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/inbox/modals/create-modal/issue-description.tsx b/apps/web/core/components/inbox/modals/create-modal/issue-description.tsx
index 2f0ca307..4b89cf99 100644
--- a/apps/web/core/components/inbox/modals/create-modal/issue-description.tsx
+++ b/apps/web/core/components/inbox/modals/create-modal/issue-description.tsx
@@ -12,7 +12,7 @@ import type { EditorRefApi } from "@pace/editor";
 import { useTranslation } from "@pace/i18n";
 import type { TIssue } from "@pace/types";
 import { EFileAssetType } from "@pace/types";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 import { getDescriptionPlaceholderI18n, getTabIndex } from "@pace/utils";
 // components
 import { RichTextEditor } from "@/components/editor/rich-text/editor";
@@ -61,9 +61,9 @@ export const InboxIssueDescription = observer(function InboxIssueDescription(pro
 
   if (loader === "issue-loading")
     return (
-      <Loader className="min-h-[6rem] rounded-md border border-subtle">
-        <Loader.Item width="100%" height="140px" />
-      </Loader>
+      <Skeleton className="min-h-[6rem] rounded-md border border-subtle">
+        <Skeleton.Item width="100%" height="140px" />
+      </Skeleton>
     );
 
   return (
diff --git a/apps/web/core/components/inbox/modals/select-duplicate.tsx b/apps/web/core/components/inbox/modals/select-duplicate.tsx
index 98e8ac1d..cd8b80b9 100644
--- a/apps/web/core/components/inbox/modals/select-duplicate.tsx
+++ b/apps/web/core/components/inbox/modals/select-duplicate.tsx
@@ -13,7 +13,8 @@ import { useTranslation } from "@pace/i18n";
 import { SearchOutline } from "@makeplane/propel/icons";
 import { TOAST_TYPE, setToast } from "@pace/propel/toast";
 import type { ISearchIssueResponse } from "@pace/types";
-import { Loader, EModalPosition, EModalWidth, ModalCore } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
+import { EModalPosition, EModalWidth, ModalCore } from "@pace/ui";
 // assets
 import darkIssuesAsset from "@/app/assets/empty-state/search/issues-dark.webp?url";
 import lightIssuesAsset from "@/app/assets/empty-state/search/issues-light.webp?url";
@@ -153,12 +154,12 @@ export function SelectDuplicateInboxIssueModal(props: Props) {
 
         <Combobox.Options as="ul" static className="max-h-80 scroll-py-2 divide-y divide-subtle-1 overflow-y-auto">
           {isSearching ? (
-            <Loader className="space-y-3 p-3">
-              <Loader.Item height="40px" />
-              <Loader.Item height="40px" />
-              <Loader.Item height="40px" />
-              <Loader.Item height="40px" />
-            </Loader>
+            <Skeleton className="space-y-3 p-3">
+              <Skeleton.Item height="40px" />
+              <Skeleton.Item height="40px" />
+              <Skeleton.Item height="40px" />
+              <Skeleton.Item height="40px" />
+            </Skeleton>
           ) : (
             <>{issueList}</>
           )}
diff --git a/apps/web/core/components/inbox/sidebar/root.tsx b/apps/web/core/components/inbox/sidebar/root.tsx
index 00112337..b8d27151 100644
--- a/apps/web/core/components/inbox/sidebar/root.tsx
+++ b/apps/web/core/components/inbox/sidebar/root.tsx
@@ -11,7 +11,8 @@ import { EmptyStateDetailed } from "@pace/propel/empty-state";
 import type { TInboxIssueCurrentTab } from "@pace/types";
 import { EInboxIssueCurrentTab } from "@pace/types";
 // pace imports
-import { Header, Loader, EHeaderVariant } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
+import { Header, EHeaderVariant } from "@pace/ui";
 import { cn } from "@pace/utils";
 // components
 import { InboxSidebarLoader } from "@/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader";
@@ -174,10 +175,10 @@ export const InboxSidebar = observer(function InboxSidebar(props: IInboxSidebarP
             )}
             <div ref={setElementRef}>
               {inboxIssuePaginationInfo?.next_page_results && (
-                <Loader className="mx-auto w-full space-y-4 px-2 py-4">
-                  <Loader.Item height="64px" width="w-100" />
-                  <Loader.Item height="64px" width="w-100" />
-                </Loader>
+                <Skeleton className="mx-auto w-full space-y-4 px-2 py-4">
+                  <Skeleton.Item height="64px" width="w-100" />
+                  <Skeleton.Item height="64px" width="w-100" />
+                </Skeleton>
               )}
             </div>
           </div>
diff --git a/apps/web/core/components/integration/single-integration-card.tsx b/apps/web/core/components/integration/single-integration-card.tsx
index 34cac4ce..8a364b99 100644
--- a/apps/web/core/components/integration/single-integration-card.tsx
+++ b/apps/web/core/components/integration/single-integration-card.tsx
@@ -15,7 +15,7 @@ import { TOAST_TYPE, setToast } from "@pace/propel/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { IAppIntegration, IWorkspaceIntegration } from "@pace/types";
 // ui
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // assets
 import GithubLogo from "@/app/assets/services/github.png?url";
 import SlackLogo from "@/app/assets/services/slack.png?url";
@@ -177,9 +177,9 @@ export const SingleIntegrationCard = observer(function SingleIntegrationCard({ i
           </Tooltip>
         )
       ) : (
-        <Loader>
-          <Loader.Item height="32px" width="64px" />
-        </Loader>
+        <Skeleton>
+          <Skeleton.Item height="32px" width="64px" />
+        </Skeleton>
       )}
     </div>
   );
diff --git a/apps/web/core/components/integration/slack/select-channel.tsx b/apps/web/core/components/integration/slack/select-channel.tsx
index 3ae3f6e2..f90c4cc8 100644
--- a/apps/web/core/components/integration/slack/select-channel.tsx
+++ b/apps/web/core/components/integration/slack/select-channel.tsx
@@ -11,7 +11,7 @@ import useSWR, { mutate } from "swr";
 // types
 import type { IWorkspaceIntegration, ISlackIntegration } from "@pace/types";
 // ui
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // fetch-keys
 import { SLACK_CHANNEL_INFO } from "@pace/constants";
 // hooks
@@ -102,9 +102,9 @@ export const SelectChannel = observer(function SelectChannel({ integration }: Pr
           />
         </button>
       ) : (
-        <Loader>
-          <Loader.Item height="35px" width="150px" />
-        </Loader>
+        <Skeleton>
+          <Skeleton.Item height="35px" width="150px" />
+        </Skeleton>
       )}
     </>
   );
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/loader.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/loader.tsx
index bf641f96..1c82e22c 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/loader.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/loader.tsx
@@ -5,35 +5,35 @@
  */
 
 // pace imports
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 
 export function IssueActivityLoader() {
   return (
-    <Loader className="space-y-8">
+    <Skeleton className="space-y-8">
       <div className="flex items-start gap-3">
-        <Loader.Item className="shrink-0" height="28px" width="28px" />
+        <Skeleton.Item className="shrink-0" height="28px" width="28px" />
         <div className="w-full space-y-2">
-          <Loader.Item height="8px" width="60%" />
-          <Loader.Item height="8px" width="40%" />
-          <Loader.Item height="10px" width="100%" />
+          <Skeleton.Item height="8px" width="60%" />
+          <Skeleton.Item height="8px" width="40%" />
+          <Skeleton.Item height="10px" width="100%" />
         </div>
       </div>
       <div className="flex items-start gap-3">
-        <Loader.Item className="shrink-0" height="28px" width="28px" />
+        <Skeleton.Item className="shrink-0" height="28px" width="28px" />
         <div className="w-full space-y-2">
-          <Loader.Item height="8px" width="40%" />
-          <Loader.Item height="8px" width="60%" />
-          <Loader.Item height="10px" width="80%" />
+          <Skeleton.Item height="8px" width="40%" />
+          <Skeleton.Item height="8px" width="60%" />
+          <Skeleton.Item height="10px" width="80%" />
         </div>
       </div>
       <div className="flex items-start gap-3">
-        <Loader.Item className="shrink-0" height="28px" width="28px" />
+        <Skeleton.Item className="shrink-0" height="28px" width="28px" />
         <div className="w-full space-y-2">
-          <Loader.Item height="8px" width="60%" />
-          <Loader.Item height="8px" width="40%" />
-          <Loader.Item height="10px" width="100%" />
+          <Skeleton.Item height="8px" width="60%" />
+          <Skeleton.Item height="8px" width="40%" />
+          <Skeleton.Item height="10px" width="100%" />
         </div>
       </div>
-    </Loader>
+    </Skeleton>
   );
 }
diff --git a/apps/web/core/components/issues/issue-detail/subscription.tsx b/apps/web/core/components/issues/issue-detail/subscription.tsx
index 5b8869b7..a7d7a89b 100644
--- a/apps/web/core/components/issues/issue-detail/subscription.tsx
+++ b/apps/web/core/components/issues/issue-detail/subscription.tsx
@@ -15,7 +15,7 @@ import { useTranslation } from "@pace/i18n";
 import { Button } from "@pace/propel/button";
 import { TOAST_TYPE, setToast } from "@pace/propel/toast";
 import { EIssueServiceType } from "@pace/types";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 import { useUserPermissions } from "@/hooks/store/user";
@@ -74,9 +74,9 @@ export const IssueSubscription = observer(function IssueSubscription(props: TIss
 
   if (isNil(isSubscribed))
     return (
-      <Loader>
-        <Loader.Item width="106px" height="28px" />
-      </Loader>
+      <Skeleton>
+        <Skeleton.Item width="106px" height="28px" />
+      </Skeleton>
     );
 
   return (
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/calendar.tsx b/apps/web/core/components/issues/issue-layouts/calendar/calendar.tsx
index 57d3a5c1..c0207086 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/calendar.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/calendar.tsx
@@ -21,7 +21,7 @@ import type {
 } from "@pace/types";
 import { EIssuesStoreType, EIssueLayoutTypes } from "@pace/types";
 // ui
-import { Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
 import { renderFormattedPayloadDate, cn } from "@pace/utils";
 // constants
 import { MONTHS_LIST } from "@pace/constants";
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/assignee.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/assignee.tsx
index 780e6424..9714be93 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/assignee.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/assignee.tsx
@@ -9,7 +9,7 @@ import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 // pace ui
 import { Avatar } from "@makeplane/propel/components/avatar";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // components
 import { getFileURL } from "@pace/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -103,11 +103,11 @@ export const FilterAssignees = observer(function FilterAssignees(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Loader className="space-y-2">
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-            </Loader>
+            <Skeleton className="space-y-2">
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+            </Skeleton>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/created-by.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/created-by.tsx
index 21efdd71..623a2c69 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/created-by.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/created-by.tsx
@@ -9,7 +9,7 @@ import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 // pace ui
 import { Avatar } from "@makeplane/propel/components/avatar";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // components
 import { getFileURL } from "@pace/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -103,11 +103,11 @@ export const FilterCreatedBy = observer(function FilterCreatedBy(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Loader className="space-y-2">
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-            </Loader>
+            <Skeleton className="space-y-2">
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+            </Skeleton>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx
index 88ee1a8c..e8b8a804 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx
@@ -11,7 +11,7 @@ import { useParams } from "@/app/hooks/navigation";
 import { CycleGroupIcon } from "@pace/propel/icons";
 import type { TCycleGroups } from "@pace/types";
 // components
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
 import { useCycle } from "@/hooks/store/use-cycle";
 // ui
@@ -98,11 +98,11 @@ export const FilterCycle = observer(function FilterCycle(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Loader className="space-y-2">
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-            </Loader>
+            <Skeleton className="space-y-2">
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+            </Skeleton>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/labels.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/labels.tsx
index 1102b1d6..d2411e1e 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/labels.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/labels.tsx
@@ -9,7 +9,7 @@ import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 import type { IIssueLabel } from "@pace/types";
 // components
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
 
 // ui
@@ -88,11 +88,11 @@ export const FilterLabels = observer(function FilterLabels(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Loader className="space-y-2">
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-            </Loader>
+            <Skeleton className="space-y-2">
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+            </Skeleton>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/mentions.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/mentions.tsx
index 423dba64..17bad545 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/mentions.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/mentions.tsx
@@ -9,7 +9,7 @@ import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 // pace ui
 import { Avatar } from "@makeplane/propel/components/avatar";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // components
 import { getFileURL } from "@pace/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -103,11 +103,11 @@ export const FilterMentions = observer(function FilterMentions(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Loader className="space-y-2">
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-            </Loader>
+            <Skeleton className="space-y-2">
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+            </Skeleton>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx
index 1ab8a3b1..9f7ecfcd 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx
@@ -10,7 +10,7 @@ import { observer } from "mobx-react";
 import { useParams } from "@/app/hooks/navigation";
 // components
 import { ModuleOutline } from "@makeplane/propel/icons";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
 import { useModule } from "@/hooks/store/use-module";
 // ui
@@ -88,11 +88,11 @@ export const FilterModule = observer(function FilterModule(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Loader className="space-y-2">
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-            </Loader>
+            <Skeleton className="space-y-2">
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+            </Skeleton>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/project.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/project.tsx
index b9144031..94630a82 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/project.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/project.tsx
@@ -9,7 +9,7 @@ import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 // ui
 import { Logo } from "@pace/propel/emoji-icon-picker";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // components
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
 // hooks
@@ -89,11 +89,11 @@ export const FilterProjects = observer(function FilterProjects(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Loader className="space-y-2">
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-            </Loader>
+            <Skeleton className="space-y-2">
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+            </Skeleton>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/state.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/state.tsx
index a31b90aa..ab0c3c6e 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/state.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/state.tsx
@@ -11,7 +11,7 @@ import { EIconSize } from "@pace/constants";
 import { StateGroupIcon } from "@pace/propel/icons";
 import type { IState } from "@pace/types";
 // components
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
 // ui
 // types
@@ -87,11 +87,11 @@ export const FilterState = observer(function FilterState(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Loader className="space-y-2">
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-            </Loader>
+            <Skeleton className="space-y-2">
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+            </Skeleton>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/issues/issue-layouts/list/block.tsx b/apps/web/core/components/issues/issue-layouts/list/block.tsx
index b8c340b5..48cb7d13 100644
--- a/apps/web/core/components/issues/issue-layouts/list/block.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/block.tsx
@@ -17,7 +17,8 @@ import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { TIssue, IIssueDisplayProperties, TIssueMap } from "@pace/types";
 import { EIssueServiceType } from "@pace/types";
 // ui
-import { Spinner, ControlLink, Row } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
+import { ControlLink, Row } from "@pace/ui";
 import { cn, generateWorkItemLink } from "@pace/utils";
 // components
 import { MultipleSelectEntityAction } from "@/components/core/multiple-select";
diff --git a/apps/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx b/apps/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx
index aa8442ea..b29f0ac2 100644
--- a/apps/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx
@@ -10,7 +10,7 @@ import useSWR from "swr";
 // pace constants
 import { ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@pace/constants";
 import { EIssueLayoutTypes, EIssuesStoreType } from "@pace/types";
-import { Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
 // components
 import { ProjectLevelWorkItemFiltersHOC } from "@/components/work-item-filters/filters-hoc/project-level";
 import { WorkItemFiltersRow } from "@/components/work-item-filters/filters-row";
diff --git a/apps/web/core/components/issues/issue-modal/components/description-editor.tsx b/apps/web/core/components/issues/issue-modal/components/description-editor.tsx
index 0bf80225..a0a9569a 100644
--- a/apps/web/core/components/issues/issue-modal/components/description-editor.tsx
+++ b/apps/web/core/components/issues/issue-modal/components/description-editor.tsx
@@ -16,7 +16,7 @@ import { useTranslation } from "@pace/i18n";
 import { TOAST_TYPE, setToast } from "@pace/propel/toast";
 import type { TIssue } from "@pace/types";
 import { EFileAssetType } from "@pace/types";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 import { getDescriptionPlaceholderI18n, getTabIndex } from "@pace/utils";
 // components
 import { GptAssistantPopover } from "@/components/core/modals/gpt-assistant-popover";
@@ -156,25 +156,25 @@ export const IssueDescriptionEditor = observer(function IssueDescriptionEditor(p
   return (
     <div className="relative rounded-lg border-[0.5px] border-subtle-1 bg-layer-2">
       {descriptionHtmlData === undefined || !projectId ? (
-        <Loader className="max-h-64 min-h-[120px] space-y-2 overflow-hidden rounded-md border border-subtle p-3 py-2 pt-3">
-          <Loader.Item width="100%" height="26px" />
+        <Skeleton className="max-h-64 min-h-[120px] space-y-2 overflow-hidden rounded-md border border-subtle p-3 py-2 pt-3">
+          <Skeleton.Item width="100%" height="26px" />
           <div className="flex items-center gap-2">
-            <Loader.Item width="26px" height="26px" />
-            <Loader.Item width="400px" height="26px" />
+            <Skeleton.Item width="26px" height="26px" />
+            <Skeleton.Item width="400px" height="26px" />
           </div>
           <div className="flex items-center gap-2">
-            <Loader.Item width="26px" height="26px" />
-            <Loader.Item width="400px" height="26px" />
+            <Skeleton.Item width="26px" height="26px" />
+            <Skeleton.Item width="400px" height="26px" />
           </div>
-          <Loader.Item width="80%" height="26px" />
+          <Skeleton.Item width="80%" height="26px" />
           <div className="flex items-center gap-2">
-            <Loader.Item width="50%" height="26px" />
+            <Skeleton.Item width="50%" height="26px" />
           </div>
           <div className="border-0.5 absolute right-3.5 bottom-2 z-10 flex items-center gap-2">
-            <Loader.Item width="100px" height="26px" />
-            <Loader.Item width="50px" height="26px" />
+            <Skeleton.Item width="100px" height="26px" />
+            <Skeleton.Item width="50px" height="26px" />
           </div>
-        </Loader>
+        </Skeleton>
       ) : (
         <>
           <Controller
diff --git a/apps/web/core/components/issues/parent-issues-list-modal.tsx b/apps/web/core/components/issues/parent-issues-list-modal.tsx
index 104a9624..7b90fc21 100644
--- a/apps/web/core/components/issues/parent-issues-list-modal.tsx
+++ b/apps/web/core/components/issues/parent-issues-list-modal.tsx
@@ -15,7 +15,8 @@ import { useTranslation } from "@pace/i18n";
 // types
 import type { ISearchIssueResponse } from "@pace/types";
 // ui
-import { Loader, EModalPosition, EModalWidth, ModalCore } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
+import { EModalPosition, EModalWidth, ModalCore } from "@pace/ui";
 import { generateWorkItemLink, getTabIndex } from "@pace/utils";
 // components
 import { IssueSearchModalEmptyState } from "@/components/core/modals/issue-search-modal-empty-state";
@@ -129,12 +130,12 @@ export function ParentIssuesListModal({
           )}
 
           {isSearching || isLoading ? (
-            <Loader className="space-y-3 p-3">
-              <Loader.Item height="40px" />
-              <Loader.Item height="40px" />
-              <Loader.Item height="40px" />
-              <Loader.Item height="40px" />
-            </Loader>
+            <Skeleton className="space-y-3 p-3">
+              <Skeleton.Item height="40px" />
+              <Skeleton.Item height="40px" />
+              <Skeleton.Item height="40px" />
+              <Skeleton.Item height="40px" />
+            </Skeleton>
           ) : (
             <>
               {issues.length === 0 ? (
diff --git a/apps/web/core/components/issues/peek-overview/loader.tsx b/apps/web/core/components/issues/peek-overview/loader.tsx
index e0bbee42..3c2a5efa 100644
--- a/apps/web/core/components/issues/peek-overview/loader.tsx
+++ b/apps/web/core/components/issues/peek-overview/loader.tsx
@@ -6,7 +6,7 @@
 
 import { ArrowNarrowRightOutline } from "@makeplane/propel/icons";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // hooks
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
@@ -20,7 +20,7 @@ export function IssuePeekOverviewLoader(props: TIssuePeekOverviewLoader) {
   const { isMobile } = usePlatformOS();
 
   return (
-    <Loader className="h-screen w-full space-y-6 overflow-hidden p-5">
+    <Skeleton className="h-screen w-full space-y-6 overflow-hidden p-5">
       <div className="flex items-center justify-between gap-2">
         <div className="flex items-center gap-2">
           <Tooltip label="Close the peek view" disabled={isMobile}>
@@ -28,83 +28,83 @@ export function IssuePeekOverviewLoader(props: TIssuePeekOverviewLoader) {
               <ArrowNarrowRightOutline className="h-4 w-4 text-tertiary hover:text-secondary" />
             </button>
           </Tooltip>
-          <Loader.Item width="30px" height="30px" />
+          <Skeleton.Item width="30px" height="30px" />
         </div>
         <div className="flex items-center gap-2">
-          <Loader.Item width="80px" height="30px" />
-          <Loader.Item width="30px" height="30px" />
-          <Loader.Item width="30px" height="30px" />
-          <Loader.Item width="30px" height="30px" />
+          <Skeleton.Item width="80px" height="30px" />
+          <Skeleton.Item width="30px" height="30px" />
+          <Skeleton.Item width="30px" height="30px" />
+          <Skeleton.Item width="30px" height="30px" />
         </div>
       </div>
 
       {/* issue title and description and comments */}
       <div className="space-y-3">
-        <Loader.Item width="100px" height="20px" />
+        <Skeleton.Item width="100px" height="20px" />
 
         <div className="space-y-1">
-          <Loader.Item width="300px" height="15px" />
-          <Loader.Item width="400px" height="15px" />
+          <Skeleton.Item width="300px" height="15px" />
+          <Skeleton.Item width="400px" height="15px" />
           <div className="flex items-center gap-2">
-            <Loader.Item width="20px" height="15px" />
-            <Loader.Item width="500px" height="15px" />
+            <Skeleton.Item width="20px" height="15px" />
+            <Skeleton.Item width="500px" height="15px" />
           </div>
           <div className="flex items-center gap-2">
-            <Loader.Item width="20px" height="15px" />
-            <Loader.Item width="200px" height="15px" />
+            <Skeleton.Item width="20px" height="15px" />
+            <Skeleton.Item width="200px" height="15px" />
           </div>
-          <Loader.Item width="300px" height="15px" />
-          <Loader.Item width="200px" height="15px" />
+          <Skeleton.Item width="300px" height="15px" />
+          <Skeleton.Item width="200px" height="15px" />
         </div>
 
-        <Loader.Item width="30px" height="30px" />
+        <Skeleton.Item width="30px" height="30px" />
       </div>
 
       {/* sub issues */}
       <div className="flex items-center justify-between gap-2">
-        <Loader.Item width="80px" height="20px" />
-        <Loader.Item width="100px" height="20px" />
+        <Skeleton.Item width="80px" height="20px" />
+        <Skeleton.Item width="100px" height="20px" />
       </div>
 
       {/* attachments */}
       <div className="space-y-3">
-        <Loader.Item width="80px" height="20px" />
+        <Skeleton.Item width="80px" height="20px" />
         <div className="flex items-center gap-2">
-          <Loader.Item width="250px" height="50px" />
-          <Loader.Item width="250px" height="50px" />
+          <Skeleton.Item width="250px" height="50px" />
+          <Skeleton.Item width="250px" height="50px" />
         </div>
       </div>
 
       {/* properties */}
       <div className="space-y-3">
-        <Loader.Item width="80px" height="20px" />
+        <Skeleton.Item width="80px" height="20px" />
         <div className="space-y-2">
           <div className="flex items-center gap-8">
-            <Loader.Item width="150px" height="25px" />
-            <Loader.Item width="150px" height="25px" />
+            <Skeleton.Item width="150px" height="25px" />
+            <Skeleton.Item width="150px" height="25px" />
           </div>
           <div className="flex items-center gap-8">
-            <Loader.Item width="150px" height="25px" />
-            <Loader.Item width="150px" height="25px" />
+            <Skeleton.Item width="150px" height="25px" />
+            <Skeleton.Item width="150px" height="25px" />
           </div>
           <div className="flex items-center gap-8">
-            <Loader.Item width="150px" height="25px" />
-            <Loader.Item width="150px" height="25px" />
+            <Skeleton.Item width="150px" height="25px" />
+            <Skeleton.Item width="150px" height="25px" />
           </div>
           <div className="flex items-center gap-8">
-            <Loader.Item width="150px" height="25px" />
-            <Loader.Item width="150px" height="25px" />
+            <Skeleton.Item width="150px" height="25px" />
+            <Skeleton.Item width="150px" height="25px" />
           </div>
           <div className="flex items-center gap-8">
-            <Loader.Item width="150px" height="25px" />
-            <Loader.Item width="150px" height="25px" />
+            <Skeleton.Item width="150px" height="25px" />
+            <Skeleton.Item width="150px" height="25px" />
           </div>
           <div className="flex items-center gap-8">
-            <Loader.Item width="150px" height="25px" />
-            <Loader.Item width="150px" height="25px" />
+            <Skeleton.Item width="150px" height="25px" />
+            <Skeleton.Item width="150px" height="25px" />
           </div>
         </div>
       </div>
-    </Loader>
+    </Skeleton>
   );
 }
diff --git a/apps/web/core/components/labels/project-setting-label-list.tsx b/apps/web/core/components/labels/project-setting-label-list.tsx
index a54fde3c..ac01b7da 100644
--- a/apps/web/core/components/labels/project-setting-label-list.tsx
+++ b/apps/web/core/components/labels/project-setting-label-list.tsx
@@ -13,7 +13,7 @@ import { useTranslation } from "@pace/i18n";
 import { Button } from "@pace/propel/button";
 import { EmptyStateCompact } from "@pace/propel/empty-state";
 import type { IIssueLabel } from "@pace/types";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 import type { TLabelOperationsCallbacks } from "@/components/labels";
 import {
   CreateUpdateLabelInline,
@@ -160,12 +160,12 @@ export const ProjectSettingsLabelList = observer(function ProjectSettingsLabelLi
           )
         ) : (
           !showLabelForm && (
-            <Loader className="space-y-5">
-              <Loader.Item height="42px" />
-              <Loader.Item height="42px" />
-              <Loader.Item height="42px" />
-              <Loader.Item height="42px" />
-            </Loader>
+            <Skeleton className="space-y-5">
+              <Skeleton.Item height="42px" />
+              <Skeleton.Item height="42px" />
+              <Skeleton.Item height="42px" />
+              <Skeleton.Item height="42px" />
+            </Skeleton>
           )
         )}
       </div>
diff --git a/apps/web/core/components/license/modal/card/checkout-button.tsx b/apps/web/core/components/license/modal/card/checkout-button.tsx
index a53e8ab9..8f5b6649 100644
--- a/apps/web/core/components/license/modal/card/checkout-button.tsx
+++ b/apps/web/core/components/license/modal/card/checkout-button.tsx
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 // pace imports
 import { Button } from "@pace/propel/button";
 import type { EProductSubscriptionEnum, IPaymentProduct, TSubscriptionPrice } from "@pace/types";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // local imports
 import { DiscountInfo } from "./discount-info";
 
@@ -52,9 +52,9 @@ export const PlanCheckoutButton = observer(function PlanCheckoutButton(props: Pr
       <div className="pb-4 text-center">
         <div className="h-9 text-20 font-semibold">
           {isLoading ? (
-            <Loader className="flex flex-col items-center justify-center">
-              <Loader.Item height="36px" width="4rem" />
-            </Loader>
+            <Skeleton className="flex flex-col items-center justify-center">
+              <Skeleton.Item height="36px" width="4rem" />
+            </Skeleton>
           ) : (
             <DiscountInfo
               currency={price.currency}
@@ -68,9 +68,9 @@ export const PlanCheckoutButton = observer(function PlanCheckoutButton(props: Pr
         <div className="text-caption-md-medium text-tertiary">per user per month</div>
       </div>
       {isLoading ? (
-        <Loader className="flex flex-col items-center justify-center">
-          <Loader.Item height="38px" width="14rem" />
-        </Loader>
+        <Skeleton className="flex flex-col items-center justify-center">
+          <Skeleton.Item height="38px" width="14rem" />
+        </Skeleton>
       ) : (
         <div className="flex w-full flex-col items-center justify-center space-y-4">
           <Button
diff --git a/apps/web/core/components/license/modal/card/talk-to-sales.tsx b/apps/web/core/components/license/modal/card/talk-to-sales.tsx
index 22efe9e9..8eeef299 100644
--- a/apps/web/core/components/license/modal/card/talk-to-sales.tsx
+++ b/apps/web/core/components/license/modal/card/talk-to-sales.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 // pace imports
 import { getButtonStyling } from "@pace/propel/button";
 import type { EProductSubscriptionEnum, IPaymentProduct, TSubscriptionPrice } from "@pace/types";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 import { cn } from "@pace/utils";
 // local imports
 import { BasePaidPlanCard } from "./base-paid-plan-card";
@@ -57,9 +57,9 @@ export const TalkToSalesCard = observer(function TalkToSalesCard(props: TalkToSa
       <div className="pb-4 text-center">
         <div className="flex h-9 items-center justify-center text-20 font-semibold">
           {isLoading ? (
-            <Loader className="flex flex-col items-center justify-center">
-              <Loader.Item height="36px" width="4rem" />
-            </Loader>
+            <Skeleton className="flex flex-col items-center justify-center">
+              <Skeleton.Item height="36px" width="4rem" />
+            </Skeleton>
           ) : (
             <>Quote on request</>
           )}
@@ -67,9 +67,9 @@ export const TalkToSalesCard = observer(function TalkToSalesCard(props: TalkToSa
         <div className="text-caption-md-medium text-tertiary">per user per month</div>
       </div>
       {isLoading ? (
-        <Loader className="flex flex-col items-center justify-center">
-          <Loader.Item height="38px" width="14rem" />
-        </Loader>
+        <Skeleton className="flex flex-col items-center justify-center">
+          <Skeleton.Item height="38px" width="14rem" />
+        </Skeleton>
       ) : (
         <div className="flex w-full flex-col items-center justify-center">
           <a href={href} target="_blank" className={cn(getButtonStyling("primary", "lg"), "w-56")} rel="noreferrer">
diff --git a/apps/web/core/components/modules/analytics-sidebar/issue-progress.tsx b/apps/web/core/components/modules/analytics-sidebar/issue-progress.tsx
index 95c52b96..8e644983 100644
--- a/apps/web/core/components/modules/analytics-sidebar/issue-progress.tsx
+++ b/apps/web/core/components/modules/analytics-sidebar/issue-progress.tsx
@@ -13,7 +13,8 @@ import { EEstimateSystem } from "@pace/constants";
 import { useTranslation } from "@pace/i18n";
 import type { TModulePlotType } from "@pace/types";
 import { EIssuesStoreType } from "@pace/types";
-import { CustomSelect, Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
+import { CustomSelect } from "@pace/ui";
 // components
 // constants
 // helpers
diff --git a/apps/web/core/components/modules/analytics-sidebar/root.tsx b/apps/web/core/components/modules/analytics-sidebar/root.tsx
index 9826ef7c..5555d538 100644
--- a/apps/web/core/components/modules/analytics-sidebar/root.tsx
+++ b/apps/web/core/components/modules/analytics-sidebar/root.tsx
@@ -26,7 +26,8 @@ import { ModuleStatusIcon } from "@pace/propel/icons";
 import { TOAST_TYPE, setToast } from "@pace/propel/toast";
 import type { ILinkDetails, IModule, ModuleLink } from "@pace/types";
 // pace ui
-import { Loader, CustomSelect } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
+import { CustomSelect } from "@pace/ui";
 import { TextArea } from "@makeplane/propel/components/text-area";
 // components
 // helpers
@@ -140,17 +141,17 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
 
   if (!moduleDetails)
     return (
-      <Loader>
+      <Skeleton>
         <div className="space-y-2">
-          <Loader.Item height="15px" width="50%" />
-          <Loader.Item height="15px" width="30%" />
+          <Skeleton.Item height="15px" width="50%" />
+          <Skeleton.Item height="15px" width="30%" />
         </div>
         <div className="mt-8 space-y-3">
-          <Loader.Item height="30px" />
-          <Loader.Item height="30px" />
-          <Loader.Item height="30px" />
+          <Skeleton.Item height="30px" />
+          <Skeleton.Item height="30px" />
+          <Skeleton.Item height="30px" />
         </div>
-      </Loader>
+      </Skeleton>
     );
 
   const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
diff --git a/apps/web/core/components/modules/dropdowns/filters/lead.tsx b/apps/web/core/components/modules/dropdowns/filters/lead.tsx
index d079d39f..2724147b 100644
--- a/apps/web/core/components/modules/dropdowns/filters/lead.tsx
+++ b/apps/web/core/components/modules/dropdowns/filters/lead.tsx
@@ -9,7 +9,7 @@ import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 // pace ui
 import { Avatar } from "@makeplane/propel/components/avatar";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // components
 import { getFileURL } from "@pace/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -103,11 +103,11 @@ export const FilterLead = observer(function FilterLead(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Loader className="space-y-2">
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-            </Loader>
+            <Skeleton className="space-y-2">
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+            </Skeleton>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/modules/dropdowns/filters/members.tsx b/apps/web/core/components/modules/dropdowns/filters/members.tsx
index 0fcda9d1..3ec52cdc 100644
--- a/apps/web/core/components/modules/dropdowns/filters/members.tsx
+++ b/apps/web/core/components/modules/dropdowns/filters/members.tsx
@@ -9,7 +9,7 @@ import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 // pace ui
 import { Avatar } from "@makeplane/propel/components/avatar";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // components
 import { getFileURL } from "@pace/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -103,11 +103,11 @@ export const FilterMembers = observer(function FilterMembers(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Loader className="space-y-2">
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-            </Loader>
+            <Skeleton className="space-y-2">
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+            </Skeleton>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/modules/module-card-item.tsx b/apps/web/core/components/modules/module-card-item.tsx
index b90b27be..87baa8e5 100644
--- a/apps/web/core/components/modules/module-card-item.tsx
+++ b/apps/web/core/components/modules/module-card-item.tsx
@@ -15,10 +15,11 @@ import { InfoOutline, UserAltOutline, WorkItemsOutline } from "@makeplane/propel
 import { MODULE_STATUS, EUserPermissions, EUserPermissionsLevel, IS_FAVORITE_MENU_OPEN } from "@pace/constants";
 import { useLocalStorage } from "@pace/hooks";
 import { LinearProgress } from "@makeplane/propel/components/linear-progress";
+import { Card } from "@pace/propel/card";
 import { TOAST_TYPE, setPromiseToast, setToast } from "@pace/propel/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { IModule } from "@pace/types";
-import { Card, FavoriteStar } from "@pace/ui";
+import { FavoriteStar } from "@pace/ui";
 import { getDate, renderFormattedPayloadDate, generateQueryParams } from "@pace/utils";
 // components
 import { DateRangeDropdown } from "@/components/dropdowns/date-range";
diff --git a/apps/web/core/components/onboarding/create-workspace.tsx b/apps/web/core/components/onboarding/create-workspace.tsx
index 1bc56553..e458402f 100644
--- a/apps/web/core/components/onboarding/create-workspace.tsx
+++ b/apps/web/core/components/onboarding/create-workspace.tsx
@@ -17,7 +17,8 @@ import { Button } from "@pace/propel/button";
 import { TOAST_TYPE, setToast } from "@pace/propel/toast";
 import type { IUser, IWorkspace, TOnboardingSteps } from "@pace/types";
 // ui
-import { CustomSelect, Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
+import { CustomSelect } from "@pace/ui";
 import { validateWorkspaceName, validateSlug } from "@pace/utils";
 // hooks
 import { useWorkspace } from "@/hooks/store/use-workspace";
diff --git a/apps/web/core/components/onboarding/invitations.tsx b/apps/web/core/components/onboarding/invitations.tsx
index 55192013..5bf18d01 100644
--- a/apps/web/core/components/onboarding/invitations.tsx
+++ b/apps/web/core/components/onboarding/invitations.tsx
@@ -12,7 +12,7 @@ import { Button } from "@pace/propel/button";
 import type { IWorkspaceMemberInvitation } from "@pace/types";
 // ui
 import { Checkbox } from "@makeplane/propel/components/checkbox";
-import { Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
 import { truncateText } from "@pace/utils";
 // constants
 // helpers
diff --git a/apps/web/core/components/onboarding/invite-members.tsx b/apps/web/core/components/onboarding/invite-members.tsx
index fc2f8259..dd800e0e 100644
--- a/apps/web/core/components/onboarding/invite-members.tsx
+++ b/apps/web/core/components/onboarding/invite-members.tsx
@@ -30,7 +30,7 @@ import { Button } from "@pace/propel/button";
 import { TOAST_TYPE, setToast } from "@pace/propel/toast";
 import type { IUser, IWorkspace } from "@pace/types";
 // ui
-import { Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
 // services
 import { WorkspaceService } from "@pace/services";
 // components
diff --git a/apps/web/core/components/onboarding/profile-setup.tsx b/apps/web/core/components/onboarding/profile-setup.tsx
index da66cfda..e7717623 100644
--- a/apps/web/core/components/onboarding/profile-setup.tsx
+++ b/apps/web/core/components/onboarding/profile-setup.tsx
@@ -17,7 +17,8 @@ import { Button } from "@pace/propel/button";
 import { TOAST_TYPE, setToast } from "@pace/propel/toast";
 import type { IUser, TUserProfile, TOnboardingSteps } from "@pace/types";
 // ui
-import { PasswordStrengthIndicator, Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
+import { PasswordStrengthIndicator } from "@pace/ui";
 // components
 import { cn, getFileURL, getPasswordStrength, validatePersonName } from "@pace/utils";
 import { UserImageUploadModal } from "@/components/core/modals/user-image-upload-modal";
diff --git a/apps/web/core/components/onboarding/steps/team/root.tsx b/apps/web/core/components/onboarding/steps/team/root.tsx
index 62261dda..de4fef3b 100644
--- a/apps/web/core/components/onboarding/steps/team/root.tsx
+++ b/apps/web/core/components/onboarding/steps/team/root.tsx
@@ -27,7 +27,7 @@ import { useTranslation } from "@pace/i18n";
 import { Button } from "@pace/propel/button";
 import { TOAST_TYPE, setToast } from "@pace/propel/toast";
 import { EOnboardingSteps } from "@pace/types";
-import { Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
 // hooks
 import { useWorkspace } from "@/hooks/store/use-workspace";
 // services
diff --git a/apps/web/core/components/onboarding/steps/workspace/create.tsx b/apps/web/core/components/onboarding/steps/workspace/create.tsx
index 40984a4e..b270f027 100644
--- a/apps/web/core/components/onboarding/steps/workspace/create.tsx
+++ b/apps/web/core/components/onboarding/steps/workspace/create.tsx
@@ -14,7 +14,7 @@ import { useTranslation } from "@pace/i18n";
 import { Button } from "@pace/propel/button";
 import { TOAST_TYPE, setToast } from "@pace/propel/toast";
 import type { IUser, IWorkspace } from "@pace/types";
-import { Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
 import { cn, validateWorkspaceName, validateSlug } from "@pace/utils";
 // hooks
 import { useInstance } from "@/hooks/store/use-instance";
diff --git a/apps/web/core/components/onboarding/steps/workspace/join-invites.tsx b/apps/web/core/components/onboarding/steps/workspace/join-invites.tsx
index b1b23057..3adbd163 100644
--- a/apps/web/core/components/onboarding/steps/workspace/join-invites.tsx
+++ b/apps/web/core/components/onboarding/steps/workspace/join-invites.tsx
@@ -10,7 +10,7 @@ import { ROLE } from "@pace/constants";
 import { Button } from "@pace/propel/button";
 import type { IWorkspaceMemberInvitation } from "@pace/types";
 import { Checkbox } from "@makeplane/propel/components/checkbox";
-import { Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
 import { truncateText } from "@pace/utils";
 // constants
 import { WorkspaceLogo } from "@/components/workspace/logo";
diff --git a/apps/web/core/components/pages/loaders/page-content-loader.tsx b/apps/web/core/components/pages/loaders/page-content-loader.tsx
index 5834cdc5..134aca99 100644
--- a/apps/web/core/components/pages/loaders/page-content-loader.tsx
+++ b/apps/web/core/components/pages/loaders/page-content-loader.tsx
@@ -5,7 +5,7 @@
  */
 
 // pace imports
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 import { cn } from "@pace/utils";
 
 type Props = {
@@ -19,69 +19,69 @@ export function PageContentLoader(props: Props) {
     <div className={cn("relative flex size-full flex-col", className)}>
       {/* header */}
       <div className="relative flex h-12 w-full flex-shrink-0 items-center divide-x divide-subtle border-b border-subtle">
-        <Loader className="relative flex items-center gap-1 pr-2">
-          <Loader.Item width="26px" height="26px" />
-          <Loader.Item width="26px" height="26px" />
-          <Loader.Item width="26px" height="26px" />
-          <Loader.Item width="26px" height="26px" />
-          <Loader.Item width="26px" height="26px" />
-          <Loader.Item width="26px" height="26px" />
-          <Loader.Item width="26px" height="26px" />
-        </Loader>
-        <Loader className="relative flex items-center gap-1 px-2">
-          <Loader.Item width="26px" height="26px" />
-          <Loader.Item width="26px" height="26px" />
-        </Loader>
-        <Loader className="relative flex items-center gap-1 px-2">
-          <Loader.Item width="26px" height="26px" />
-          <Loader.Item width="26px" height="26px" />
-        </Loader>
-        <Loader className="relative flex items-center gap-1 pl-2">
-          <Loader.Item width="26px" height="26px" />
-          <Loader.Item width="26px" height="26px" />
-        </Loader>
+        <Skeleton className="relative flex items-center gap-1 pr-2">
+          <Skeleton.Item width="26px" height="26px" />
+          <Skeleton.Item width="26px" height="26px" />
+          <Skeleton.Item width="26px" height="26px" />
+          <Skeleton.Item width="26px" height="26px" />
+          <Skeleton.Item width="26px" height="26px" />
+          <Skeleton.Item width="26px" height="26px" />
+          <Skeleton.Item width="26px" height="26px" />
+        </Skeleton>
+        <Skeleton className="relative flex items-center gap-1 px-2">
+          <Skeleton.Item width="26px" height="26px" />
+          <Skeleton.Item width="26px" height="26px" />
+        </Skeleton>
+        <Skeleton className="relative flex items-center gap-1 px-2">
+          <Skeleton.Item width="26px" height="26px" />
+          <Skeleton.Item width="26px" height="26px" />
+        </Skeleton>
+        <Skeleton className="relative flex items-center gap-1 pl-2">
+          <Skeleton.Item width="26px" height="26px" />
+          <Skeleton.Item width="26px" height="26px" />
+        </Skeleton>
       </div>
 
       {/* content */}
       <div className="relative flex size-full overflow-hidden pt-[64px]">
         {/* editor loader */}
         <div className="size-full py-5">
-          <Loader className="relative space-y-4">
-            <Loader.Item width="50%" height="36px" />
+          <Skeleton className="relative space-y-4">
+            <Skeleton.Item width="50%" height="36px" />
             <div className="space-y-2">
               <div className="py-2">
-                <Loader.Item width="100%" height="36px" />
+                <Skeleton.Item width="100%" height="36px" />
               </div>
-              <Loader.Item width="80%" height="22px" />
+              <Skeleton.Item width="80%" height="22px" />
               <div className="relative flex items-center gap-2">
-                <Loader.Item width="30px" height="30px" />
-                <Loader.Item width="30%" height="22px" />
+                <Skeleton.Item width="30px" height="30px" />
+                <Skeleton.Item width="30%" height="22px" />
               </div>
               <div className="py-2">
-                <Loader.Item width="60%" height="36px" />
+                <Skeleton.Item width="60%" height="36px" />
               </div>
-              <Loader.Item width="70%" height="22px" />
-              <Loader.Item width="30%" height="22px" />
+              <Skeleton.Item width="70%" height="22px" />
+              <Skeleton.Item width="30%" height="22px" />
               <div className="relative flex items-center gap-2">
-                <Loader.Item width="30px" height="30px" />
-                <Loader.Item width="30%" height="22px" />
+                <Skeleton.Item width="30px" height="30px" />
+                <Skeleton.Item width="30%" height="22px" />
               </div>
               <div className="py-2">
-                <Loader.Item width="50%" height="30px" />
+                <Skeleton.Item width="50%" height="30px" />
               </div>
-              <Loader.Item width="100%" height="22px" />
+              <Skeleton.Item width="100%" height="22px" />
               <div className="py-2">
-                <Loader.Item width="30%" height="30px" />
+                <Skeleton.Item width="30%" height="30px" />
               </div>
-              <Loader.Item width="30%" height="22px" />
+              <Skeleton.Item width="30%" height="22px" />
               <div className="relative flex items-center gap-2">
                 <div className="py-2">
-                  <Loader.Item width="30px" height="30px" />
+                  <Skeleton.Item width="30px" height="30px" />
                 </div>
-                <Loader.Item width="30%" height="22px" />
+                <Skeleton.Item width="30%" height="22px" />
               </div>
             </div>
-          </Loader>
+          </Skeleton>
         </div>
       </div>
     </div>
diff --git a/apps/web/core/components/pages/loaders/page-loader.tsx b/apps/web/core/components/pages/loaders/page-loader.tsx
index bda632f1..40293822 100644
--- a/apps/web/core/components/pages/loaders/page-loader.tsx
+++ b/apps/web/core/components/pages/loaders/page-loader.tsx
@@ -5,31 +5,31 @@
  */
 
 import { range } from "lodash-es";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 
 export function PageLoader() {
   return (
     <div className="relative flex h-full w-full flex-col">
       <div className="border-b border-subtle px-3 py-3">
-        <Loader className="relative flex items-center gap-2">
-          <Loader.Item width="200px" height="30px" />
+        <Skeleton className="relative flex items-center gap-2">
+          <Skeleton.Item width="200px" height="30px" />
           <div className="relative ml-auto flex items-center gap-2">
-            <Loader.Item width="100px" height="30px" />
-            <Loader.Item width="100px" height="30px" />
+            <Skeleton.Item width="100px" height="30px" />
+            <Skeleton.Item width="100px" height="30px" />
           </div>
-        </Loader>
+        </Skeleton>
       </div>
       <div>
         {range(10).map((i) => (
-          <Loader key={i} className="relative flex items-center gap-2 border-b border-subtle p-3 py-4">
-            <Loader.Item width={`${250 + 10 * Math.floor(Math.random() * 10)}px`} height="22px" />
+          <Skeleton key={i} className="relative flex items-center gap-2 border-b border-subtle p-3 py-4">
+            <Skeleton.Item width={`${250 + 10 * Math.floor(Math.random() * 10)}px`} height="22px" />
             <div className="relative ml-auto flex items-center gap-2">
-              <Loader.Item width="60px" height="22px" />
-              <Loader.Item width="22px" height="22px" />
-              <Loader.Item width="22px" height="22px" />
-              <Loader.Item width="22px" height="22px" />
+              <Skeleton.Item width="60px" height="22px" />
+              <Skeleton.Item width="22px" height="22px" />
+              <Skeleton.Item width="22px" height="22px" />
+              <Skeleton.Item width="22px" height="22px" />
             </div>
-          </Loader>
+          </Skeleton>
         ))}
       </div>
     </div>
diff --git a/apps/web/core/components/pages/version/editor.tsx b/apps/web/core/components/pages/version/editor.tsx
index 6dbbb531..899e45e5 100644
--- a/apps/web/core/components/pages/version/editor.tsx
+++ b/apps/web/core/components/pages/version/editor.tsx
@@ -9,7 +9,7 @@ import { useParams } from "@/app/hooks/navigation";
 // pace imports
 import type { TDisplayConfig } from "@pace/editor";
 import type { JSONContent, TPageVersion } from "@pace/types";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 import { isJSONContentEmpty } from "@pace/utils";
 // components
 import { DocumentEditor } from "@/components/editor/document/editor";
@@ -45,42 +45,42 @@ export const PagesVersionEditor = observer(function PagesVersionEditor(props: TV
   if (!versionDetails)
     return (
       <div className="size-full px-5">
-        <Loader className="relative space-y-4">
-          <Loader.Item width="50%" height="36px" />
+        <Skeleton className="relative space-y-4">
+          <Skeleton.Item width="50%" height="36px" />
           <div className="space-y-2">
             <div className="py-2">
-              <Loader.Item width="100%" height="36px" />
+              <Skeleton.Item width="100%" height="36px" />
             </div>
-            <Loader.Item width="80%" height="22px" />
+            <Skeleton.Item width="80%" height="22px" />
             <div className="relative flex items-center gap-2">
-              <Loader.Item width="30px" height="30px" />
-              <Loader.Item width="30%" height="22px" />
+              <Skeleton.Item width="30px" height="30px" />
+              <Skeleton.Item width="30%" height="22px" />
             </div>
             <div className="py-2">
-              <Loader.Item width="60%" height="36px" />
+              <Skeleton.Item width="60%" height="36px" />
             </div>
-            <Loader.Item width="70%" height="22px" />
-            <Loader.Item width="30%" height="22px" />
+            <Skeleton.Item width="70%" height="22px" />
+            <Skeleton.Item width="30%" height="22px" />
             <div className="relative flex items-center gap-2">
-              <Loader.Item width="30px" height="30px" />
-              <Loader.Item width="30%" height="22px" />
+              <Skeleton.Item width="30px" height="30px" />
+              <Skeleton.Item width="30%" height="22px" />
             </div>
             <div className="py-2">
-              <Loader.Item width="50%" height="30px" />
+              <Skeleton.Item width="50%" height="30px" />
             </div>
-            <Loader.Item width="100%" height="22px" />
+            <Skeleton.Item width="100%" height="22px" />
             <div className="py-2">
-              <Loader.Item width="30%" height="30px" />
+              <Skeleton.Item width="30%" height="30px" />
             </div>
-            <Loader.Item width="30%" height="22px" />
+            <Skeleton.Item width="30%" height="22px" />
             <div className="relative flex items-center gap-2">
               <div className="py-2">
-                <Loader.Item width="30px" height="30px" />
+                <Skeleton.Item width="30px" height="30px" />
               </div>
-              <Loader.Item width="30%" height="22px" />
+              <Skeleton.Item width="30%" height="22px" />
             </div>
           </div>
-        </Loader>
+        </Skeleton>
       </div>
     );
 
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/cycles-menu.tsx b/apps/web/core/components/power-k/ui/pages/context-based/work-item/cycles-menu.tsx
index d5493e26..5a57981c 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/work-item/cycles-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/cycles-menu.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 // pace types
 import type { ICycle, TIssue } from "@pace/types";
-import { Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
 // components
 import { PowerKCyclesMenu } from "@/components/power-k/menus/cycles";
 // hooks
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/estimates-menu.tsx b/apps/web/core/components/power-k/ui/pages/context-based/work-item/estimates-menu.tsx
index f5a5e9b0..24185e95 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/work-item/estimates-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/estimates-menu.tsx
@@ -11,7 +11,7 @@ import { Triangle } from "lucide-react";
 import { useTranslation } from "@pace/i18n";
 import { EEstimateSystem } from "@pace/types";
 import type { TIssue } from "@pace/types";
-import { Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
 import { convertMinutesToHoursMinutesString } from "@pace/utils";
 // hooks
 import { useEstimate, useProjectEstimates } from "@/hooks/store/estimates";
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/labels-menu.tsx b/apps/web/core/components/power-k/ui/pages/context-based/work-item/labels-menu.tsx
index e53cdbaa..cef5b7d4 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/work-item/labels-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/labels-menu.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 // pace types
 import type { IIssueLabel, TIssue } from "@pace/types";
-import { Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
 // components
 import { PowerKLabelsMenu } from "@/components/power-k/menus/labels";
 // hooks
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/modules-menu.tsx b/apps/web/core/components/power-k/ui/pages/context-based/work-item/modules-menu.tsx
index a76e7bbe..412c2656 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/work-item/modules-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/modules-menu.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 // pace types
 import type { IModule, TIssue } from "@pace/types";
-import { Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
 // components
 import { PowerKModulesMenu } from "@/components/power-k/menus/modules";
 // hooks
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/states-menu.tsx b/apps/web/core/components/power-k/ui/pages/context-based/work-item/states-menu.tsx
index 9e7cd457..aaf89c87 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/work-item/states-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/states-menu.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 // pace types
 import { useParams } from "@/app/hooks/navigation";
 import type { TIssue } from "@pace/types";
-import { Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
 // hooks
 import { useProjectState } from "@/hooks/store/use-project-state";
 // local imports
diff --git a/apps/web/core/components/power-k/ui/pages/open-entity/project-cycles-menu.tsx b/apps/web/core/components/power-k/ui/pages/open-entity/project-cycles-menu.tsx
index dd02d3db..f1e9a883 100644
--- a/apps/web/core/components/power-k/ui/pages/open-entity/project-cycles-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/open-entity/project-cycles-menu.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 // pace types
 import type { ICycle } from "@pace/types";
-import { Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
 // components
 import type { TPowerKContext } from "@/components/power-k/core/types";
 import { PowerKCyclesMenu } from "@/components/power-k/menus/cycles";
diff --git a/apps/web/core/components/power-k/ui/pages/open-entity/project-modules-menu.tsx b/apps/web/core/components/power-k/ui/pages/open-entity/project-modules-menu.tsx
index 5a8251b2..5bdedf57 100644
--- a/apps/web/core/components/power-k/ui/pages/open-entity/project-modules-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/open-entity/project-modules-menu.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 // pace types
 import type { IModule } from "@pace/types";
-import { Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
 // components
 import type { TPowerKContext } from "@/components/power-k/core/types";
 import { PowerKModulesMenu } from "@/components/power-k/menus/modules";
diff --git a/apps/web/core/components/power-k/ui/pages/open-entity/project-views-menu.tsx b/apps/web/core/components/power-k/ui/pages/open-entity/project-views-menu.tsx
index 1c525f57..c637e50b 100644
--- a/apps/web/core/components/power-k/ui/pages/open-entity/project-views-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/open-entity/project-views-menu.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 // pace types
 import type { IProjectView } from "@pace/types";
-import { Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
 // components
 import type { TPowerKContext } from "@/components/power-k/core/types";
 // hooks
diff --git a/apps/web/core/components/power-k/ui/pages/open-entity/projects-menu.tsx b/apps/web/core/components/power-k/ui/pages/open-entity/projects-menu.tsx
index 9e7327b4..c1633005 100644
--- a/apps/web/core/components/power-k/ui/pages/open-entity/projects-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/open-entity/projects-menu.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 // pace types
 import type { IPartialProject } from "@pace/types";
-import { Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
 // components
 import { PowerKProjectsMenu } from "@/components/power-k/menus/projects";
 // hooks
diff --git a/apps/web/core/components/power-k/ui/pages/open-entity/workspaces-menu.tsx b/apps/web/core/components/power-k/ui/pages/open-entity/workspaces-menu.tsx
index 6c450a08..33091425 100644
--- a/apps/web/core/components/power-k/ui/pages/open-entity/workspaces-menu.tsx
+++ b/apps/web/core/components/power-k/ui/pages/open-entity/workspaces-menu.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 // pace types
 import type { IWorkspace } from "@pace/types";
-import { Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
 // components
 import { PowerKWorkspacesMenu } from "@/components/power-k/menus/workspaces";
 // hooks
diff --git a/apps/web/core/components/profile/overview/activity.tsx b/apps/web/core/components/profile/overview/activity.tsx
index de804cc4..3e3c06e4 100644
--- a/apps/web/core/components/profile/overview/activity.tsx
+++ b/apps/web/core/components/profile/overview/activity.tsx
@@ -10,8 +10,9 @@ import useSWR from "swr";
 // ui
 import { useTranslation } from "@pace/i18n";
 import { Avatar } from "@pace/propel/avatar";
+import { Card } from "@pace/propel/card";
 import { EmptyStateCompact } from "@pace/propel/empty-state";
-import { Loader, Card } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 import { calculateTimeAgo, getFileURL } from "@pace/utils";
 // components
 import { ActivityMessage, IssueLink } from "@/components/core/activity";
@@ -46,13 +47,13 @@ export const ProfileActivity = observer(function ProfileActivity() {
       <h3 className="text-16 font-medium">{t("profile.stats.recent_activity.title")}</h3>
       <Card>
         {!userProfileActivity ? (
-          <Loader className="space-y-5">
-            <Loader.Item height="40px" />
-            <Loader.Item height="40px" />
-            <Loader.Item height="40px" />
-            <Loader.Item height="40px" />
-            <Loader.Item height="40px" />
-          </Loader>
+          <Skeleton className="space-y-5">
+            <Skeleton.Item height="40px" />
+            <Skeleton.Item height="40px" />
+            <Skeleton.Item height="40px" />
+            <Skeleton.Item height="40px" />
+            <Skeleton.Item height="40px" />
+          </Skeleton>
         ) : Array.isArray(userProfileActivity.results) && userProfileActivity.results.length > 0 ? (
           <div className="space-y-5">
             {userProfileActivity.results.map((activity) => (
diff --git a/apps/web/core/components/profile/overview/priority-distribution.tsx b/apps/web/core/components/profile/overview/priority-distribution.tsx
index d74aabee..2d2b4eb6 100644
--- a/apps/web/core/components/profile/overview/priority-distribution.tsx
+++ b/apps/web/core/components/profile/overview/priority-distribution.tsx
@@ -7,9 +7,10 @@
 import { lazy, Suspense } from "react";
 // pace imports
 import { useTranslation } from "@pace/i18n";
+import { Card } from "@pace/propel/card";
 import { EmptyStateCompact } from "@pace/propel/empty-state";
 import type { IUserProfileData } from "@pace/types";
-import { Loader, Card } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 import { capitalizeFirstLetter } from "@pace/utils";
 
 const BarChart = lazy(function BarChart() {
@@ -40,9 +41,9 @@ export function ProfilePriorityDistribution({ userProfile }: Props) {
           {userProfile.priority_distribution.length > 0 ? (
             <Suspense
               fallback={
-                <Loader className="h-[300px] w-full">
-                  <Loader.Item width="100%" height="100%" />
-                </Loader>
+                <Skeleton className="h-[300px] w-full">
+                  <Skeleton.Item width="100%" height="100%" />
+                </Skeleton>
               }
             >
               <BarChart
@@ -86,13 +87,13 @@ export function ProfilePriorityDistribution({ userProfile }: Props) {
         </Card>
       ) : (
         <div className="grid place-items-center p-7">
-          <Loader className="flex items-end gap-12">
-            <Loader.Item width="30px" height="200px" />
-            <Loader.Item width="30px" height="150px" />
-            <Loader.Item width="30px" height="250px" />
-            <Loader.Item width="30px" height="150px" />
-            <Loader.Item width="30px" height="100px" />
-          </Loader>
+          <Skeleton className="flex items-end gap-12">
+            <Skeleton.Item width="30px" height="200px" />
+            <Skeleton.Item width="30px" height="150px" />
+            <Skeleton.Item width="30px" height="250px" />
+            <Skeleton.Item width="30px" height="150px" />
+            <Skeleton.Item width="30px" height="100px" />
+          </Skeleton>
         </div>
       )}
     </div>
diff --git a/apps/web/core/components/profile/overview/state-distribution.tsx b/apps/web/core/components/profile/overview/state-distribution.tsx
index 24728967..48ee9b39 100644
--- a/apps/web/core/components/profile/overview/state-distribution.tsx
+++ b/apps/web/core/components/profile/overview/state-distribution.tsx
@@ -8,9 +8,10 @@ import { lazy, Suspense } from "react";
 // pace imports
 import { STATE_GROUPS } from "@pace/constants";
 import { useTranslation } from "@pace/i18n";
+import { Card } from "@pace/propel/card";
 import { EmptyStateCompact } from "@pace/propel/empty-state";
+import { Skeleton } from "@pace/propel/skeleton";
 import type { IUserProfileData, IUserStateDistribution } from "@pace/types";
-import { Loader, Card } from "@pace/ui";
 import { capitalizeFirstLetter } from "@pace/utils";
 
 const PieChart = lazy(function PieChart() {
@@ -36,9 +37,9 @@ export function ProfileStateDistribution({ stateDistribution, userProfile }: Pro
           <div className="grid h-[300px] w-full grid-cols-1 gap-x-6 md:grid-cols-2">
             <Suspense
               fallback={
-                <Loader className="size-full">
-                  <Loader.Item width="100%" height="100%" />
-                </Loader>
+                <Skeleton className="size-full">
+                  <Skeleton.Item width="100%" height="100%" />
+                </Skeleton>
               }
             >
               <PieChart
diff --git a/apps/web/core/components/profile/overview/stats.tsx b/apps/web/core/components/profile/overview/stats.tsx
index 39703e7a..54a0e604 100644
--- a/apps/web/core/components/profile/overview/stats.tsx
+++ b/apps/web/core/components/profile/overview/stats.tsx
@@ -9,10 +9,11 @@ import { useParams } from "@/app/hooks/navigation";
 
 // ui
 import { useTranslation } from "@pace/i18n";
+import { Card, ECardDirection, ECardSpacing } from "@pace/propel/card";
 import { LayerStackIcon } from "@pace/propel/icons";
 import { AddOutline, UserOutline } from "@makeplane/propel/icons";
 import type { IUserProfileData } from "@pace/types";
-import { Loader, Card, ECardSpacing, ECardDirection } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // types
 
 type Props = {
@@ -65,11 +66,11 @@ export function ProfileStats({ userProfile }: Props) {
           ))}
         </div>
       ) : (
-        <Loader className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-          <Loader.Item height="80px" />
-          <Loader.Item height="80px" />
-          <Loader.Item height="80px" />
-        </Loader>
+        <Skeleton className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+          <Skeleton.Item height="80px" />
+          <Skeleton.Item height="80px" />
+          <Skeleton.Item height="80px" />
+        </Skeleton>
       )}
     </div>
   );
diff --git a/apps/web/core/components/profile/overview/workload.tsx b/apps/web/core/components/profile/overview/workload.tsx
index 89a8d7e0..8c48fda3 100644
--- a/apps/web/core/components/profile/overview/workload.tsx
+++ b/apps/web/core/components/profile/overview/workload.tsx
@@ -8,8 +8,8 @@
 import { STATE_GROUPS } from "@pace/constants";
 // types
 import { useTranslation } from "@pace/i18n";
+import { Card, ECardDirection, ECardSpacing } from "@pace/propel/card";
 import type { IUserStateDistribution } from "@pace/types";
-import { Card, ECardDirection, ECardSpacing } from "@pace/ui";
 // constants
 
 type Props = {
diff --git a/apps/web/core/components/profile/sidebar.tsx b/apps/web/core/components/profile/sidebar.tsx
index 9318a04f..9098a44e 100644
--- a/apps/web/core/components/profile/sidebar.tsx
+++ b/apps/web/core/components/profile/sidebar.tsx
@@ -16,7 +16,7 @@ import { IconButton } from "@pace/propel/icon-button";
 import { ChevronDownOutline, EditOutline } from "@makeplane/propel/icons";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { IUserProfileProjectSegregation } from "@pace/types";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 import { cn, renderFormattedDate, getFileURL } from "@pace/utils";
 // components
 import { CoverImage } from "@/components/common/cover-image";
@@ -280,16 +280,16 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
           </div>
         </>
       ) : (
-        <Loader className="space-y-7 px-5">
-          <Loader.Item height="130px" />
+        <Skeleton className="space-y-7 px-5">
+          <Skeleton.Item height="130px" />
           <div className="space-y-5">
-            <Loader.Item height="20px" />
-            <Loader.Item height="20px" />
-            <Loader.Item height="20px" />
-            <Loader.Item height="20px" />
-            <Loader.Item height="20px" />
+            <Skeleton.Item height="20px" />
+            <Skeleton.Item height="20px" />
+            <Skeleton.Item height="20px" />
+            <Skeleton.Item height="20px" />
+            <Skeleton.Item height="20px" />
           </div>
-        </Loader>
+        </Skeleton>
       )}
     </div>
   );
diff --git a/apps/web/core/components/project-states/loader.tsx b/apps/web/core/components/project-states/loader.tsx
index 77e495ca..a4ba149b 100644
--- a/apps/web/core/components/project-states/loader.tsx
+++ b/apps/web/core/components/project-states/loader.tsx
@@ -4,15 +4,15 @@
  * See the LICENSE file for details.
  */
 
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 
 export function ProjectStateLoader() {
   return (
-    <Loader className="space-y-5 md:w-2/3">
-      <Loader.Item height="40px" />
-      <Loader.Item height="40px" />
-      <Loader.Item height="40px" />
-      <Loader.Item height="40px" />
-    </Loader>
+    <Skeleton className="space-y-5 md:w-2/3">
+      <Skeleton.Item height="40px" />
+      <Skeleton.Item height="40px" />
+      <Skeleton.Item height="40px" />
+      <Skeleton.Item height="40px" />
+    </Skeleton>
   );
 }
diff --git a/apps/web/core/components/project/dropdowns/filters/lead.tsx b/apps/web/core/components/project/dropdowns/filters/lead.tsx
index d079d39f..2724147b 100644
--- a/apps/web/core/components/project/dropdowns/filters/lead.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/lead.tsx
@@ -9,7 +9,7 @@ import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 // pace ui
 import { Avatar } from "@makeplane/propel/components/avatar";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // components
 import { getFileURL } from "@pace/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -103,11 +103,11 @@ export const FilterLead = observer(function FilterLead(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Loader className="space-y-2">
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-            </Loader>
+            <Skeleton className="space-y-2">
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+            </Skeleton>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/project/dropdowns/filters/members.tsx b/apps/web/core/components/project/dropdowns/filters/members.tsx
index 0fcda9d1..3ec52cdc 100644
--- a/apps/web/core/components/project/dropdowns/filters/members.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/members.tsx
@@ -9,7 +9,7 @@ import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 // pace ui
 import { Avatar } from "@makeplane/propel/components/avatar";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // components
 import { getFileURL } from "@pace/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -103,11 +103,11 @@ export const FilterMembers = observer(function FilterMembers(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Loader className="space-y-2">
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-              <Loader.Item height="20px" />
-            </Loader>
+            <Skeleton className="space-y-2">
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+              <Skeleton.Item height="20px" />
+            </Skeleton>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/project/form-loader.tsx b/apps/web/core/components/project/form-loader.tsx
index f96f6b7b..7a84664f 100644
--- a/apps/web/core/components/project/form-loader.tsx
+++ b/apps/web/core/components/project/form-loader.tsx
@@ -5,61 +5,61 @@
  */
 
 // components
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 
 export function ProjectDetailsFormLoader() {
   return (
     <>
       <div className="relative mt-6 h-44 w-full">
-        <Loader>
-          <Loader.Item height="auto" width="46px" />
-        </Loader>
+        <Skeleton>
+          <Skeleton.Item height="auto" width="46px" />
+        </Skeleton>
         <div className="absolute bottom-4 flex w-full items-end justify-between gap-3 px-4">
           <div className="flex flex-grow gap-3 truncate">
             <div className="flex h-[52px] w-[52px] flex-shrink-0 items-center justify-center rounded-lg bg-surface-2">
-              <Loader>
-                <Loader.Item height="46px" width="46px" />
-              </Loader>
+              <Skeleton>
+                <Skeleton.Item height="46px" width="46px" />
+              </Skeleton>
             </div>
           </div>
           <div className="flex flex-shrink-0 justify-center">
-            <Loader>
-              <Loader.Item height="32px" width="108px" />
-            </Loader>
+            <Skeleton>
+              <Skeleton.Item height="32px" width="108px" />
+            </Skeleton>
           </div>
         </div>
       </div>
       <div className="my-8 flex flex-col gap-8">
         <div className="flex flex-col gap-1">
           <h4 className="text-13">Project name</h4>
-          <Loader>
-            <Loader.Item height="46px" width="100%" />
-          </Loader>
+          <Skeleton>
+            <Skeleton.Item height="46px" width="100%" />
+          </Skeleton>
         </div>
         <div className="flex flex-col gap-1">
           <h4 className="text-13">Description</h4>
-          <Loader className="w-full">
-            <Loader.Item height="102px" width="full" />
-          </Loader>
+          <Skeleton className="w-full">
+            <Skeleton.Item height="102px" width="full" />
+          </Skeleton>
         </div>
         <div className="flex w-full items-center justify-between gap-10">
           <div className="flex w-1/2 flex-col gap-1">
             <h4 className="text-13">Identifier</h4>
-            <Loader>
-              <Loader.Item height="36px" width="100%" />
-            </Loader>
+            <Skeleton>
+              <Skeleton.Item height="36px" width="100%" />
+            </Skeleton>
           </div>
           <div className="flex w-1/2 flex-col gap-1">
             <h4 className="text-13">Network</h4>
-            <Loader className="w-full">
-              <Loader.Item height="46px" width="100%" />
-            </Loader>
+            <Skeleton className="w-full">
+              <Skeleton.Item height="46px" width="100%" />
+            </Skeleton>
           </div>
         </div>
         <div className="flex items-center justify-between py-2">
-          <Loader className="mt-2 w-full">
-            <Loader.Item height="34px" width="100px" />
-          </Loader>
+          <Skeleton className="mt-2 w-full">
+            <Skeleton.Item height="34px" width="100px" />
+          </Skeleton>
         </div>
       </div>
     </>
diff --git a/apps/web/core/components/project/project-settings-member-defaults.tsx b/apps/web/core/components/project/project-settings-member-defaults.tsx
index 45048a54..a4b47c8d 100644
--- a/apps/web/core/components/project/project-settings-member-defaults.tsx
+++ b/apps/web/core/components/project/project-settings-member-defaults.tsx
@@ -15,7 +15,7 @@ import { useTranslation } from "@pace/i18n";
 import { TOAST_TYPE, setToast } from "@pace/propel/toast";
 import type { IProject, IUserLite, IWorkspace } from "@pace/types";
 import { Switch } from "@makeplane/propel/components/switch";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 // constants
 import { PROJECT_DETAILS } from "@pace/constants";
 // hooks
@@ -156,9 +156,9 @@ export const ProjectSettingsMemberDefaults = observer(function ProjectSettingsMe
             )}
           />
         ) : (
-          <Loader className="h-9 w-full">
-            <Loader.Item width="100%" height="100%" />
-          </Loader>
+          <Skeleton className="h-9 w-full">
+            <Skeleton.Item width="100%" height="100%" />
+          </Skeleton>
         )}
       </DefaultSettingItem>
       <DefaultSettingItem title="Default Assignee" description="Select the default assignee for the project.">
@@ -177,9 +177,9 @@ export const ProjectSettingsMemberDefaults = observer(function ProjectSettingsMe
             )}
           />
         ) : (
-          <Loader className="h-9 w-full">
-            <Loader.Item width="100%" height="100%" />
-          </Loader>
+          <Skeleton className="h-9 w-full">
+            <Skeleton.Item width="100%" height="100%" />
+          </Skeleton>
         )}
       </DefaultSettingItem>
       {currentProjectDetails && (
diff --git a/apps/web/core/components/project/publish-project/modal.tsx b/apps/web/core/components/project/publish-project/modal.tsx
index c72e7e47..103a75ec 100644
--- a/apps/web/core/components/project/publish-project/modal.tsx
+++ b/apps/web/core/components/project/publish-project/modal.tsx
@@ -17,7 +17,8 @@ import { TOAST_TYPE, setToast } from "@pace/propel/toast";
 import type { TProjectPublishLayouts, TProjectPublishSettings } from "@pace/types";
 // ui
 import { Switch } from "@makeplane/propel/components/switch";
-import { Loader, CustomSelect, ModalCore, EModalWidth } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
+import { CustomSelect, ModalCore, EModalWidth } from "@pace/ui";
 // helpers
 import { copyTextToClipboard } from "@pace/utils";
 // hooks
@@ -196,12 +197,12 @@ export const PublishProjectModal = observer(function PublishProjectModal(props:
 
         {/* content */}
         {fetchSettingsLoader ? (
-          <Loader className="space-y-4 px-5">
-            <Loader.Item height="30px" />
-            <Loader.Item height="30px" />
-            <Loader.Item height="30px" />
-            <Loader.Item height="30px" />
-          </Loader>
+          <Skeleton className="space-y-4 px-5">
+            <Skeleton.Item height="30px" />
+            <Skeleton.Item height="30px" />
+            <Skeleton.Item height="30px" />
+            <Skeleton.Item height="30px" />
+          </Skeleton>
         ) : (
           <div className="space-y-4 px-5">
             {isProjectPublished && projectPublishSettings && (
diff --git a/apps/web/core/components/readonly/state.tsx b/apps/web/core/components/readonly/state.tsx
index 299c0106..9cf72d8d 100644
--- a/apps/web/core/components/readonly/state.tsx
+++ b/apps/web/core/components/readonly/state.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 // pace imports
 import { useTranslation } from "@pace/i18n";
 import { StateGroupIcon } from "@pace/propel/icons";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 import { cn } from "@pace/utils";
 // hooks
 import { useProjectState } from "@/hooks/store/use-project-state";
@@ -52,10 +52,10 @@ export const ReadonlyState = observer(function ReadonlyState(props: TReadonlySta
 
   if (stateLoader) {
     return (
-      <Loader className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
-        <Loader.Item height="16px" width="16px" className="rounded-full" />
-        <Loader.Item height="16px" width="50px" />
-      </Loader>
+      <Skeleton className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
+        <Skeleton.Item height="16px" width="16px" className="rounded-full" />
+        <Skeleton.Item height="16px" width="50px" />
+      </Skeleton>
     );
   }
 
diff --git a/apps/web/core/components/rich-filters/filter-item/loader.tsx b/apps/web/core/components/rich-filters/filter-item/loader.tsx
index 3ef59452..784b9b2d 100644
--- a/apps/web/core/components/rich-filters/filter-item/loader.tsx
+++ b/apps/web/core/components/rich-filters/filter-item/loader.tsx
@@ -4,12 +4,12 @@
  * See the LICENSE file for details.
  */
 
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 
 export function FilterItemLoader() {
   return (
-    <Loader>
-      <Loader.Item height="28px" width="180px" />
-    </Loader>
+    <Skeleton>
+      <Skeleton.Item height="28px" width="180px" />
+    </Skeleton>
   );
 }
diff --git a/apps/web/core/components/rich-filters/filters-row.tsx b/apps/web/core/components/rich-filters/filters-row.tsx
index 0ffa8b16..1ce69afd 100644
--- a/apps/web/core/components/rich-filters/filters-row.tsx
+++ b/apps/web/core/components/rich-filters/filters-row.tsx
@@ -12,7 +12,9 @@ import { Transition } from "@headlessui/react";
 import { Button } from "@pace/propel/button";
 import type { IFilterInstance } from "@pace/shared-state";
 import type { TExternalFilter, TFilterProperty } from "@pace/types";
-import { cn, EHeaderVariant, Header, Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
+import { EHeaderVariant, Header } from "@pace/ui";
+import { cn } from "@pace/utils";
 // local imports
 import type { TAddFilterButtonProps } from "./add-filters/button";
 import { AddFilterButton } from "./add-filters/button";
@@ -128,9 +130,9 @@ export const FiltersRow = observer(function FiltersRow<K extends TFilterProperty
   if (!filter.configManager.areConfigsReady && !hasAnyConditions) {
     return (
       <RowTransition show={filter.isVisible}>
-        <Loader>
-          <Loader.Item height="44px" width="100%" className={cn({ "rounded-none": variant === "header" })} />
-        </Loader>
+        <Skeleton>
+          <Skeleton.Item height="44px" width="100%" className={cn({ "rounded-none": variant === "header" })} />
+        </Skeleton>
       </RowTransition>
     );
   }
diff --git a/apps/web/core/components/settings/heading.tsx b/apps/web/core/components/settings/heading.tsx
index 2bbd7a27..f90e0cdc 100644
--- a/apps/web/core/components/settings/heading.tsx
+++ b/apps/web/core/components/settings/heading.tsx
@@ -5,7 +5,7 @@
  */
 
 // pace imports
-import { cn } from "@pace/ui";
+import { cn } from "@pace/utils";
 
 type Props = {
   className?: string;
diff --git a/apps/web/core/components/settings/profile/heading.tsx b/apps/web/core/components/settings/profile/heading.tsx
index a6938f49..24bdfaf1 100644
--- a/apps/web/core/components/settings/profile/heading.tsx
+++ b/apps/web/core/components/settings/profile/heading.tsx
@@ -5,7 +5,7 @@
  */
 
 // pace imports
-import { cn } from "@pace/ui";
+import { cn } from "@pace/utils";
 
 type Props = {
   className?: string;
diff --git a/apps/web/core/components/stickies/layout/stickies-infinite.tsx b/apps/web/core/components/stickies/layout/stickies-infinite.tsx
index c773a49c..dc7689e9 100644
--- a/apps/web/core/components/stickies/layout/stickies-infinite.tsx
+++ b/apps/web/core/components/stickies/layout/stickies-infinite.tsx
@@ -9,7 +9,8 @@ import { observer } from "mobx-react";
 import { useParams } from "@/app/hooks/navigation";
 import useSWR from "swr";
 import { STICKIES_PER_PAGE } from "@pace/constants";
-import { ContentWrapper, Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
+import { ContentWrapper } from "@pace/ui";
 import { cn } from "@pace/utils";
 import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
 import { useSticky } from "@/hooks/use-stickies";
@@ -55,9 +56,9 @@ export const StickiesInfinite = observer(function StickiesInfinite() {
               id="intersection-element"
             >
               <div className="flex min-h-[300px] w-full rounded-sm">
-                <Loader className="h-full w-full">
-                  <Loader.Item height="100%" width="100%" />
-                </Loader>
+                <Skeleton className="h-full w-full">
+                  <Skeleton.Item height="100%" width="100%" />
+                </Skeleton>
               </div>
             </div>
           )
diff --git a/apps/web/core/components/stickies/layout/stickies-loader.tsx b/apps/web/core/components/stickies/layout/stickies-loader.tsx
index 764c42fa..deebed3c 100644
--- a/apps/web/core/components/stickies/layout/stickies-loader.tsx
+++ b/apps/web/core/components/stickies/layout/stickies-loader.tsx
@@ -5,48 +5,48 @@
  */
 
 // pace ui
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 
 export function StickiesLoader() {
   return (
     <div className="grid grid-cols-4 gap-4 overflow-scroll pb-2">
       {Array.from({ length: 4 }).map((_, index) => (
-        <Loader key={index} className="space-y-5 rounded-sm border border-subtle p-3">
+        <Skeleton key={index} className="space-y-5 rounded-sm border border-subtle p-3">
           <div className="space-y-2">
-            <Loader.Item height="20px" />
-            <Loader.Item height="15px" width="75%" />
+            <Skeleton.Item height="20px" />
+            <Skeleton.Item height="15px" width="75%" />
           </div>
           <div className="space-y-2">
             <div className="flex items-center gap-2">
-              <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
-              <Loader.Item height="15px" width="100%" />
+              <Skeleton.Item height="15px" width="15px" className="flex-shrink-0" />
+              <Skeleton.Item height="15px" width="100%" />
             </div>
             <div className="flex items-center gap-2">
-              <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
-              <Loader.Item height="15px" width="75%" />
+              <Skeleton.Item height="15px" width="15px" className="flex-shrink-0" />
+              <Skeleton.Item height="15px" width="75%" />
             </div>
             <div className="flex items-center gap-2">
-              <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
-              <Loader.Item height="15px" width="90%" />
+              <Skeleton.Item height="15px" width="15px" className="flex-shrink-0" />
+              <Skeleton.Item height="15px" width="90%" />
             </div>
             <div className="flex items-center gap-2">
-              <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
-              <Loader.Item height="15px" width="60%" />
+              <Skeleton.Item height="15px" width="15px" className="flex-shrink-0" />
+              <Skeleton.Item height="15px" width="60%" />
             </div>
             <div className="flex items-center gap-2">
-              <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
-              <Loader.Item height="15px" width="50%" />
+              <Skeleton.Item height="15px" width="15px" className="flex-shrink-0" />
+              <Skeleton.Item height="15px" width="50%" />
             </div>
           </div>
           <div className="flex items-center justify-between gap-2">
             <div className="flex items-center gap-2">
-              <Loader.Item height="25px" width="25px" />
-              <Loader.Item height="25px" width="25px" />
-              <Loader.Item height="25px" width="25px" />
+              <Skeleton.Item height="25px" width="25px" />
+              <Skeleton.Item height="25px" width="25px" />
+              <Skeleton.Item height="25px" width="25px" />
             </div>
-            <Loader.Item height="25px" width="25px" className="flex-shrink-0" />
+            <Skeleton.Item height="25px" width="25px" className="flex-shrink-0" />
           </div>
-        </Loader>
+        </Skeleton>
       ))}
     </div>
   );
diff --git 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
index cdca18b8..c38a06b6 100644
--- 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
@@ -6,7 +6,7 @@
 
 import React from "react";
 // ui
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 import { InboxSidebarLoader } from "./inbox-sidebar-loader";
 
 export function InboxLayoutLoader() {
@@ -16,15 +16,15 @@ export function InboxLayoutLoader() {
         <InboxSidebarLoader />
       </div>
       <div className="w-4/6">
-        <Loader className="flex h-full flex-col gap-5 p-5">
+        <Skeleton className="flex h-full flex-col 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%" />
+            <Skeleton.Item height="30px" width="40%" />
+            <Skeleton.Item height="15px" width="60%" />
+            <Skeleton.Item height="15px" width="60%" />
+            <Skeleton.Item height="15px" width="40%" />
           </div>
-          <Loader.Item height="150px" />
-        </Loader>
+          <Skeleton.Item height="150px" />
+        </Skeleton>
       </div>
     </div>
   );
diff --git a/apps/web/core/components/workspace-notifications/sidebar/header/options/root.tsx b/apps/web/core/components/workspace-notifications/sidebar/header/options/root.tsx
index 74692f35..4afcf2ec 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/header/options/root.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/header/options/root.tsx
@@ -10,7 +10,7 @@ import { CheckDoneOutline, RefreshOutline } from "@makeplane/propel/icons";
 import { ENotificationLoader, ENotificationQueryParamType } from "@pace/constants";
 import { useTranslation } from "@pace/i18n";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
-import { Spinner } from "@pace/ui";
+import { Spinner } from "@pace/propel/spinners";
 // hooks
 import { useWorkspaceNotifications } from "@/hooks/store/notifications";
 import { usePlatformOS } from "@/hooks/use-platform-os";
diff --git a/apps/web/core/components/workspace/sidebar/projects-list.tsx b/apps/web/core/components/workspace/sidebar/projects-list.tsx
index 5680a2eb..8dac3486 100644
--- a/apps/web/core/components/workspace/sidebar/projects-list.tsx
+++ b/apps/web/core/components/workspace/sidebar/projects-list.tsx
@@ -18,7 +18,7 @@ import { useTranslation } from "@pace/i18n";
 import { IconButton } from "@pace/propel/icon-button";
 import { TOAST_TYPE, setToast } from "@pace/propel/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 import { copyUrlToClipboard, cn, orderJoinedProjects } from "@pace/utils";
 // components
 import { CreateProjectModal } from "@/components/project/create-project-modal";
@@ -228,11 +228,11 @@ export const SidebarProjectsList = observer(function SidebarProjectsList() {
               leaveTo="transform scale-95 opacity-0"
             >
               {loader === "init-loader" && (
-                <Loader className="w-full space-y-1.5">
+                <Skeleton className="w-full space-y-1.5">
                   {Array.from({ length: 4 }).map((_, index) => (
-                    <Loader.Item key={index} height="28px" />
+                    <Skeleton.Item key={index} height="28px" />
                   ))}
-                </Loader>
+                </Skeleton>
               )}
               {isAllProjectsListOpen && (
                 <Disclosure.Panel as="div" className="flex flex-col gap-0.5" static>
diff --git a/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx b/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
index d3214d6b..ea9c67e9 100644
--- a/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
+++ b/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
@@ -15,7 +15,7 @@ import { Menu, Transition } from "@headlessui/react";
 import { useTranslation } from "@pace/i18n";
 import { TOAST_TYPE, setToast } from "@pace/propel/toast";
 import type { IWorkspace } from "@pace/types";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 import { orderWorkspacesList, cn } from "@pace/utils";
 // helpers
 import { AppSidebarItem } from "@/components/sidebar/sidebar-item";
@@ -178,10 +178,10 @@ export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: Work
                       </div>
                     ) : (
                       <div className="w-full">
-                        <Loader className="space-y-2">
-                          <Loader.Item height="30px" />
-                          <Loader.Item height="30px" />
-                        </Loader>
+                        <Skeleton className="space-y-2">
+                          <Skeleton.Item height="30px" />
+                          <Skeleton.Item height="30px" />
+                        </Skeleton>
                       </div>
                     )}
                   </div>
diff --git a/packages/codemods/tests/ui-loader-to-propel-skeleton.spec.ts b/packages/codemods/tests/ui-loader-to-propel-skeleton.spec.ts
new file mode 100644
index 00000000..619e8985
--- /dev/null
+++ b/packages/codemods/tests/ui-loader-to-propel-skeleton.spec.ts
@@ -0,0 +1,183 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { describe, it, expect } from "vitest";
+import { applyTransform } from "@hypermod/utils";
+import * as transformer from "../ui-loader-to-propel-skeleton";
+
+const apply = (source: string) =>
+  applyTransform(transformer, source, { parser: "tsx" });
+
+describe("ui-loader-to-propel-skeleton", () => {
+  it("moves a sole-specifier import and renames the element and its .Item", async () => {
+    const result = await apply(`
+      import { Loader } from "@pace/ui";
+
+      export const Placeholder = () => (
+        <Loader className="space-y-4">
+          <Loader.Item height="36px" width="100%" />
+        </Loader>
+      );
+    `);
+
+    expect(result).toContain(
+      `import { Skeleton } from "@pace/propel/skeleton";`
+    );
+    expect(result).not.toContain("@pace/ui");
+    expect(result).toContain(`<Skeleton className="space-y-4">`);
+    expect(result).toContain(`<Skeleton.Item height="36px" width="100%" />`);
+    expect(result).toContain("</Skeleton>");
+  });
+
+  it("splits Loader out and leaves the other @pace/ui specifiers in place", async () => {
+    const result = await apply(`
+      import { Loader, CustomMenu, Row } from "@pace/ui";
+
+      export const Placeholder = () => <Loader><Loader.Item /></Loader>;
+    `);
+
+    expect(result).toContain(
+      `import { Skeleton } from "@pace/propel/skeleton";`
+    );
+    expect(result).toContain(`import { CustomMenu, Row } from "@pace/ui";`);
+  });
+
+  it("removes a trailing Loader specifier without leaving a dangling comma", async () => {
+    const result = await apply(`
+      import { CustomMenu, Loader } from "@pace/ui";
+
+      export const Placeholder = () => <Loader />;
+    `);
+
+    expect(result).toContain(`import { CustomMenu } from "@pace/ui";`);
+    expect(result).not.toMatch(/,\s*\}/);
+  });
+
+  it("keeps the leading comment above both statements", async () => {
+    const result = await apply(`
+      // ui
+      import { Loader, Row } from "@pace/ui";
+
+      export const Placeholder = () => <Loader />;
+    `);
+
+    expect(result).toMatch(
+      /\/\/ ui\n\s*import \{ Skeleton \} from "@pace\/propel\/skeleton";\n\s*import \{ Row \} from "@pace\/ui";/
+    );
+  });
+
+  it("handles a multi-line specifier list", async () => {
+    const result = await apply(`
+      import {
+        CustomMenu,
+        Loader,
+        Row,
+      } from "@pace/ui";
+
+      export const Placeholder = () => <Loader />;
+    `);
+
+    expect(result).toContain("CustomMenu,");
+    expect(result).toContain("Row,");
+    expect(result).not.toMatch(/\bLoader\b/);
+  });
+
+  it("leaves a same-named local component alone when nothing comes from @pace/ui", async () => {
+    const result = await apply(`
+      import { Row } from "@pace/ui";
+
+      function Loader() {
+        return <div className="animate-pulse" />;
+      }
+
+      export const Placeholder = () => <Loader />;
+    `);
+
+    expect(result).not.toContain("@pace/propel/skeleton");
+    expect(result).toContain("function Loader()");
+    expect(result).toContain("<Loader />");
+  });
+
+  it("leaves a file that imports no UI library untouched", async () => {
+    const result = await apply(`
+      import { Loader } from "@/components/loader";
+
+      export const Placeholder = () => <Loader />;
+    `);
+
+    expect(result).not.toContain("@pace/propel/skeleton");
+    expect(result).toContain(`import { Loader } from "@/components/loader";`);
+  });
+
+  it("does not rename a reference shadowed inside a function", async () => {
+    const result = await apply(`
+      import { Loader } from "@pace/ui";
+
+      export function render() {
+        const Loader = () => <span />;
+        return <Loader />;
+      }
+    `);
+
+    expect(result).toContain(
+      `import { Skeleton } from "@pace/propel/skeleton";`
+    );
+    expect(result).toContain("const Loader = () => <span />;");
+    expect(result).toContain("return <Loader />;");
+  });
+
+  it("keeps an aliased local name and renames nothing", async () => {
+    const result = await apply(`
+      import { Loader as UiLoader } from "@pace/ui";
+
+      export const Placeholder = () => <UiLoader><UiLoader.Item /></UiLoader>;
+    `);
+
+    expect(result).toContain(
+      `import { Skeleton as UiLoader } from "@pace/propel/skeleton";`
+    );
+    expect(result).toContain("<UiLoader><UiLoader.Item /></UiLoader>");
+  });
+
+  it("preserves the type-only modifier", async () => {
+    const result = await apply(`
+      import type { Loader } from "@pace/ui";
+
+      export type Props = { loader: typeof Loader };
+    `);
+
+    expect(result).toContain(
+      `import type { Skeleton } from "@pace/propel/skeleton";`
+    );
+    expect(result).toContain("typeof Skeleton");
+  });
+
+  it("reprints nothing but the lines it edits, JSX comments included", async () => {
+    // This is the shape recast mangled on an earlier sweep: an oxlint directive inside the JSX, a
+    // self-closing element next to a text node, and blank lines between siblings.
+    const source = `import { Loader } from "@pace/ui";
+
+export const Placeholder = () => (
+  <Loader className="grid">
+    {/* oxlint-disable-next-line jsx-a11y/no-static-element-interactions */}
+    <div onClick={noop}>
+      <span /> label
+    </div>
+
+    <Loader.Item height="36px" />
+  </Loader>
+);
+`;
+
+    // applyTransform trims what it returns, hence the trim on the expectation rather than on the input.
+    expect(await apply(source)).toBe(
+      source
+        .replaceAll("Loader", "Skeleton")
+        .replace(`from "@pace/ui"`, `from "@pace/propel/skeleton"`)
+        .trim()
+    );
+  });
+});
diff --git a/packages/codemods/ui-loader-to-propel-skeleton.ts b/packages/codemods/ui-loader-to-propel-skeleton.ts
new file mode 100644
index 00000000..ccc903fa
--- /dev/null
+++ b/packages/codemods/ui-loader-to-propel-skeleton.ts
@@ -0,0 +1,152 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type {
+  API,
+  ASTPath,
+  FileInfo,
+  ImportDeclaration,
+  ImportSpecifier,
+} from "jscodeshift";
+
+/**
+ * `Loader` from `@pace/ui` -> `Skeleton` from `@pace/propel/skeleton`.
+ *
+ * The two are the same component under two names: both render `animate-pulse` + `role="status"` around their children and expose an `.Item` taking `height`/`width`/`className` with an `"auto"` default, and the class expressions are identical. Skeleton additionally sets `data-slot` and an `aria-label`, which is additive — no selector in the repo targets the old markup (`plane-ui-loader` appears only on the deleted component's own `displayName`).
+ *
+ * Everything keys off the import source, never off the name. `Loader` is a name several app files define for themselves, and one of them (`packages/editor/src/components/editors/document/loader.tsx`) both defines a `DocumentContentLoader` and imports the @pace/ui `Loader`. A transform that matched `<Loader>` in JSX would rewrite first-party components in the files that never imported anything. The headlessui-v2-default-tags transform makes the same guard for the same reason.
+ *
+ * The AST is used only to locate character offsets; the replacement is spliced into the original text and the source string is returned instead of `root.toSource()`. Reprinting a mutated AST through recast is not byte-preserving — on a 531-file sweep in this repo it rewrote unrelated JSX in 7 files, because recast reprints a whole subtree when it cannot reconcile comment attachment and several files carry `// oxlint-disable-next-line` comments inside their JSX. Splicing keeps every hunk in the 80 files to the import lines and the bare identifier renames.
+ *
+ * Deliberately not done:
+ *
+ * - No merging into an existing `@pace/propel/skeleton` import, and no reordering. A file keeping other @pace/ui symbols gains a second import statement above the one it had; that is what the icons sweep does too, and both oxlint and oxfmt accept it.
+ * - An aliased import (`Loader as X`) keeps its local name — the new import becomes `Skeleton as X` and no reference is touched. There is none in the repo today, but renaming references would otherwise have to prove the alias is free at every use site.
+ * - A reference whose scope resolves to something other than the module-level import is left alone, which is what makes a shadowing `const Loader` inside a function safe.
+ */
+const FROM_SOURCE = "@pace/ui";
+const TO_SOURCE = "@pace/propel/skeleton";
+const FROM_NAME = "Loader";
+const TO_NAME = "Skeleton";
+
+type Splice = { start: number; end: number; text: string };
+
+/** Babel records these; ast-types does not declare them on the node types. */
+type Ranged = { start?: number; end?: number };
+
+const rangeOf = (node: unknown): [number, number] | undefined => {
+  const { start, end } = (node ?? {}) as Ranged;
+  return typeof start === "number" && typeof end === "number"
+    ? [start, end]
+    : undefined;
+};
+
+export default function transform(file: FileInfo, api: API) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  const splices: Splice[] = [];
+  /** Local names bound to @pace/ui's `Loader` that are safe to rename at their use sites. */
+  const renamedLocals = new Set<string>();
+
+  root
+    .find(j.ImportDeclaration, { source: { value: FROM_SOURCE } })
+    .forEach((path: ASTPath<ImportDeclaration>) => {
+      const specifiers = path.node.specifiers ?? [];
+      const index = specifiers.findIndex(
+        (specifier) =>
+          specifier.type === "ImportSpecifier" &&
+          // ast-types types both names as `string | IdentifierKind`; only the string form can be compared.
+          typeof specifier.imported?.name === "string" &&
+          specifier.imported.name === FROM_NAME
+      );
+      if (index === -1) return;
+
+      const specifier = specifiers[index] as ImportSpecifier;
+      const specifierRange = rangeOf(specifier);
+      const declarationRange = rangeOf(path.node);
+      if (!specifierRange || !declarationRange) return;
+
+      const localName =
+        typeof specifier.local?.name === "string"
+          ? specifier.local.name
+          : FROM_NAME;
+      // An alias only has to survive when it differs from both names; `Loader as Skeleton` already binds the target name.
+      const binding =
+        localName === FROM_NAME || localName === TO_NAME
+          ? TO_NAME
+          : `${TO_NAME} as ${localName}`;
+      // `import type { Loader }` binds no runtime value; the replacement has to keep the modifier or the emitted import stops type-checking.
+      const keyword =
+        path.node.importKind === "type" ? "import type" : "import";
+      const declaration = `${keyword} { ${binding} } from "${TO_SOURCE}";`;
+
+      if (specifiers.length === 1) {
+        // Nothing else came from @pace/ui, so the statement itself moves and the file loses the dependency.
+        splices.push({
+          start: declarationRange[0],
+          end: declarationRange[1],
+          text: declaration,
+        });
+      } else {
+        // Cutting to the next specifier's start (or back from the previous one's end when this is the last) takes the separating comma and whitespace with it, whatever the formatting.
+        const neighbour =
+          index + 1 < specifiers.length
+            ? rangeOf(specifiers[index + 1])
+            : rangeOf(specifiers[index - 1]);
+        if (!neighbour) return;
+        const [cutStart, cutEnd] =
+          index + 1 < specifiers.length
+            ? [specifierRange[0], neighbour[0]]
+            : [neighbour[1], specifierRange[1]];
+        splices.push({ start: cutStart, end: cutEnd, text: "" });
+        // Inserted at the `import` keyword, so a leading `// ui` style comment stays above both statements.
+        splices.push({
+          start: declarationRange[0],
+          end: declarationRange[0],
+          text: `${declaration}\n`,
+        });
+      }
+
+      if (localName === FROM_NAME) renamedLocals.add(localName);
+    });
+
+  if (splices.length === 0) return file.source;
+
+  // The scope hangs off Program, not off the File node the root path points at — `root.get().scope` is null, and comparing against null would have matched every unresolved identifier instead of none.
+  const moduleScope = root.find(j.Program).paths()[0]?.scope;
+
+  if (renamedLocals.size > 0 && moduleScope) {
+    const rename = (path: ASTPath<{ name?: unknown }>) => {
+      const name = path.node.name;
+      if (typeof name !== "string" || !renamedLocals.has(name)) return;
+      // The import specifier's own identifiers sit inside a range already being replaced.
+      if (path.parent?.node?.type === "ImportSpecifier") return;
+      // A JSX member expression's property (`Loader.Item` -> the `Item`) must not be touched.
+      if (
+        path.parent?.node?.type === "JSXMemberExpression" &&
+        path.parent.node.property === path.node
+      )
+        return;
+      if (path.scope?.lookup(name) !== moduleScope) return;
+      const range = rangeOf(path.node);
+      if (range)
+        splices.push({ start: range[0], end: range[1], text: TO_NAME });
+    };
+
+    // One pass, not two: ast-types declares JSXIdentifier as a subtype of Identifier, so this collection already contains the JSX element names. Searching both types would splice every one of them twice.
+    root.find(j.Identifier).forEach(rename);
+  }
+
+  // Back to front, so an earlier splice never invalidates a later offset.
+  let output = file.source;
+  for (const splice of splices.toSorted((a, b) => b.start - a.start)) {
+    output =
+      output.slice(0, splice.start) + splice.text + output.slice(splice.end);
+  }
+
+  return output;
+}
diff --git a/packages/editor/src/components/editors/document/loader.tsx b/packages/editor/src/components/editors/document/loader.tsx
index a37dddf8..61461027 100644
--- a/packages/editor/src/components/editors/document/loader.tsx
+++ b/packages/editor/src/components/editors/document/loader.tsx
@@ -5,7 +5,7 @@
  */
 
 // pace imports
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 import { cn } from "@pace/utils";
 
 type Props = {
@@ -17,41 +17,41 @@ export function DocumentContentLoader(props: Props) {
 
   return (
     <div className={cn("document-editor-loader", className)}>
-      <Loader className="relative space-y-4">
+      <Skeleton className="relative space-y-4">
         <div className="space-y-2">
           <div className="py-2">
-            <Loader.Item width="100%" height="36px" />
+            <Skeleton.Item width="100%" height="36px" />
           </div>
-          <Loader.Item width="80%" height="22px" />
+          <Skeleton.Item width="80%" height="22px" />
           <div className="relative flex items-center gap-2">
-            <Loader.Item width="30px" height="30px" />
-            <Loader.Item width="30%" height="22px" />
+            <Skeleton.Item width="30px" height="30px" />
+            <Skeleton.Item width="30%" height="22px" />
           </div>
           <div className="py-2">
-            <Loader.Item width="60%" height="36px" />
+            <Skeleton.Item width="60%" height="36px" />
           </div>
-          <Loader.Item width="70%" height="22px" />
-          <Loader.Item width="30%" height="22px" />
+          <Skeleton.Item width="70%" height="22px" />
+          <Skeleton.Item width="30%" height="22px" />
           <div className="relative flex items-center gap-2">
-            <Loader.Item width="30px" height="30px" />
-            <Loader.Item width="30%" height="22px" />
+            <Skeleton.Item width="30px" height="30px" />
+            <Skeleton.Item width="30%" height="22px" />
           </div>
           <div className="py-2">
-            <Loader.Item width="50%" height="30px" />
+            <Skeleton.Item width="50%" height="30px" />
           </div>
-          <Loader.Item width="100%" height="22px" />
+          <Skeleton.Item width="100%" height="22px" />
           <div className="py-2">
-            <Loader.Item width="30%" height="30px" />
+            <Skeleton.Item width="30%" height="30px" />
           </div>
-          <Loader.Item width="30%" height="22px" />
+          <Skeleton.Item width="30%" height="22px" />
           <div className="relative flex items-center gap-2">
             <div className="py-2">
-              <Loader.Item width="30px" height="30px" />
+              <Skeleton.Item width="30px" height="30px" />
             </div>
-            <Loader.Item width="30%" height="22px" />
+            <Skeleton.Item width="30%" height="22px" />
           </div>
         </div>
-      </Loader>
+      </Skeleton>
     </div>
   );
 }
diff --git a/packages/ui/src/avatar/avatar-group.tsx b/packages/propel/src/avatar/avatar-group.tsx
similarity index 94%
rename from packages/ui/src/avatar/avatar-group.tsx
rename to packages/propel/src/avatar/avatar-group.tsx
index 2b8162b5..edd416b5 100644
--- a/packages/ui/src/avatar/avatar-group.tsx
+++ b/packages/propel/src/avatar/avatar-group.tsx
@@ -6,12 +6,12 @@
 
 import React from "react";
 // ui
-import { Tooltip } from "@pace/propel/tooltip";
+import { Tooltip } from "../tooltip";
 // helpers
 import { cn } from "../utils";
 // types
-import type { TAvatarSize } from "./helper";
-import { getSizeInfo, isAValidNumber } from "./helper";
+import type { TAvatarSize } from "./avatar";
+import { getSizeInfo, isAValidNumber } from "./avatar";
 
 type Props = {
   /**
diff --git a/packages/propel/src/avatar/avatar.tsx b/packages/propel/src/avatar/avatar.tsx
index e4ce720f..dc81d690 100644
--- a/packages/propel/src/avatar/avatar.tsx
+++ b/packages/propel/src/avatar/avatar.tsx
@@ -6,6 +6,7 @@
 
 import React from "react";
 import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+import { Tooltip } from "../tooltip";
 import { cn } from "../utils/classname";
 
 export type TAvatarSize = "sm" | "md" | "base" | "lg" | number;
@@ -15,7 +16,7 @@ type Props = {
   fallbackBackgroundColor?: string; //The background color if the avatar image fails to load
   fallbackText?: string;
   fallbackTextColor?: string; //The text color if the avatar image fails to load
-  showTooltip?: boolean;
+  showTooltip?: boolean; //Whether the name is surfaced as a hover tooltip. @default true
   size?: TAvatarSize; //The size of the avatars
   shape?: "circle" | "square";
   src?: string; //The source of the avatar image
@@ -91,6 +92,7 @@ export function Avatar(props: Props) {
     fallbackBackgroundColor,
     fallbackText,
     fallbackTextColor,
+    showTooltip = true,
     size = "md",
     shape = "circle",
     src,
@@ -102,32 +104,41 @@ export function Avatar(props: Props) {
 
   const fallbackLetter = name?.[0]?.toUpperCase() ?? fallbackText ?? "?";
   return (
-    <div
-      className={cn("grid place-items-center overflow-hidden", getBorderRadius(shape), {
-        [sizeInfo.avatarSize]: !isAValidNumber(size),
-      })}
-      style={
-        isAValidNumber(size)
-          ? {
-              height: `${size}px`,
-              width: `${size}px`,
-            }
-          : {}
-      }
-      tabIndex={-1}
-    >
-      <AvatarPrimitive.Root className={cn("h-full w-full", getBorderRadius(shape), className)}>
-        <AvatarPrimitive.Image src={src} width="48" height="48" />
-        <AvatarPrimitive.Fallback
-          className={cn(sizeInfo.fontSize, "grid h-full w-full place-items-center", getBorderRadius(shape), className)}
-          style={{
-            backgroundColor: fallbackBackgroundColor ?? "var(--background-color-accent-primary)",
-            color: fallbackTextColor ?? "var(--text-color-on-color)",
-          }}
-        >
-          {fallbackLetter}
-        </AvatarPrimitive.Fallback>
-      </AvatarPrimitive.Root>
-    </div>
+    // The tooltip is how an avatar says whose it is: the label is the only text the component renders beyond a single initial. `disabled` rather than a conditional wrapper keeps the DOM identical either way, so turning the tooltip off cannot reflow a row of avatars.
+    <Tooltip tooltipContent={fallbackText ?? name ?? "?"} disabled={!showTooltip}>
+      <div
+        className={cn("grid place-items-center overflow-hidden", getBorderRadius(shape), {
+          [sizeInfo.avatarSize]: !isAValidNumber(size),
+        })}
+        style={
+          isAValidNumber(size)
+            ? {
+                height: `${size}px`,
+                width: `${size}px`,
+              }
+            : {}
+        }
+        tabIndex={-1}
+      >
+        <AvatarPrimitive.Root className={cn("h-full w-full", getBorderRadius(shape), className)}>
+          {/* `alt` carries the name for anyone not hovering: the tooltip is pointer-only, and an avatar image with no alt text reads as its URL. */}
+          <AvatarPrimitive.Image src={src} alt={name} width="48" height="48" />
+          <AvatarPrimitive.Fallback
+            className={cn(
+              sizeInfo.fontSize,
+              "grid h-full w-full place-items-center",
+              getBorderRadius(shape),
+              className
+            )}
+            style={{
+              backgroundColor: fallbackBackgroundColor ?? "var(--background-color-accent-primary)",
+              color: fallbackTextColor ?? "var(--text-color-on-color)",
+            }}
+          >
+            {fallbackLetter}
+          </AvatarPrimitive.Fallback>
+        </AvatarPrimitive.Root>
+      </div>
+    </Tooltip>
   );
 }
diff --git a/packages/propel/src/avatar/index.ts b/packages/propel/src/avatar/index.ts
index 522264e6..af722d71 100644
--- a/packages/propel/src/avatar/index.ts
+++ b/packages/propel/src/avatar/index.ts
@@ -5,3 +5,4 @@
  */
 
 export * from "./avatar";
+export * from "./avatar-group";
diff --git a/packages/propel/src/spinners/circular-spinner.tsx b/packages/propel/src/spinners/circular-spinner.tsx
index e64f8c08..ae742696 100644
--- a/packages/propel/src/spinners/circular-spinner.tsx
+++ b/packages/propel/src/spinners/circular-spinner.tsx
@@ -6,7 +6,7 @@
 
 import * as React from "react";
 // helpers
-import clsx from "clsx";
+import { cn } from "../utils/classname";
 
 export interface ISpinner extends React.SVGAttributes<SVGElement> {
   height?: string;
@@ -21,7 +21,7 @@ export function Spinner({ height = "32px", width = "32px", className = "" }: ISp
         aria-hidden="true"
         height={height}
         width={width}
-        className={clsx("animate-spin text-secondary", className)}
+        className={cn("animate-spin fill-accent-primary text-secondary", className)}
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -31,8 +31,8 @@ export function Spinner({ height = "32px", width = "32px", className = "" }: ISp
           fill="currentColor"
         />
         <path
-          className="fill-accent-primary"
           d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+          fill="currentFill"
         />
       </svg>
       <span className="sr-only">Loading...</span>
diff --git a/packages/propel/src/tooltip/root.tsx b/packages/propel/src/tooltip/root.tsx
index d90bf71b..da3c675e 100644
--- a/packages/propel/src/tooltip/root.tsx
+++ b/packages/propel/src/tooltip/root.tsx
@@ -31,12 +31,13 @@ export function Tooltip(props: ITooltipProps) {
   const {
     tooltipHeading,
     tooltipContent,
-    position = "top",
+    position,
     children,
     disabled = false,
     className = "",
     openDelay = 200,
-    side = "bottom",
+    // `position` wins when it is given, so it must not be defaulted: with `position = "top"` in this list the branch below always took it and `side`/`align` were declared props that could never reach the positioner. The defaults live here instead, and "top"/"center" is exactly what `convertPlacementToSideAndAlign("top")` returned, so every existing call site that passes neither is placed where it was.
+    side = "top",
     align = "center",
     sideOffset = 10,
     closeDelay,
diff --git a/packages/ui/src/avatar/avatar.stories.tsx b/packages/ui/src/avatar/avatar.stories.tsx
deleted file mode 100644
index 9f96059f..00000000
--- a/packages/ui/src/avatar/avatar.stories.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import type { Meta, StoryObj } from "@storybook/react";
-import { Avatar } from "./avatar";
-
-const meta: Meta<typeof Avatar> = {
-  title: "Avatar",
-  component: Avatar,
-};
-
-export default meta;
-type Story = StoryObj<typeof Avatar>;
-
-export const Default: Story = {
-  args: { name: "John Doe" },
-};
-
-export const Large: Story = {
-  args: { name: "John Doe" },
-};
diff --git a/packages/ui/src/avatar/avatar.tsx b/packages/ui/src/avatar/avatar.tsx
deleted file mode 100644
index 1d29b047..00000000
--- a/packages/ui/src/avatar/avatar.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-// ui
-import { Tooltip } from "@pace/propel/tooltip";
-// helpers
-import { cn } from "../utils";
-import type { TAvatarSize } from "./helper";
-import { getBorderRadius, getSizeInfo, isAValidNumber } from "./helper";
-
-type Props = {
-  /**
-   * The name of the avatar which will be displayed on the tooltip
-   */
-  name?: string;
-  /**
-   * The background color if the avatar image fails to load
-   */
-  fallbackBackgroundColor?: string;
-  /**
-   * The text to display if the avatar image fails to load
-   */
-  fallbackText?: string;
-  /**
-   * The text color if the avatar image fails to load
-   */
-  fallbackTextColor?: string;
-  /**
-   * Whether to show the tooltip or not
-   * @default true
-   */
-  showTooltip?: boolean;
-  /**
-   * The size of the avatars
-   * Possible values: "sm", "md", "base", "lg"
-   * @default "md"
-   */
-  size?: TAvatarSize;
-  /**
-   * The shape of the avatar
-   * Possible values: "circle", "square"
-   * @default "circle"
-   */
-  shape?: "circle" | "square";
-  /**
-   * The source of the avatar image
-   */
-  src?: string;
-  /**
-   * The custom CSS class name to apply to the component
-   */
-  className?: string;
-};
-
-export function Avatar(props: Props) {
-  const {
-    name,
-    fallbackBackgroundColor,
-    fallbackText,
-    fallbackTextColor,
-    showTooltip = true,
-    size = "md",
-    shape = "circle",
-    src,
-    className = "",
-  } = props;
-
-  // get size details based on the size prop
-  const sizeInfo = getSizeInfo(size);
-
-  return (
-    <Tooltip tooltipContent={fallbackText ?? name ?? "?"} disabled={!showTooltip}>
-      <div
-        className={cn("grid place-items-center overflow-hidden", getBorderRadius(shape), {
-          [sizeInfo.avatarSize]: !isAValidNumber(size),
-        })}
-        style={
-          isAValidNumber(size)
-            ? {
-                height: `${size}px`,
-                width: `${size}px`,
-              }
-            : {}
-        }
-        tabIndex={-1}
-      >
-        {src ? (
-          <img src={src} className={cn("h-full w-full", getBorderRadius(shape), className)} alt={name} />
-        ) : (
-          <div
-            className={cn(
-              sizeInfo.fontSize,
-              "grid h-full w-full place-items-center",
-              getBorderRadius(shape),
-              className
-            )}
-            style={{
-              backgroundColor: fallbackBackgroundColor ?? "#028375",
-              color: fallbackTextColor ?? "#ffffff",
-            }}
-          >
-            {name?.[0]?.toUpperCase() ?? fallbackText ?? "?"}
-          </div>
-        )}
-      </div>
-    </Tooltip>
-  );
-}
diff --git a/packages/ui/src/avatar/helper.tsx b/packages/ui/src/avatar/helper.tsx
deleted file mode 100644
index b72cbcc3..00000000
--- a/packages/ui/src/avatar/helper.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export type TAvatarSize = "sm" | "md" | "base" | "lg" | number;
-
-/**
- * Get the size details based on the size prop
- * @param size The size of the avatar
- * @returns The size details
- */
-export const getSizeInfo = (size: TAvatarSize) => {
-  switch (size) {
-    case "sm":
-      return {
-        avatarSize: "h-4 w-4",
-        fontSize: "text-11",
-        spacing: "-space-x-1",
-      };
-    case "md":
-      return {
-        avatarSize: "h-5 w-5",
-        fontSize: "text-11",
-        spacing: "-space-x-1",
-      };
-    case "base":
-      return {
-        avatarSize: "h-6 w-6",
-        fontSize: "text-13",
-        spacing: "-space-x-1.5",
-      };
-    case "lg":
-      return {
-        avatarSize: "h-7 w-7",
-        fontSize: "text-13",
-        spacing: "-space-x-1.5",
-      };
-    default:
-      return {
-        avatarSize: "h-5 w-5",
-        fontSize: "text-11",
-        spacing: "-space-x-1",
-      };
-  }
-};
-
-/**
- * Get the border radius based on the shape prop
- * @param shape The shape of the avatar
- * @returns The border radius
- */
-export const getBorderRadius = (shape: "circle" | "square") => {
-  switch (shape) {
-    case "circle":
-      return "rounded-full";
-    case "square":
-      return "rounded-sm";
-    default:
-      return "rounded-full";
-  }
-};
-
-/**
- * Check if the value is a valid number
- * @param value The value to check
- * @returns Whether the value is a valid number or not
- */
-export const isAValidNumber = (value: unknown) => typeof value === "number" && !isNaN(value);
diff --git a/packages/ui/src/avatar/index.ts b/packages/ui/src/avatar/index.ts
deleted file mode 100644
index 2fbdafee..00000000
--- a/packages/ui/src/avatar/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./avatar-group";
-export * from "./avatar";
diff --git a/packages/ui/src/card/card.tsx b/packages/ui/src/card/card.tsx
deleted file mode 100644
index 4ee7f7e7..00000000
--- a/packages/ui/src/card/card.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-import { cn } from "../utils";
-import type { TCardDirection, TCardSpacing, TCardVariant } from "./helper";
-import { ECardDirection, ECardSpacing, ECardVariant, getCardStyle } from "./helper";
-
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-  variant?: TCardVariant;
-  spacing?: TCardSpacing;
-  direction?: TCardDirection;
-  className?: string;
-  children: React.ReactNode;
-}
-
-const Card = React.forwardRef(function Card(props: CardProps, ref: React.ForwardedRef<HTMLDivElement>) {
-  const {
-    variant = ECardVariant.WITH_SHADOW,
-    direction = ECardDirection.COLUMN,
-    className = "",
-    spacing = ECardSpacing.LG,
-    children,
-    ...rest
-  } = props;
-
-  const style = getCardStyle(variant, spacing, direction);
-  return (
-    <div ref={ref} className={cn(style, className)} {...rest}>
-      {children}
-    </div>
-  );
-});
-
-Card.displayName = "plane-ui-card";
-
-export { Card, ECardVariant, ECardSpacing, ECardDirection };
diff --git a/packages/ui/src/card/helper.tsx b/packages/ui/src/card/helper.tsx
deleted file mode 100644
index cc914c5d..00000000
--- a/packages/ui/src/card/helper.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export enum ECardVariant {
-  WITHOUT_SHADOW = "without-shadow",
-  WITH_SHADOW = "with-shadow",
-}
-export enum ECardDirection {
-  ROW = "row",
-  COLUMN = "column",
-}
-export enum ECardSpacing {
-  SM = "sm",
-  LG = "lg",
-}
-export type TCardVariant = ECardVariant.WITHOUT_SHADOW | ECardVariant.WITH_SHADOW;
-export type TCardDirection = ECardDirection.ROW | ECardDirection.COLUMN;
-export type TCardSpacing = ECardSpacing.SM | ECardSpacing.LG;
-
-export interface ICardProperties {
-  [key: string]: string;
-}
-
-const DEFAULT_STYLE = "bg-surface-1 rounded-lg border-[0.5px] border-subtle w-full flex flex-col";
-export const containerStyle: ICardProperties = {
-  [ECardVariant.WITHOUT_SHADOW]: "",
-  [ECardVariant.WITH_SHADOW]: "hover:shadow-raised-200 duration-300",
-};
-export const spacings = {
-  [ECardSpacing.SM]: "p-4",
-  [ECardSpacing.LG]: "p-6",
-};
-export const directions = {
-  [ECardDirection.ROW]: "flex-row space-x-3",
-  [ECardDirection.COLUMN]: "flex-col space-y-3",
-};
-export const getCardStyle = (variant: TCardVariant, spacing: TCardSpacing, direction: TCardDirection) =>
-  DEFAULT_STYLE + " " + directions[direction] + " " + containerStyle[variant] + " " + spacings[spacing];
diff --git a/packages/ui/src/card/index.ts b/packages/ui/src/card/index.ts
deleted file mode 100644
index 4260f850..00000000
--- a/packages/ui/src/card/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./card";
diff --git a/packages/ui/src/form-fields/index.ts b/packages/ui/src/form-fields/index.ts
index 1ffa30fd..675fd3bd 100644
--- a/packages/ui/src/form-fields/index.ts
+++ b/packages/ui/src/form-fields/index.ts
@@ -4,7 +4,7 @@
  * See the LICENSE file for details.
  */
 
-export * from "./input";
+// `./input` is deliberately not re-exported: @pace/propel/input is the same component and is what apps import now. The file stays because input-color-picker still composes it, and that one is a @pace/ui composite with no propel counterpart.
 export * from "./textarea";
 export * from "./input-color-picker";
 export * from "./password";
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index e00a1604..0fc5f048 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -5,9 +5,7 @@
  */
 
 export * from "./app-progress-bar";
-export * from "./avatar";
 export * from "./breadcrumbs";
-export * from "./card";
 export * from "./collapsible";
 export * from "./content-wrapper";
 export * from "./control-link";
@@ -19,12 +17,10 @@ export * from "./favorite-star";
 export * from "./form-fields";
 export * from "./header";
 export * from "./link";
-export * from "./loader";
 export * from "./modals";
 export * from "./popovers";
 export * from "./row";
 export * from "./sortable";
-export * from "./spinners";
 export * from "./tables";
 export * from "./tag";
 export * from "./utils";
diff --git a/packages/ui/src/loader.tsx b/packages/ui/src/loader.tsx
deleted file mode 100644
index 836a412b..00000000
--- a/packages/ui/src/loader.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import React from "react";
-// helpers
-import { cn } from "./utils";
-
-type Props = {
-  children: React.ReactNode;
-  className?: string;
-};
-
-function Loader({ children, className = "" }: Props) {
-  return (
-    <div className={cn("animate-pulse", className)} role="status">
-      {children}
-    </div>
-  );
-}
-
-type ItemProps = {
-  height?: string;
-  width?: string;
-  className?: string;
-};
-
-function Item({ height = "auto", width = "auto", className = "" }: ItemProps) {
-  return <div className={cn("rounded-md bg-layer-1", className)} style={{ height: height, width: width }} />;
-}
-
-Loader.Item = Item;
-
-Loader.displayName = "plane-ui-loader";
-
-export { Loader };
diff --git a/packages/ui/src/spinners/circular-spinner.tsx b/packages/ui/src/spinners/circular-spinner.tsx
deleted file mode 100644
index 59aacd6c..00000000
--- a/packages/ui/src/spinners/circular-spinner.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import * as React from "react";
-// helpers
-import { cn } from "../utils";
-
-export interface ISpinner extends React.SVGAttributes<SVGElement> {
-  height?: string;
-  width?: string;
-  className?: string | undefined;
-}
-
-export function Spinner({ height = "32px", width = "32px", className = "" }: ISpinner) {
-  return (
-    <div role="status">
-      <svg
-        aria-hidden="true"
-        height={height}
-        width={width}
-        className={cn("animate-spin fill-accent-primary text-secondary", className)}
-        viewBox="0 0 100 101"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-          fill="currentColor"
-        />
-        <path
-          d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-          fill="currentFill"
-        />
-      </svg>
-      <span className="sr-only">Loading...</span>
-    </div>
-  );
-}
diff --git a/packages/ui/src/spinners/index.ts b/packages/ui/src/spinners/index.ts
deleted file mode 100644
index 6f87ad95..00000000
--- a/packages/ui/src/spinners/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-export * from "./circular-spinner";

From c9a6245d7c6c5663160be246d1aca0bbfbed0b40 Mon Sep 17 00:00:00 2001
From: Evan Hu <e-hu@unext.jp>
Date: Sat, 19 Sep 2026 21:45:20 +0900
Subject: [PATCH 5/5] refactor(web): take the last @pace/ui Loader onto
 propel's Skeleton

The lazy-loading pass that landed on main after this branch was cut introduced
a fresh `Loader` Suspense fallback in the sidebar progress chart, and this
branch retires `Loader` from @pace/ui. Neither side conflicts textually, so the
rebase produced a tree that does not compile. Converted by the branch's own
`ui-loader-to-propel-skeleton` codemod, the same way every other call site was.
---
 apps/web/core/components/core/sidebar/progress-chart.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/web/core/components/core/sidebar/progress-chart.tsx b/apps/web/core/components/core/sidebar/progress-chart.tsx
index f743a746..d4ca935d 100644
--- a/apps/web/core/components/core/sidebar/progress-chart.tsx
+++ b/apps/web/core/components/core/sidebar/progress-chart.tsx
@@ -7,7 +7,7 @@
 import React, { lazy, Suspense } from "react";
 // pace imports
 import type { TChartData, TModuleCompletionChartDistribution } from "@pace/types";
-import { Loader } from "@pace/ui";
+import { Skeleton } from "@pace/propel/skeleton";
 import { renderFormattedDateWithoutYear } from "@pace/utils";
 
 const AreaChart = lazy(function AreaChart() {
@@ -34,9 +34,9 @@ function ProgressChart({ distribution, totalIssues, className = "", plotTitle =
     <div className={`flex w-full items-center justify-center ${className}`}>
       <Suspense
         fallback={
-          <Loader className="h-[370px] w-full">
-            <Loader.Item width="100%" height="100%" />
-          </Loader>
+          <Skeleton className="h-[370px] w-full">
+            <Skeleton.Item width="100%" height="100%" />
+          </Skeleton>
         }
       >
         <AreaChart