From bc19ff645d613d352cfa21e2c6e5bb177fdc0fb8 Mon Sep 17 00:00:00 2001
From: Atul Tameshwari <atameshwari9@gmail.com>
Date: Fri, 4 Sep 2026 23:29:49 +0530
Subject: [PATCH 1/4] refactor: replace Loader components with Skeleton for
 loading states

Updated various components across the application to use Skeleton and SkeletonItem from @makeplane/propel/components/skeleton instead of Loader for displaying loading states. This change enhances the user experience by providing a more visually appealing loading indication. Components affected include issue details pages, analytics loaders, and various modals.
---
 .../(projects)/browse/[workItem]/page.tsx     |  30 ++--
 .../(detail)/[archivedIssueId]/page.tsx       |  30 ++--
 .../components/analytics/insight-card.tsx     |   6 +-
 .../analytics/insight-table/loader.tsx        |  44 +++---
 .../web/core/components/analytics/loaders.tsx |  34 ++--
 .../analytics/overview/active-projects.tsx    |  13 +-
 .../automation/auto-archive-automation.tsx    |  11 +-
 .../automation/auto-close-automation.tsx      |  11 +-
 .../components/base-layouts/gantt/sidebar.tsx |  17 +-
 .../components/common/filters/created-by.tsx  |  14 +-
 .../core/description-versions/modal.tsx       |  31 ++--
 .../components/core/image-picker-popover.tsx  |  24 +--
 .../core/modals/bulk-delete-issues-modal.tsx  |  17 +-
 .../modals/existing-issues-list-modal.tsx     |  17 +-
 .../cycles/active-cycle/cycle-stats.tsx       |  22 +--
 .../cycles/active-cycle/productivity.tsx      |  10 +-
 .../cycles/active-cycle/progress.tsx          |  10 +-
 .../cycles/analytics-sidebar/root.tsx         |  24 +--
 .../analytics-sidebar/sidebar-chart.tsx       |  10 +-
 .../rich-text/description-input/loader.tsx    |  40 ++---
 .../components/estimates/loader-screen.tsx    |  17 +-
 .../gantt-chart/sidebar/issues/sidebar.tsx    |  16 +-
 .../gantt-chart/sidebar/modules/sidebar.tsx   |  16 +-
 .../global/product-updates/changelog.tsx      |  10 +-
 .../home/widgets/loaders/home-loader.tsx      |  19 +--
 .../home/widgets/loaders/quick-links.tsx      |  14 +-
 .../home/widgets/loaders/recent-activity.tsx  |  26 +--
 .../inbox/inbox-filter/filters/labels.tsx     |  14 +-
 .../inbox/inbox-filter/filters/members.tsx    |  14 +-
 .../inbox/inbox-filter/filters/state.tsx      |  14 +-
 .../modals/create-modal/issue-description.tsx |  10 +-
 .../inbox/modals/select-duplicate.tsx         |  17 +-
 .../core/components/inbox/sidebar/root.tsx    |  13 +-
 .../integration/single-integration-card.tsx   |   8 +-
 .../integration/slack/select-channel.tsx      |   8 +-
 .../issue-detail/issue-activity/loader.tsx    |  55 ++++---
 .../issues/issue-detail/subscription.tsx      |   8 +-
 .../filters/header/filters/assignee.tsx       |  14 +-
 .../filters/header/filters/created-by.tsx     |  14 +-
 .../filters/header/filters/cycle.tsx          |  14 +-
 .../filters/header/filters/labels.tsx         |  14 +-
 .../filters/header/filters/mentions.tsx       |  14 +-
 .../filters/header/filters/module.tsx         |  14 +-
 .../filters/header/filters/project.tsx        |  14 +-
 .../filters/header/filters/state.tsx          |  14 +-
 .../components/description-editor.tsx         |  40 ++---
 .../issues/parent-issues-list-modal.tsx       |  17 +-
 .../issues/peek-overview/loader.tsx           | 148 +++++++++---------
 .../labels/project-setting-label-list.tsx     |  16 +-
 .../license/modal/card/checkout-button.tsx    |  18 ++-
 .../license/modal/card/talk-to-sales.tsx      |  18 ++-
 .../modules/analytics-sidebar/root.tsx        |  17 +-
 .../modules/dropdowns/filters/lead.tsx        |  14 +-
 .../modules/dropdowns/filters/members.tsx     |  14 +-
 .../pages/loaders/page-content-loader.tsx     | 118 +++++++-------
 .../components/pages/loaders/page-loader.tsx  |  34 ++--
 .../core/components/pages/version/editor.tsx  |  68 ++++----
 .../components/profile/overview/activity.tsx  |  19 ++-
 .../overview/priority-distribution.tsx        |  19 ++-
 .../components/profile/overview/stats.tsx     |  15 +-
 apps/web/core/components/profile/sidebar.tsx  |  22 +--
 .../core/components/project-states/loader.tsx |  17 +-
 .../project/dropdowns/filters/lead.tsx        |  14 +-
 .../project/dropdowns/filters/members.tsx     |  14 +-
 .../core/components/project/form-loader.tsx   |  57 ++++---
 .../project-settings-member-defaults.tsx      |  18 ++-
 .../project/publish-project/modal.tsx         |  17 +-
 apps/web/core/components/readonly/state.tsx   |  12 +-
 .../rich-filters/filter-item/loader.tsx       |   9 +-
 .../components/rich-filters/filters-row.tsx   |  11 +-
 .../stickies/layout/stickies-infinite.tsx     |  11 +-
 .../stickies/layout/stickies-loader.tsx       |  80 ++++++----
 .../project-inbox/inbox-layout-loader.tsx     |  20 +--
 .../workspace/sidebar/projects-list.tsx       |  14 +-
 .../workspace/sidebar/workspace-menu-root.tsx |  12 +-
 75 files changed, 955 insertions(+), 754 deletions(-)

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 a644c40b6e6..85b55242aa0 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx
@@ -9,10 +9,10 @@ import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
 import useSWR from "swr";
 // plane imports
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { useTranslation } from "@plane/i18n";
 import type { TIssue } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
-import { Loader } from "@plane/ui";
 // 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,22 @@ export const IssueDetailsPage = observer(function IssueDetailsPage({ params }: R
 
   if (issueLoader) {
     return (
-      <Loader 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 aria-label="Loading work item details">
+        <div className="flex h-full gap-5 p-5">
+          <div className="basis-2/3 space-y-2">
+            <SkeletonItem blockSize="30px" inlineSize="40%" />
+            <SkeletonItem blockSize="15px" inlineSize="60%" />
+            <SkeletonItem blockSize="15px" inlineSize="60%" />
+            <SkeletonItem blockSize="15px" inlineSize="40%" />
+          </div>
+          <div className="basis-1/3 space-y-3">
+            <SkeletonItem blockSize="30px" />
+            <SkeletonItem blockSize="30px" />
+            <SkeletonItem blockSize="30px" />
+            <SkeletonItem blockSize="30px" />
+          </div>
         </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" />
-        </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 c9d7d890b48..6305cd69f5d 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
@@ -11,7 +11,7 @@ import useSWR from "swr";
 import { Banner } from "@plane/propel/banner";
 import { Button } from "@plane/propel/button";
 import { ArchiveOutline } from "@makeplane/propel/icons";
-import { Loader } from "@plane/ui";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 // components
 import { PageHead } from "@/components/core/page-title";
 import { IssueDetailRoot } from "@/components/issues/issue-detail";
@@ -51,20 +51,22 @@ function ArchivedIssueDetailsPage({ params }: Route.ComponentProps) {
     <>
       <PageHead title={pageTitle} />
       {issueLoader ? (
-        <Loader 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%" />
-          </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 aria-label="Loading work item details">
+          <div className="flex h-full gap-5 p-5">
+            <div className="basis-2/3 space-y-2">
+              <SkeletonItem blockSize="30px" inlineSize="40%" />
+              <SkeletonItem blockSize="15px" inlineSize="60%" />
+              <SkeletonItem blockSize="15px" inlineSize="60%" />
+              <SkeletonItem blockSize="15px" inlineSize="40%" />
+            </div>
+            <div className="basis-1/3 space-y-3">
+              <SkeletonItem blockSize="30px" />
+              <SkeletonItem blockSize="30px" />
+              <SkeletonItem blockSize="30px" />
+              <SkeletonItem blockSize="30px" />
+            </div>
           </div>
-        </Loader>
+        </Skeleton>
       ) : (
         <>
           <Banner
diff --git a/apps/web/core/components/analytics/insight-card.tsx b/apps/web/core/components/analytics/insight-card.tsx
index d8a30a1c91c..e8e706eeef3 100644
--- a/apps/web/core/components/analytics/insight-card.tsx
+++ b/apps/web/core/components/analytics/insight-card.tsx
@@ -6,8 +6,8 @@
 
 // plane package imports
 import React from "react";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import type { IAnalyticsResponseFields } from "@plane/types";
-import { Loader } from "@plane/ui";
 
 export type InsightCardProps = {
   data?: IAnalyticsResponseFields;
@@ -27,7 +27,9 @@ function InsightCard(props: InsightCardProps) {
           <div className="text-20 font-bold text-primary">{count}</div>
         </div>
       ) : (
-        <Loader.Item height="50px" width="100%" />
+        <Skeleton aria-label="Loading insight">
+          <SkeletonItem blockSize="50px" />
+        </Skeleton>
       )}
     </div>
   );
diff --git a/apps/web/core/components/analytics/insight-table/loader.tsx b/apps/web/core/components/analytics/insight-table/loader.tsx
index e07da237466..f378ad96d3d 100644
--- a/apps/web/core/components/analytics/insight-table/loader.tsx
+++ b/apps/web/core/components/analytics/insight-table/loader.tsx
@@ -6,8 +6,8 @@
 
 import * as React from "react";
 import type { ColumnDef } from "@tanstack/react-table";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@plane/propel/table";
-import { Loader } from "@plane/ui";
 
 interface TableSkeletonProps {
   columns: ColumnDef<any>[];
@@ -16,27 +16,29 @@ interface TableSkeletonProps {
 
 export function TableLoader({ columns, rows }: TableSkeletonProps) {
   return (
-    <Table>
-      <TableHeader>
-        <TableRow>
-          {columns.map((column, index) => (
-            <TableHead key={column.header?.toString() ?? index}>
-              {typeof column.header === "string" ? column.header : ""}
-            </TableHead>
-          ))}
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {Array.from({ length: rows }).map((_, rowIndex) => (
-          <TableRow key={rowIndex}>
-            {columns.map((_, colIndex) => (
-              <TableCell key={colIndex}>
-                <Loader.Item height="20px" width="100%" />
-              </TableCell>
+    <Skeleton aria-label="Loading table">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            {columns.map((column, index) => (
+              <TableHead key={column.header?.toString() ?? index}>
+                {typeof column.header === "string" ? column.header : ""}
+              </TableHead>
             ))}
           </TableRow>
-        ))}
-      </TableBody>
-    </Table>
+        </TableHeader>
+        <TableBody>
+          {Array.from({ length: rows }).map((_, rowIndex) => (
+            <TableRow key={rowIndex}>
+              {columns.map((_, colIndex) => (
+                <TableCell key={colIndex}>
+                  <SkeletonItem blockSize="20px" />
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </Skeleton>
   );
 }
diff --git a/apps/web/core/components/analytics/loaders.tsx b/apps/web/core/components/analytics/loaders.tsx
index c298dd00158..d14f0468e09 100644
--- a/apps/web/core/components/analytics/loaders.tsx
+++ b/apps/web/core/components/analytics/loaders.tsx
@@ -4,21 +4,27 @@
  * See the LICENSE file for details.
  */
 
-import { Loader } from "@plane/ui";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/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 aria-label="Loading chart">
+        <div className="h-full w-full">
+          <SkeletonItem blockSize="100%" />
+        </div>
+      </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 aria-label="Loading chart">
+          <div className="h-12 w-full">
+            <SkeletonItem blockSize="100%" />
+          </div>
+        </Skeleton>
+        <Skeleton aria-label="Loading chart">
+          <div className="h-full w-full">
+            <SkeletonItem blockSize="100%" />
+          </div>
+        </Skeleton>
       </div>
     </div>
   );
@@ -26,8 +32,10 @@ export function ProjectInsightsLoader() {
 
 export function ChartLoader() {
   return (
-    <Loader className="h-[350px] w-full">
-      <Loader.Item height="100%" width="100%" />
-    </Loader>
+    <Skeleton aria-label="Loading chart">
+      <div className="h-[350px] w-full">
+        <SkeletonItem blockSize="100%" />
+      </div>
+    </Skeleton>
   );
 }
diff --git a/apps/web/core/components/analytics/overview/active-projects.tsx b/apps/web/core/components/analytics/overview/active-projects.tsx
index 1ad22dc5423..fbbf0f5b09c 100644
--- a/apps/web/core/components/analytics/overview/active-projects.tsx
+++ b/apps/web/core/components/analytics/overview/active-projects.tsx
@@ -9,8 +9,8 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
 // plane package imports
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { useTranslation } from "@plane/i18n";
-import { Loader } from "@plane/ui";
 // plane web hooks
 import { useAnalytics } from "@/hooks/store/use-analytics";
 import { useProject } from "@/hooks/store/use-project";
@@ -39,8 +39,15 @@ const ActiveProjects = observer(function ActiveProjects() {
       className="md:col-span-2"
     >
       <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%" />)}
+        {isProjectAnalyticsCountLoading && (
+          <Skeleton aria-label="Loading active projects">
+            <div className="flex flex-col gap-4">
+              {Array.from({ length: 5 }).map((_, index) => (
+                <SkeletonItem key={index} blockSize="40px" />
+              ))}
+            </div>
+          </Skeleton>
+        )}
         {!isProjectAnalyticsCountLoading &&
           projectAnalyticsCount?.map((project) => <ActiveProjectItem key={project.id} project={project} />)}
       </div>
diff --git a/apps/web/core/components/automation/auto-archive-automation.tsx b/apps/web/core/components/automation/auto-archive-automation.tsx
index cb0ee841bf7..c8a0018d0af 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 "@plane/i18n";
 import type { IProject } from "@plane/types";
 import { Switch } from "@makeplane/propel/components/switch";
-import { CustomSelect, Loader } from "@plane/ui";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { CustomSelect } from "@plane/ui";
 // component
 import { SelectMonthModal } from "@/components/automation";
 import { SettingsControlItem } from "@/components/settings/control-item";
@@ -125,9 +126,11 @@ export const AutoArchiveAutomation = observer(function AutoArchiveAutomation(pro
             </div>
           )
         ) : (
-          <Loader className="ml-13">
-            <Loader.Item height="50px" />
-          </Loader>
+          <Skeleton aria-label="Loading auto-archive settings">
+            <div className="ml-13">
+              <SkeletonItem blockSize="50px" />
+            </div>
+          </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 bf8c5301b3d..aea06d01b65 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 "@plane/i18n";
 import { StateGroupIcon } from "@plane/propel/icons";
 import type { IProject } from "@plane/types";
 import { Switch } from "@makeplane/propel/components/switch";
-import { CustomSelect, CustomSearchSelect, Loader } from "@plane/ui";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { CustomSelect, CustomSearchSelect } from "@plane/ui";
 import { SelectMonthModal } from "@/components/automation";
 import { SettingsControlItem } from "@/components/settings/control-item";
 // hooks
@@ -188,9 +189,11 @@ export const AutoCloseAutomation = observer(function AutoCloseAutomation(props:
             </div>
           )
         ) : (
-          <Loader className="ml-13">
-            <Loader.Item height="50px" />
-          </Loader>
+          <Skeleton aria-label="Loading auto-close settings">
+            <div className="ml-13">
+              <SkeletonItem blockSize="50px" />
+            </div>
+          </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 85f1e5b70cb..5f116b38ce9 100644
--- a/apps/web/core/components/base-layouts/gantt/sidebar.tsx
+++ b/apps/web/core/components/base-layouts/gantt/sidebar.tsx
@@ -7,8 +7,9 @@
 import type { RefObject } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import type { IBaseLayoutsBaseItem, IBlockUpdateData } from "@plane/types";
-import { Loader, Row } from "@plane/ui";
+import { Row } from "@plane/ui";
 import { cn } from "@plane/utils";
 import RenderIfVisible from "@/components/core/render-if-visible-HOC";
 import { BLOCK_HEIGHT } from "@/components/gantt-chart/constants";
@@ -143,12 +144,14 @@ 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 aria-label="Loading sidebar">
+          <div className="space-y-3 pr-2">
+            <SkeletonItem blockSize="34px" />
+            <SkeletonItem blockSize="34px" />
+            <SkeletonItem blockSize="34px" />
+            <SkeletonItem blockSize="34px" />
+          </div>
+        </Skeleton>
       )}
     </div>
   );
diff --git a/apps/web/core/components/common/filters/created-by.tsx b/apps/web/core/components/common/filters/created-by.tsx
index f70cef7ae5c..5d1e2990f01 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 "@plane/ui";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 // components
 import { getFileURL } from "@plane/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -103,11 +103,13 @@ 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 aria-label="Loading created-by options">
+              <div className="space-y-2">
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+              </div>
+            </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 6ded29e8200..6d71e5fa13c 100644
--- a/apps/web/core/components/core/description-versions/modal.tsx
+++ b/apps/web/core/components/core/description-versions/modal.tsx
@@ -14,8 +14,9 @@ import { Button } from "@plane/propel/button";
 import { ChevronLeftOutline, ChevronRightOutline, CopyOutline } from "@makeplane/propel/icons";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import type { TDescriptionVersion } from "@plane/types";
-import { EModalPosition, EModalWidth, Loader, ModalCore } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 import { calculateTimeAgo, cn, getFileURL } from "@plane/utils";
 // components
 import { RichTextEditor } from "@/components/editor/rich-text";
@@ -139,20 +140,22 @@ export const DescriptionVersionsModal = observer(function DescriptionVersionsMod
               workspaceSlug={workspaceSlug}
             />
           ) : (
-            <div className="space-y-1">
-              <Loader.Item width="300px" height="15px" />
-              <Loader.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 aria-label="Loading description version">
+              <div className="space-y-1">
+                <SkeletonItem blockSize="15px" inlineSize="300px" />
+                <SkeletonItem blockSize="15px" inlineSize="400px" />
+                <div className="flex items-center gap-2">
+                  <SkeletonItem blockSize="15px" inlineSize="20px" />
+                  <SkeletonItem blockSize="15px" inlineSize="500px" />
+                </div>
+                <div className="flex items-center gap-2">
+                  <SkeletonItem blockSize="15px" inlineSize="20px" />
+                  <SkeletonItem blockSize="15px" inlineSize="200px" />
+                </div>
+                <SkeletonItem blockSize="15px" inlineSize="300px" />
+                <SkeletonItem blockSize="15px" inlineSize="200px" />
               </div>
-              <div className="flex items-center gap-2">
-                <Loader.Item width="20px" height="15px" />
-                <Loader.Item width="200px" height="15px" />
-              </div>
-              <Loader.Item width="300px" height="15px" />
-              <Loader.Item width="200px" height="15px" />
-            </div>
+            </Skeleton>
           )}
         </div>
         {/* End version description */}
diff --git a/apps/web/core/components/core/image-picker-popover.tsx b/apps/web/core/components/core/image-picker-popover.tsx
index be049801d85..ed8fe836b4a 100644
--- a/apps/web/core/components/core/image-picker-popover.tsx
+++ b/apps/web/core/components/core/image-picker-popover.tsx
@@ -14,13 +14,13 @@ import useSWR from "swr";
 import { Popover } from "@headlessui/react";
 // plane imports
 import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { ACCEPTED_COVER_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
 import { Tabs } from "@plane/propel/tabs";
 import { Button, getButtonStyling } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EFileAssetType } from "@plane/types";
-import { Loader } from "@plane/ui";
 // helpers
 import { STATIC_COVER_IMAGES, getCoverImageDisplayURL } from "@/helpers/cover-image.helper";
 // hooks
@@ -272,16 +272,18 @@ 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 aria-label="Loading images">
+                          <div className="grid grid-cols-4 gap-4">
+                            <SkeletonItem blockSize="80px" />
+                            <SkeletonItem blockSize="80px" />
+                            <SkeletonItem blockSize="80px" />
+                            <SkeletonItem blockSize="80px" />
+                            <SkeletonItem blockSize="80px" />
+                            <SkeletonItem blockSize="80px" />
+                            <SkeletonItem blockSize="80px" />
+                            <SkeletonItem blockSize="80px" />
+                          </div>
+                        </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 0c89899a29a..d43c2897965 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
@@ -15,10 +15,11 @@ import { Combobox } from "@headlessui/react";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { SearchOutline } from "@makeplane/propel/icons";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { ISearchIssueResponse, IUser } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
-import { Loader, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/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,14 @@ 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 aria-label="Loading work items">
+                <div className="space-y-3 p-3">
+                  <SkeletonItem blockSize="40px" />
+                  <SkeletonItem blockSize="40px" />
+                  <SkeletonItem blockSize="40px" />
+                  <SkeletonItem blockSize="40px" />
+                </div>
+              </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 f0967c87e04..f927e2b46b8 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 "@plane/types";
 // ui
 import { Switch } from "@makeplane/propel/components/switch";
-import { Loader, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 import { generateWorkItemLink, getTabIndex } from "@plane/utils";
 // helpers
 // hooks
@@ -235,12 +236,14 @@ 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 aria-label="Loading work items">
+              <div className="space-y-3 p-3">
+                <SkeletonItem blockSize="40px" />
+                <SkeletonItem blockSize="40px" />
+                <SkeletonItem blockSize="40px" />
+                <SkeletonItem blockSize="40px" />
+              </div>
+            </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 493f4dc5826..f6c56f65c0b 100644
--- a/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx
+++ b/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx
@@ -16,11 +16,11 @@ import { Avatar } from "@makeplane/propel/components/avatar";
 import { useTranslation } from "@plane/i18n";
 import { PriorityIcon } from "@plane/propel/icons";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import type { TWorkItemFilterCondition } from "@plane/shared-state";
 import type { ICycle } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
 // ui
-import { Loader } from "@plane/ui";
 import { cn, renderFormattedDate, renderFormattedDateWithoutYear, getFileURL } from "@plane/utils";
 // assets
 import darkAssigneeAsset from "@/app/assets/empty-state/active-cycle/assignee-dark.webp?url";
@@ -97,11 +97,13 @@ 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 aria-label="Loading cycle stats">
+      <div className="space-y-3">
+        <SkeletonItem blockSize="30px" />
+        <SkeletonItem blockSize="30px" />
+        <SkeletonItem blockSize="30px" />
+      </div>
+    </Skeleton>
   );
 
   return cycleId ? (
@@ -370,8 +372,10 @@ 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 aria-label="Loading cycle stats">
+      <div 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">
+        <SkeletonItem blockSize="17rem" />
+      </div>
+    </Skeleton>
   );
 });
diff --git a/apps/web/core/components/cycles/active-cycle/productivity.tsx b/apps/web/core/components/cycles/active-cycle/productivity.tsx
index c3ebdfcbe8f..9098d9216e4 100644
--- a/apps/web/core/components/cycles/active-cycle/productivity.tsx
+++ b/apps/web/core/components/cycles/active-cycle/productivity.tsx
@@ -9,9 +9,9 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { useTheme } from "next-themes";
 // plane imports
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { useTranslation } from "@plane/i18n";
 import type { ICycle, TCycleEstimateType } from "@plane/types";
-import { Loader } from "@plane/ui";
 // 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,10 @@ 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 aria-label="Loading cycle productivity">
+      <div className="flex min-h-[17rem] flex-col gap-5 rounded-lg border border-subtle bg-surface-1">
+        <SkeletonItem blockSize="100%" />
+      </div>
+    </Skeleton>
   );
 });
diff --git a/apps/web/core/components/cycles/active-cycle/progress.tsx b/apps/web/core/components/cycles/active-cycle/progress.tsx
index d5d402c4ac2..ef91c36bae6 100644
--- a/apps/web/core/components/cycles/active-cycle/progress.tsx
+++ b/apps/web/core/components/cycles/active-cycle/progress.tsx
@@ -11,8 +11,8 @@ import { PROGRESS_STATE_GROUPS_DETAILS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import type { TWorkItemFilterCondition } from "@plane/shared-state";
 import { LinearProgress } from "@makeplane/propel/components/linear-progress";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import type { ICycle } from "@plane/types";
-import { Loader } from "@plane/ui";
 // 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,10 @@ 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 aria-label="Loading cycle progress">
+      <div className="flex min-h-[17rem] flex-col gap-5 rounded-lg border border-subtle bg-surface-1">
+        <SkeletonItem blockSize="100%" />
+      </div>
+    </Skeleton>
   );
 });
diff --git a/apps/web/core/components/cycles/analytics-sidebar/root.tsx b/apps/web/core/components/cycles/analytics-sidebar/root.tsx
index 7c84e4daeac..887cfd0aca7 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/root.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/root.tsx
@@ -4,10 +4,10 @@
  * See the LICENSE file for details.
  */
 
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { Loader } from "@plane/ui";
 // local imports
 import useCyclesDetails from "../active-cycle/use-cycles-details";
 import { CycleAnalyticsProgress } from "./issue-progress";
@@ -34,17 +34,19 @@ export const CycleDetailsSidebar = observer(function CycleDetailsSidebar(props:
 
   if (!cycleDetails)
     return (
-      <Loader className="px-5">
-        <div className="space-y-2">
-          <Loader.Item height="15px" width="50%" />
-          <Loader.Item height="15px" width="30%" />
+      <Skeleton aria-label="Loading cycle sidebar details">
+        <div className="px-5">
+          <div className="space-y-2">
+            <SkeletonItem blockSize="15px" inlineSize="50%" />
+            <SkeletonItem blockSize="15px" inlineSize="30%" />
+          </div>
+          <div className="mt-8 space-y-3">
+            <SkeletonItem blockSize="30px" />
+            <SkeletonItem blockSize="30px" />
+            <SkeletonItem blockSize="30px" />
+          </div>
         </div>
-        <div className="mt-8 space-y-3">
-          <Loader.Item height="30px" />
-          <Loader.Item height="30px" />
-          <Loader.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 9467ec63afc..f6a3d2916b7 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/sidebar-chart.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/sidebar-chart.tsx
@@ -7,9 +7,9 @@
 import { Fragment } from "react";
 import { observer } from "mobx-react";
 // plane imports
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { useTranslation } from "@plane/i18n";
 import type { TCycleEstimateType } from "@plane/types";
-import { Loader } from "@plane/ui";
 import { getDate } from "@plane/utils";
 // components
 import ProgressChart from "@/components/core/sidebar/progress-chart";
@@ -79,9 +79,11 @@ 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 aria-label="Loading cycle progress chart">
+              <div className="mt-4 h-[160px] w-full">
+                <SkeletonItem blockSize="100%" />
+              </div>
+            </Skeleton>
           )}
         </div>
       </div>
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 8be09783740..3aaa52dd57d 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 @@
  */
 
 // plane imports
-import { Loader } from "@plane/ui";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { cn } from "@plane/utils";
 
 type Props = {
@@ -16,24 +16,26 @@ export function DescriptionInputLoader(props: Props) {
   const { className } = props;
 
   return (
-    <Loader className={cn("space-y-2", className)}>
-      <Loader.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 aria-label="Loading description">
+      <div className={cn("space-y-2", className)}>
+        <SkeletonItem blockSize="26px" />
+        <div className="flex items-center gap-2">
+          <SkeletonItem blockSize="26px" inlineSize="26px" />
+          <SkeletonItem blockSize="26px" inlineSize="400px" />
+        </div>
+        <div className="flex items-center gap-2">
+          <SkeletonItem blockSize="26px" inlineSize="26px" />
+          <SkeletonItem blockSize="26px" inlineSize="400px" />
+        </div>
+        <SkeletonItem blockSize="26px" inlineSize="80%" />
+        <div className="flex items-center gap-2">
+          <SkeletonItem blockSize="26px" inlineSize="50%" />
+        </div>
+        <div className="border-0.5 absolute right-3.5 bottom-2 z-10 flex items-center gap-2">
+          <SkeletonItem blockSize="26px" inlineSize="100px" />
+          <SkeletonItem blockSize="26px" inlineSize="50px" />
+        </div>
       </div>
-      <div className="flex items-center gap-2">
-        <Loader.Item width="26px" height="26px" />
-        <Loader.Item width="400px" height="26px" />
-      </div>
-      <Loader.Item width="80%" height="26px" />
-      <div className="flex items-center gap-2">
-        <Loader.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" />
-      </div>
-    </Loader>
+    </Skeleton>
   );
 }
diff --git a/apps/web/core/components/estimates/loader-screen.tsx b/apps/web/core/components/estimates/loader-screen.tsx
index d858df1d971..3d2d600a4bb 100644
--- a/apps/web/core/components/estimates/loader-screen.tsx
+++ b/apps/web/core/components/estimates/loader-screen.tsx
@@ -4,15 +4,16 @@
  * See the LICENSE file for details.
  */
 
-import { Loader } from "@plane/ui";
-
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/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 aria-label="Loading estimates">
+      <div className="mt-5 space-y-5">
+        <SkeletonItem blockSize="40px" />
+        <SkeletonItem blockSize="40px" />
+        <SkeletonItem blockSize="40px" />
+        <SkeletonItem blockSize="40px" />
+      </div>
+    </Skeleton>
   );
 }
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 7178f054769..c6656923757 100644
--- a/apps/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx
+++ b/apps/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx
@@ -8,9 +8,9 @@ import type { RefObject } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
 // ui
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { GANTT_TIMELINE_TYPE } from "@plane/types";
 import type { IBlockUpdateData } from "@plane/types";
-import { Loader } from "@plane/ui";
 // components
 import RenderIfVisible from "@/components/core/render-if-visible-HOC";
 import { GanttLayoutListItemLoader } from "@/components/ui/loader/layouts/gantt-layout-loader";
@@ -122,12 +122,14 @@ 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 aria-label="Loading sidebar">
+          <div className="space-y-3 pr-2">
+            <SkeletonItem blockSize="34px" />
+            <SkeletonItem blockSize="34px" />
+            <SkeletonItem blockSize="34px" />
+            <SkeletonItem blockSize="34px" />
+          </div>
+        </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 0bfaa7c80b5..1e210df743d 100644
--- a/apps/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx
+++ b/apps/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx
@@ -6,9 +6,9 @@
 
 import { observer } from "mobx-react";
 // ui
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { GANTT_TIMELINE_TYPE } from "@plane/types";
 import type { IBlockUpdateData } from "@plane/types";
-import { Loader } from "@plane/ui";
 // components
 // hooks
 import { useTimeLineChart } from "@/hooks/use-timeline-chart";
@@ -52,12 +52,14 @@ 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 aria-label="Loading sidebar">
+          <div className="space-y-3 pr-2">
+            <SkeletonItem blockSize="34px" />
+            <SkeletonItem blockSize="34px" />
+            <SkeletonItem blockSize="34px" />
+            <SkeletonItem blockSize="34px" />
+          </div>
+        </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 cfddb2af4f2..58468de6d73 100644
--- a/apps/web/core/components/global/product-updates/changelog.tsx
+++ b/apps/web/core/components/global/product-updates/changelog.tsx
@@ -4,10 +4,10 @@
  * See the LICENSE file for details.
  */
 
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { useState, useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 // hooks
-import { Loader } from "@plane/ui";
 import { ProductUpdatesFallback } from "@/components/global/product-updates/fallback";
 import { useInstance } from "@/hooks/store/use-instance";
 
@@ -74,9 +74,11 @@ 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 aria-label="Loading changelog">
+          <div className="absolute inset-0 flex h-full w-full flex-col items-center justify-center gap-3">
+            <SkeletonItem blockSize="95%" inlineSize="95%" />
+          </div>
+        </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 571ef807335..8212fc9e9e5 100644
--- a/apps/web/core/components/home/widgets/loaders/home-loader.tsx
+++ b/apps/web/core/components/home/widgets/loaders/home-loader.tsx
@@ -5,22 +5,23 @@
  */
 
 import { range } from "lodash-es";
-// ui
-import { Loader } from "@plane/ui";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 
 export function HomeLoader() {
   return (
     <>
       {range(3).map((index) => (
         <div key={index}>
-          <div className="mb-2">
-            <div className="mb-4 text-14 font-semibold text-tertiary">
-              <Loader.Item height="20px" width="100px" />
+          <Skeleton aria-label="Loading home widget">
+            <div className="mb-2">
+              <div className="mb-4">
+                <SkeletonItem blockSize="20px" inlineSize="100px" />
+              </div>
+              <div className="flex h-[110px] w-full items-center justify-center gap-2 rounded-sm text-placeholder">
+                <SkeletonItem blockSize="100%" />
+              </div>
             </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>
-          </div>
+          </Skeleton>
         </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 4a12645af8b..249b5ed7592 100644
--- a/apps/web/core/components/home/widgets/loaders/quick-links.tsx
+++ b/apps/web/core/components/home/widgets/loaders/quick-links.tsx
@@ -4,16 +4,18 @@
  * See the LICENSE file for details.
  */
 
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { range } from "lodash-es";
 // ui
-import { Loader } from "@plane/ui";
 
 export function QuickLinksWidgetLoader() {
   return (
-    <Loader className="flex flex-wrap gap-2 rounded-xl bg-surface-1">
-      {range(4).map((index) => (
-        <Loader.Item key={index} height="56px" width="230px" />
-      ))}
-    </Loader>
+    <Skeleton aria-label="Loading quick links">
+      <div className="flex flex-wrap gap-2 rounded-xl bg-surface-1">
+        {range(4).map((index) => (
+          <SkeletonItem key={index} blockSize="56px" inlineSize="230px" />
+        ))}
+      </div>
+    </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 0b513f117f3..7fd9cf89844 100644
--- a/apps/web/core/components/home/widgets/loaders/recent-activity.tsx
+++ b/apps/web/core/components/home/widgets/loaders/recent-activity.tsx
@@ -4,23 +4,25 @@
  * See the LICENSE file for details.
  */
 
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { range } from "lodash-es";
 // ui
-import { Loader } from "@plane/ui";
 
 export function RecentActivityWidgetLoader() {
   return (
-    <Loader 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 aria-label="Loading recent activity">
+      <div 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">
+              <SkeletonItem blockSize="32px" inlineSize="32px" />
+            </div>
+            <div className="my-auto w-full flex-shrink-0 space-y-3">
+              <SkeletonItem blockSize="15px" inlineSize="70%" />
+            </div>
           </div>
-          <div className="my-auto w-full flex-shrink-0 space-y-3">
-            <Loader.Item height="15px" width="70%" />
-          </div>
-        </div>
-      ))}
-    </Loader>
+        ))}
+      </div>
+    </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 23e338b1d31..01ff49f68a8 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/labels.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/labels.tsx
@@ -6,8 +6,8 @@
 
 import { useState } from "react";
 import { observer } from "mobx-react";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import type { IIssueLabel } from "@plane/types";
-import { Loader } from "@plane/ui";
 // components
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
 // hooks
@@ -81,11 +81,13 @@ 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 aria-label="Loading labels">
+              <div className="space-y-2">
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+              </div>
+            </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 497a49f65ee..538ccf7a7d1 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/members.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/members.tsx
@@ -9,9 +9,9 @@ import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 // plane types
 import { Avatar } from "@makeplane/propel/components/avatar";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import type { TInboxIssueFilterMemberKeys } from "@plane/types";
 // plane ui
-import { Loader } from "@plane/ui";
 // components
 import { getFileURL } from "@plane/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -111,11 +111,13 @@ 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 aria-label="Loading members">
+              <div className="space-y-2">
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+              </div>
+            </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 4a4af021fce..063015f0f25 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/state.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/state.tsx
@@ -6,10 +6,10 @@
 
 import { useState } from "react";
 import { observer } from "mobx-react";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { EIconSize } from "@plane/constants";
 import { StateGroupIcon } from "@plane/propel/icons";
 import type { IState } from "@plane/types";
-import { Loader } from "@plane/ui";
 // components
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
 // hooks
@@ -86,11 +86,13 @@ 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 aria-label="Loading states">
+              <div className="space-y-2">
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+              </div>
+            </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 12d514e9dbc..d72ba151fed 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
@@ -7,12 +7,12 @@
 import type { RefObject } from "react";
 import { observer } from "mobx-react";
 // plane imports
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { ETabIndices } from "@plane/constants";
 import type { EditorRefApi } from "@plane/editor";
 import { useTranslation } from "@plane/i18n";
 import type { TIssue } from "@plane/types";
 import { EFileAssetType } from "@plane/types";
-import { Loader } from "@plane/ui";
 import { getDescriptionPlaceholderI18n, getTabIndex } from "@plane/utils";
 // components
 import { RichTextEditor } from "@/components/editor/rich-text/editor";
@@ -61,9 +61,11 @@ 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 aria-label="Loading issue description">
+        <div className="min-h-[6rem] rounded-md border border-subtle">
+          <SkeletonItem blockSize="140px" />
+        </div>
+      </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 1482226608d..9563a87706a 100644
--- a/apps/web/core/components/inbox/modals/select-duplicate.tsx
+++ b/apps/web/core/components/inbox/modals/select-duplicate.tsx
@@ -11,9 +11,10 @@ import { Combobox } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { SearchOutline } from "@makeplane/propel/icons";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { ISearchIssueResponse } from "@plane/types";
-import { Loader, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/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,14 @@ 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 aria-label="Loading work items">
+              <div className="space-y-3 p-3">
+                <SkeletonItem blockSize="40px" />
+                <SkeletonItem blockSize="40px" />
+                <SkeletonItem blockSize="40px" />
+                <SkeletonItem blockSize="40px" />
+              </div>
+            </Skeleton>
           ) : (
             <>{issueList}</>
           )}
diff --git a/apps/web/core/components/inbox/sidebar/root.tsx b/apps/web/core/components/inbox/sidebar/root.tsx
index e378c766d56..ef8e543f308 100644
--- a/apps/web/core/components/inbox/sidebar/root.tsx
+++ b/apps/web/core/components/inbox/sidebar/root.tsx
@@ -6,12 +6,13 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { useTranslation } from "@plane/i18n";
 import { EmptyStateDetailed } from "@plane/propel/empty-state";
 import type { TInboxIssueCurrentTab } from "@plane/types";
 import { EInboxIssueCurrentTab } from "@plane/types";
 // plane imports
-import { Header, Loader, EHeaderVariant } from "@plane/ui";
+import { Header, EHeaderVariant } from "@plane/ui";
 import { cn } from "@plane/utils";
 // components
 import { InboxSidebarLoader } from "@/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader";
@@ -174,10 +175,12 @@ 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 aria-label="Loading more work items">
+                  <div className="mx-auto w-full space-y-4 px-2 py-4">
+                    <SkeletonItem blockSize="64px" />
+                    <SkeletonItem blockSize="64px" />
+                  </div>
+                </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 889e6b70de0..e368735fbaf 100644
--- a/apps/web/core/components/integration/single-integration-card.tsx
+++ b/apps/web/core/components/integration/single-integration-card.tsx
@@ -13,9 +13,9 @@ import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import type { IAppIntegration, IWorkspaceIntegration } from "@plane/types";
 // ui
-import { Loader } from "@plane/ui";
 // 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 aria-label="Loading integration status">
+          <SkeletonItem blockSize="32px" inlineSize="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 3838329220b..2bf868a4bef 100644
--- a/apps/web/core/components/integration/slack/select-channel.tsx
+++ b/apps/web/core/components/integration/slack/select-channel.tsx
@@ -9,9 +9,9 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR, { mutate } from "swr";
 // types
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import type { IWorkspaceIntegration, ISlackIntegration } from "@plane/types";
 // ui
-import { Loader } from "@plane/ui";
 // fetch-keys
 import { SLACK_CHANNEL_INFO } from "@plane/constants";
 // hooks
@@ -102,9 +102,9 @@ export const SelectChannel = observer(function SelectChannel({ integration }: Pr
           />
         </button>
       ) : (
-        <Loader>
-          <Loader.Item height="35px" width="150px" />
-        </Loader>
+        <Skeleton aria-label="Loading slack channel">
+          <SkeletonItem blockSize="35px" inlineSize="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 0e5c3347d60..d2bd08fc41e 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
@@ -4,36 +4,43 @@
  * See the LICENSE file for details.
  */
 
-// plane imports
-import { Loader } from "@plane/ui";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 
 export function IssueActivityLoader() {
   return (
-    <Loader className="space-y-8">
-      <div className="flex items-start gap-3">
-        <Loader.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 aria-label="Loading issue activity">
+      <div className="space-y-8">
+        <div className="flex items-start gap-3">
+          <div className="shrink-0">
+            <SkeletonItem blockSize="28px" inlineSize="28px" />
+          </div>
+          <div className="w-full space-y-2">
+            <SkeletonItem blockSize="8px" inlineSize="60%" />
+            <SkeletonItem blockSize="8px" inlineSize="40%" />
+            <SkeletonItem blockSize="10px" />
+          </div>
         </div>
-      </div>
-      <div className="flex items-start gap-3">
-        <Loader.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%" />
+        <div className="flex items-start gap-3">
+          <div className="shrink-0">
+            <SkeletonItem blockSize="28px" inlineSize="28px" />
+          </div>
+          <div className="w-full space-y-2">
+            <SkeletonItem blockSize="8px" inlineSize="40%" />
+            <SkeletonItem blockSize="8px" inlineSize="60%" />
+            <SkeletonItem blockSize="10px" inlineSize="80%" />
+          </div>
         </div>
-      </div>
-      <div className="flex items-start gap-3">
-        <Loader.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%" />
+        <div className="flex items-start gap-3">
+          <div className="shrink-0">
+            <SkeletonItem blockSize="28px" inlineSize="28px" />
+          </div>
+          <div className="w-full space-y-2">
+            <SkeletonItem blockSize="8px" inlineSize="60%" />
+            <SkeletonItem blockSize="8px" inlineSize="40%" />
+            <SkeletonItem blockSize="10px" />
+          </div>
         </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 6b59dce9d88..a3f65e38e78 100644
--- a/apps/web/core/components/issues/issue-detail/subscription.tsx
+++ b/apps/web/core/components/issues/issue-detail/subscription.tsx
@@ -8,6 +8,7 @@ import { useState } from "react";
 import { isNil } from "lodash-es";
 import { observer } from "mobx-react";
 import { SubscribeOutline, UnsubscribeOutline } from "@makeplane/propel/icons";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 // plane-i18n
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
@@ -15,7 +16,6 @@ import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EIssueServiceType } from "@plane/types";
-import { Loader } from "@plane/ui";
 // 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 aria-label="Loading subscription">
+        <SkeletonItem blockSize="28px" inlineSize="106px" />
+      </Skeleton>
     );
 
   return (
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 33d324551b4..10e1825b6ba 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";
 // plane ui
 import { Avatar } from "@makeplane/propel/components/avatar";
-import { Loader } from "@plane/ui";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 // components
 import { getFileURL } from "@plane/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -103,11 +103,13 @@ 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 aria-label="Loading assignees">
+              <div className="space-y-2">
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+              </div>
+            </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 f6267432f3a..978462b4623 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";
 // plane ui
 import { Avatar } from "@makeplane/propel/components/avatar";
-import { Loader } from "@plane/ui";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 // components
 import { getFileURL } from "@plane/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -103,11 +103,13 @@ 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 aria-label="Loading created-by options">
+              <div className="space-y-2">
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+              </div>
+            </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 1368fee3f1d..6e57a5f7867 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
@@ -8,10 +8,10 @@ import React, { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { CycleGroupIcon } from "@plane/propel/icons";
 import type { TCycleGroups } from "@plane/types";
 // components
-import { Loader } from "@plane/ui";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
 import { useCycle } from "@/hooks/store/use-cycle";
 // ui
@@ -98,11 +98,13 @@ 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 aria-label="Loading cycles">
+              <div className="space-y-2">
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+              </div>
+            </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 f68b7755c6a..cbf932e87d6 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
@@ -7,9 +7,9 @@
 import React, { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import type { IIssueLabel } from "@plane/types";
 // components
-import { Loader } from "@plane/ui";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
 
 // ui
@@ -88,11 +88,13 @@ 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 aria-label="Loading labels">
+              <div className="space-y-2">
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+              </div>
+            </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 d872a33e3c7..cc1cd23e8fd 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";
 // plane ui
 import { Avatar } from "@makeplane/propel/components/avatar";
-import { Loader } from "@plane/ui";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 // components
 import { getFileURL } from "@plane/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -103,11 +103,13 @@ 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 aria-label="Loading mentions">
+              <div className="space-y-2">
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+              </div>
+            </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 2757c507822..96ac6fe0be7 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 "next/navigation";
 // components
 import { ModuleOutline } from "@makeplane/propel/icons";
-import { Loader } from "@plane/ui";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
 import { useModule } from "@/hooks/store/use-module";
 // ui
@@ -88,11 +88,13 @@ 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 aria-label="Loading modules">
+              <div className="space-y-2">
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+              </div>
+            </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 843ac016e86..36a39c1770d 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
@@ -8,8 +8,8 @@ import React, { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 // ui
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { Logo } from "@plane/propel/emoji-icon-picker";
-import { Loader } from "@plane/ui";
 // components
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
 // hooks
@@ -89,11 +89,13 @@ 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 aria-label="Loading projects">
+              <div className="space-y-2">
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+              </div>
+            </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 825a15a1819..b075d5bcad8 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
@@ -7,11 +7,11 @@
 import React, { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { EIconSize } from "@plane/constants";
 import { StateGroupIcon } from "@plane/propel/icons";
 import type { IState } from "@plane/types";
 // components
-import { Loader } from "@plane/ui";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
 // ui
 // types
@@ -87,11 +87,13 @@ 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 aria-label="Loading states">
+              <div className="space-y-2">
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+              </div>
+            </Skeleton>
           )}
         </div>
       )}
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 36098a176dc..a30afaad1bb 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
@@ -9,6 +9,7 @@ import { observer } from "mobx-react";
 import type { Control } from "react-hook-form";
 import { Controller } from "react-hook-form";
 import { AiStar1Outline } from "@makeplane/propel/icons";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 // plane imports
 import { ETabIndices } from "@plane/constants";
 import type { EditorRefApi } from "@plane/editor";
@@ -16,7 +17,6 @@ import { useTranslation } from "@plane/i18n";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TIssue } from "@plane/types";
 import { EFileAssetType } from "@plane/types";
-import { Loader } from "@plane/ui";
 import { getDescriptionPlaceholderI18n, getTabIndex } from "@plane/utils";
 // components
 import { GptAssistantPopover } from "@/components/core/modals/gpt-assistant-popover";
@@ -156,25 +156,27 @@ 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" />
-          <div className="flex items-center gap-2">
-            <Loader.Item width="26px" height="26px" />
-            <Loader.Item width="400px" height="26px" />
+        <Skeleton aria-label="Loading description">
+          <div className="max-h-64 min-h-[120px] space-y-2 overflow-hidden rounded-md border border-subtle p-3 py-2 pt-3">
+            <SkeletonItem blockSize="26px" />
+            <div className="flex items-center gap-2">
+              <SkeletonItem blockSize="26px" inlineSize="26px" />
+              <SkeletonItem blockSize="26px" inlineSize="400px" />
+            </div>
+            <div className="flex items-center gap-2">
+              <SkeletonItem blockSize="26px" inlineSize="26px" />
+              <SkeletonItem blockSize="26px" inlineSize="400px" />
+            </div>
+            <SkeletonItem blockSize="26px" inlineSize="80%" />
+            <div className="flex items-center gap-2">
+              <SkeletonItem blockSize="26px" inlineSize="50%" />
+            </div>
+            <div className="border-0.5 absolute right-3.5 bottom-2 z-10 flex items-center gap-2">
+              <SkeletonItem blockSize="26px" inlineSize="100px" />
+              <SkeletonItem blockSize="26px" inlineSize="50px" />
+            </div>
           </div>
-          <div className="flex items-center gap-2">
-            <Loader.Item width="26px" height="26px" />
-            <Loader.Item width="400px" height="26px" />
-          </div>
-          <Loader.Item width="80%" height="26px" />
-          <div className="flex items-center gap-2">
-            <Loader.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" />
-          </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 b96be7b0902..c99271fa19e 100644
--- a/apps/web/core/components/issues/parent-issues-list-modal.tsx
+++ b/apps/web/core/components/issues/parent-issues-list-modal.tsx
@@ -8,6 +8,7 @@ import React, { useEffect, useState } from "react";
 import { useParams } from "next/navigation";
 // icons
 import { RocketOutline, SearchOutline } from "@makeplane/propel/icons";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 // headless ui
 import { Combobox } from "@headlessui/react";
 // i18n
@@ -15,7 +16,7 @@ import { useTranslation } from "@plane/i18n";
 // types
 import type { ISearchIssueResponse } from "@plane/types";
 // ui
-import { Loader, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 import { generateWorkItemLink, getTabIndex } from "@plane/utils";
 // components
 import { IssueSearchModalEmptyState } from "@/components/core/modals/issue-search-modal-empty-state";
@@ -129,12 +130,14 @@ 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 aria-label="Loading work items">
+              <div className="space-y-3 p-3">
+                <SkeletonItem blockSize="40px" />
+                <SkeletonItem blockSize="40px" />
+                <SkeletonItem blockSize="40px" />
+                <SkeletonItem blockSize="40px" />
+              </div>
+            </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 51323d55588..5c434030da3 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 "@plane/ui";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 // hooks
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
@@ -20,91 +20,93 @@ export function IssuePeekOverviewLoader(props: TIssuePeekOverviewLoader) {
   const { isMobile } = usePlatformOS();
 
   return (
-    <Loader 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}>
-            <button onClick={removeRoutePeekId}>
-              <ArrowNarrowRightOutline className="h-4 w-4 text-tertiary hover:text-secondary" />
-            </button>
-          </Tooltip>
-          <Loader.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" />
-        </div>
-      </div>
-
-      {/* issue title and description and comments */}
-      <div className="space-y-3">
-        <Loader.Item width="100px" height="20px" />
-
-        <div className="space-y-1">
-          <Loader.Item width="300px" height="15px" />
-          <Loader.Item width="400px" height="15px" />
+    <Skeleton aria-label="Loading work item">
+      <div 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">
-            <Loader.Item width="20px" height="15px" />
-            <Loader.Item width="500px" height="15px" />
+            <Tooltip label="Close the peek view" disabled={isMobile}>
+              <button onClick={removeRoutePeekId}>
+                <ArrowNarrowRightOutline className="h-4 w-4 text-tertiary hover:text-secondary" />
+              </button>
+            </Tooltip>
+            <SkeletonItem blockSize="30px" inlineSize="30px" />
           </div>
           <div className="flex items-center gap-2">
-            <Loader.Item width="20px" height="15px" />
-            <Loader.Item width="200px" height="15px" />
+            <SkeletonItem blockSize="30px" inlineSize="80px" />
+            <SkeletonItem blockSize="30px" inlineSize="30px" />
+            <SkeletonItem blockSize="30px" inlineSize="30px" />
+            <SkeletonItem blockSize="30px" inlineSize="30px" />
           </div>
-          <Loader.Item width="300px" height="15px" />
-          <Loader.Item width="200px" height="15px" />
         </div>
 
-        <Loader.Item width="30px" height="30px" />
-      </div>
+        {/* issue title and description and comments */}
+        <div className="space-y-3">
+          <SkeletonItem blockSize="20px" inlineSize="100px" />
 
-      {/* sub issues */}
-      <div className="flex items-center justify-between gap-2">
-        <Loader.Item width="80px" height="20px" />
-        <Loader.Item width="100px" height="20px" />
-      </div>
+          <div className="space-y-1">
+            <SkeletonItem blockSize="15px" inlineSize="300px" />
+            <SkeletonItem blockSize="15px" inlineSize="400px" />
+            <div className="flex items-center gap-2">
+              <SkeletonItem blockSize="15px" inlineSize="20px" />
+              <SkeletonItem blockSize="15px" inlineSize="500px" />
+            </div>
+            <div className="flex items-center gap-2">
+              <SkeletonItem blockSize="15px" inlineSize="20px" />
+              <SkeletonItem blockSize="15px" inlineSize="200px" />
+            </div>
+            <SkeletonItem blockSize="15px" inlineSize="300px" />
+            <SkeletonItem blockSize="15px" inlineSize="200px" />
+          </div>
 
-      {/* attachments */}
-      <div className="space-y-3">
-        <Loader.Item width="80px" height="20px" />
-        <div className="flex items-center gap-2">
-          <Loader.Item width="250px" height="50px" />
-          <Loader.Item width="250px" height="50px" />
+          <SkeletonItem blockSize="30px" inlineSize="30px" />
         </div>
-      </div>
 
-      {/* properties */}
-      <div className="space-y-3">
-        <Loader.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" />
-          </div>
-          <div className="flex items-center gap-8">
-            <Loader.Item width="150px" height="25px" />
-            <Loader.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" />
-          </div>
-          <div className="flex items-center gap-8">
-            <Loader.Item width="150px" height="25px" />
-            <Loader.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" />
+        {/* sub issues */}
+        <div className="flex items-center justify-between gap-2">
+          <SkeletonItem blockSize="20px" inlineSize="80px" />
+          <SkeletonItem blockSize="20px" inlineSize="100px" />
+        </div>
+
+        {/* attachments */}
+        <div className="space-y-3">
+          <SkeletonItem blockSize="20px" inlineSize="80px" />
+          <div className="flex items-center gap-2">
+            <SkeletonItem blockSize="50px" inlineSize="250px" />
+            <SkeletonItem blockSize="50px" inlineSize="250px" />
           </div>
-          <div className="flex items-center gap-8">
-            <Loader.Item width="150px" height="25px" />
-            <Loader.Item width="150px" height="25px" />
+        </div>
+
+        {/* properties */}
+        <div className="space-y-3">
+          <SkeletonItem blockSize="20px" inlineSize="80px" />
+          <div className="space-y-2">
+            <div className="flex items-center gap-8">
+              <SkeletonItem blockSize="25px" inlineSize="150px" />
+              <SkeletonItem blockSize="25px" inlineSize="150px" />
+            </div>
+            <div className="flex items-center gap-8">
+              <SkeletonItem blockSize="25px" inlineSize="150px" />
+              <SkeletonItem blockSize="25px" inlineSize="150px" />
+            </div>
+            <div className="flex items-center gap-8">
+              <SkeletonItem blockSize="25px" inlineSize="150px" />
+              <SkeletonItem blockSize="25px" inlineSize="150px" />
+            </div>
+            <div className="flex items-center gap-8">
+              <SkeletonItem blockSize="25px" inlineSize="150px" />
+              <SkeletonItem blockSize="25px" inlineSize="150px" />
+            </div>
+            <div className="flex items-center gap-8">
+              <SkeletonItem blockSize="25px" inlineSize="150px" />
+              <SkeletonItem blockSize="25px" inlineSize="150px" />
+            </div>
+            <div className="flex items-center gap-8">
+              <SkeletonItem blockSize="25px" inlineSize="150px" />
+              <SkeletonItem blockSize="25px" inlineSize="150px" />
+            </div>
           </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 6bb506970ae..f82abb12655 100644
--- a/apps/web/core/components/labels/project-setting-label-list.tsx
+++ b/apps/web/core/components/labels/project-setting-label-list.tsx
@@ -8,12 +8,12 @@ import { useState, useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { EmptyStateCompact } from "@plane/propel/empty-state";
 import type { IIssueLabel } from "@plane/types";
-import { Loader } from "@plane/ui";
 import type { TLabelOperationsCallbacks } from "@/components/labels";
 import {
   CreateUpdateLabelInline,
@@ -160,12 +160,14 @@ 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 aria-label="Loading labels">
+              <div className="space-y-5">
+                <SkeletonItem blockSize="42px" />
+                <SkeletonItem blockSize="42px" />
+                <SkeletonItem blockSize="42px" />
+                <SkeletonItem blockSize="42px" />
+              </div>
+            </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 01de02caf85..880199438e7 100644
--- a/apps/web/core/components/license/modal/card/checkout-button.tsx
+++ b/apps/web/core/components/license/modal/card/checkout-button.tsx
@@ -6,9 +6,9 @@
 
 import { observer } from "mobx-react";
 // plane imports
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { Button } from "@plane/propel/button";
 import type { EProductSubscriptionEnum, IPaymentProduct, TSubscriptionPrice } from "@plane/types";
-import { Loader } from "@plane/ui";
 // local imports
 import { DiscountInfo } from "./discount-info";
 
@@ -52,9 +52,11 @@ 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 aria-label="Loading checkout button">
+              <div className="flex flex-col items-center justify-center">
+                <SkeletonItem blockSize="36px" inlineSize="4rem" />
+              </div>
+            </Skeleton>
           ) : (
             <DiscountInfo
               currency={price.currency}
@@ -68,9 +70,11 @@ 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 aria-label="Loading checkout button">
+          <div className="flex flex-col items-center justify-center">
+            <SkeletonItem blockSize="38px" inlineSize="14rem" />
+          </div>
+        </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 c12ee704229..33e0d51d876 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
@@ -7,9 +7,9 @@
 import { observer } from "mobx-react";
 // types
 // plane imports
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { getButtonStyling } from "@plane/propel/button";
 import type { EProductSubscriptionEnum, IPaymentProduct, TSubscriptionPrice } from "@plane/types";
-import { Loader } from "@plane/ui";
 import { cn } from "@plane/utils";
 // local imports
 import { BasePaidPlanCard } from "./base-paid-plan-card";
@@ -57,9 +57,11 @@ 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 aria-label="Loading price">
+              <div className="flex flex-col items-center justify-center">
+                <SkeletonItem blockSize="36px" inlineSize="4rem" />
+              </div>
+            </Skeleton>
           ) : (
             <>Quote on request</>
           )}
@@ -67,9 +69,11 @@ 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 aria-label="Loading price">
+          <div className="flex flex-col items-center justify-center">
+            <SkeletonItem blockSize="38px" inlineSize="14rem" />
+          </div>
+        </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/root.tsx b/apps/web/core/components/modules/analytics-sidebar/root.tsx
index 7c31983fa35..d60f20b4ad1 100644
--- a/apps/web/core/components/modules/analytics-sidebar/root.tsx
+++ b/apps/web/core/components/modules/analytics-sidebar/root.tsx
@@ -19,6 +19,7 @@ import {
   WorkItemsOutline,
 } from "@makeplane/propel/icons";
 import { Disclosure, Transition } from "@headlessui/react";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { MODULE_STATUS, EUserPermissions, EUserPermissionsLevel, EEstimateSystem } from "@plane/constants";
 // plane types
 import { useTranslation } from "@plane/i18n";
@@ -26,7 +27,7 @@ import { ModuleStatusIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { ILinkDetails, IModule, ModuleLink } from "@plane/types";
 // plane ui
-import { Loader, CustomSelect, TextArea } from "@plane/ui";
+import { CustomSelect, TextArea } from "@plane/ui";
 // components
 // helpers
 import { getDate, renderFormattedPayloadDate } from "@plane/utils";
@@ -139,17 +140,17 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
 
   if (!moduleDetails)
     return (
-      <Loader>
+      <Skeleton aria-label="Loading module sidebar details">
         <div className="space-y-2">
-          <Loader.Item height="15px" width="50%" />
-          <Loader.Item height="15px" width="30%" />
+          <SkeletonItem blockSize="15px" inlineSize="50%" />
+          <SkeletonItem blockSize="15px" inlineSize="30%" />
         </div>
         <div className="mt-8 space-y-3">
-          <Loader.Item height="30px" />
-          <Loader.Item height="30px" />
-          <Loader.Item height="30px" />
+          <SkeletonItem blockSize="30px" />
+          <SkeletonItem blockSize="30px" />
+          <SkeletonItem blockSize="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 b47ec8c3678..32bec15c69a 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";
 // plane ui
 import { Avatar } from "@makeplane/propel/components/avatar";
-import { Loader } from "@plane/ui";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 // components
 import { getFileURL } from "@plane/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -103,11 +103,13 @@ 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 aria-label="Loading lead options">
+              <div className="space-y-2">
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+              </div>
+            </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 b13b7e35886..c43502f4306 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";
 // plane ui
 import { Avatar } from "@makeplane/propel/components/avatar";
-import { Loader } from "@plane/ui";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 // components
 import { getFileURL } from "@plane/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -103,11 +103,13 @@ 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 aria-label="Loading members">
+              <div className="space-y-2">
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+              </div>
+            </Skeleton>
           )}
         </div>
       )}
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 e7f8cc2682e..fd15cc1edb0 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 @@
  */
 
 // plane imports
-import { Loader } from "@plane/ui";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { cn } from "@plane/utils";
 
 type Props = {
@@ -19,69 +19,79 @@ 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 aria-label="Loading page content">
+          <div className="relative flex items-center gap-1 pr-2">
+            <SkeletonItem blockSize="26px" inlineSize="26px" />
+            <SkeletonItem blockSize="26px" inlineSize="26px" />
+            <SkeletonItem blockSize="26px" inlineSize="26px" />
+            <SkeletonItem blockSize="26px" inlineSize="26px" />
+            <SkeletonItem blockSize="26px" inlineSize="26px" />
+            <SkeletonItem blockSize="26px" inlineSize="26px" />
+            <SkeletonItem blockSize="26px" inlineSize="26px" />
+          </div>
+        </Skeleton>
+        <Skeleton aria-label="Loading page content">
+          <div className="relative flex items-center gap-1 px-2">
+            <SkeletonItem blockSize="26px" inlineSize="26px" />
+            <SkeletonItem blockSize="26px" inlineSize="26px" />
+          </div>
+        </Skeleton>
+        <Skeleton aria-label="Loading page content">
+          <div className="relative flex items-center gap-1 px-2">
+            <SkeletonItem blockSize="26px" inlineSize="26px" />
+            <SkeletonItem blockSize="26px" inlineSize="26px" />
+          </div>
+        </Skeleton>
+        <Skeleton aria-label="Loading page content">
+          <div className="relative flex items-center gap-1 pl-2">
+            <SkeletonItem blockSize="26px" inlineSize="26px" />
+            <SkeletonItem blockSize="26px" inlineSize="26px" />
+          </div>
+        </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" />
-            <div className="space-y-2">
-              <div className="py-2">
-                <Loader.Item width="100%" height="36px" />
-              </div>
-              <Loader.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" />
-              </div>
-              <div className="py-2">
-                <Loader.Item width="60%" height="36px" />
-              </div>
-              <Loader.Item width="70%" height="22px" />
-              <Loader.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" />
-              </div>
-              <div className="py-2">
-                <Loader.Item width="50%" height="30px" />
-              </div>
-              <Loader.Item width="100%" height="22px" />
-              <div className="py-2">
-                <Loader.Item width="30%" height="30px" />
-              </div>
-              <Loader.Item width="30%" height="22px" />
-              <div className="relative flex items-center gap-2">
+          <Skeleton aria-label="Loading page content">
+            <div className="relative space-y-4">
+              <SkeletonItem blockSize="36px" inlineSize="50%" />
+              <div className="space-y-2">
                 <div className="py-2">
-                  <Loader.Item width="30px" height="30px" />
+                  <SkeletonItem blockSize="36px" />
+                </div>
+                <SkeletonItem blockSize="22px" inlineSize="80%" />
+                <div className="relative flex items-center gap-2">
+                  <SkeletonItem blockSize="30px" inlineSize="30px" />
+                  <SkeletonItem blockSize="22px" inlineSize="30%" />
+                </div>
+                <div className="py-2">
+                  <SkeletonItem blockSize="36px" inlineSize="60%" />
+                </div>
+                <SkeletonItem blockSize="22px" inlineSize="70%" />
+                <SkeletonItem blockSize="22px" inlineSize="30%" />
+                <div className="relative flex items-center gap-2">
+                  <SkeletonItem blockSize="30px" inlineSize="30px" />
+                  <SkeletonItem blockSize="22px" inlineSize="30%" />
+                </div>
+                <div className="py-2">
+                  <SkeletonItem blockSize="30px" inlineSize="50%" />
+                </div>
+                <SkeletonItem blockSize="22px" />
+                <div className="py-2">
+                  <SkeletonItem blockSize="30px" inlineSize="30%" />
+                </div>
+                <SkeletonItem blockSize="22px" inlineSize="30%" />
+                <div className="relative flex items-center gap-2">
+                  <div className="py-2">
+                    <SkeletonItem blockSize="30px" inlineSize="30px" />
+                  </div>
+                  <SkeletonItem blockSize="22px" inlineSize="30%" />
                 </div>
-                <Loader.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 8e7b9025b99..120310da66d 100644
--- a/apps/web/core/components/pages/loaders/page-loader.tsx
+++ b/apps/web/core/components/pages/loaders/page-loader.tsx
@@ -4,32 +4,36 @@
  * See the LICENSE file for details.
  */
 
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { range } from "lodash-es";
-import { Loader } from "@plane/ui";
 
 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" />
-          <div className="relative ml-auto flex items-center gap-2">
-            <Loader.Item width="100px" height="30px" />
-            <Loader.Item width="100px" height="30px" />
+        <Skeleton aria-label="Loading page">
+          <div className="relative flex items-center gap-2">
+            <SkeletonItem blockSize="30px" inlineSize="200px" />
+            <div className="relative ml-auto flex items-center gap-2">
+              <SkeletonItem blockSize="30px" inlineSize="100px" />
+              <SkeletonItem blockSize="30px" inlineSize="100px" />
+            </div>
           </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" />
-            <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 aria-label="Loading page" key={i}>
+            <div className="relative flex items-center gap-2 border-b border-subtle p-3 py-4">
+              <SkeletonItem blockSize="22px" inlineSize={`${250 + 10 * Math.floor(Math.random() * 10)}px`} />
+              <div className="relative ml-auto flex items-center gap-2">
+                <SkeletonItem blockSize="22px" inlineSize="60px" />
+                <SkeletonItem blockSize="22px" inlineSize="22px" />
+                <SkeletonItem blockSize="22px" inlineSize="22px" />
+                <SkeletonItem blockSize="22px" inlineSize="22px" />
+              </div>
             </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 e9b36ebdd43..b9f527eea83 100644
--- a/apps/web/core/components/pages/version/editor.tsx
+++ b/apps/web/core/components/pages/version/editor.tsx
@@ -7,9 +7,9 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import type { TDisplayConfig } from "@plane/editor";
 import type { JSONContent, TPageVersion } from "@plane/types";
-import { Loader } from "@plane/ui";
 import { isJSONContentEmpty } from "@plane/utils";
 // components
 import { DocumentEditor } from "@/components/editor/document/editor";
@@ -45,42 +45,44 @@ 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" />
-          <div className="space-y-2">
-            <div className="py-2">
-              <Loader.Item width="100%" height="36px" />
-            </div>
-            <Loader.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" />
-            </div>
-            <div className="py-2">
-              <Loader.Item width="60%" height="36px" />
-            </div>
-            <Loader.Item width="70%" height="22px" />
-            <Loader.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" />
-            </div>
-            <div className="py-2">
-              <Loader.Item width="50%" height="30px" />
-            </div>
-            <Loader.Item width="100%" height="22px" />
-            <div className="py-2">
-              <Loader.Item width="30%" height="30px" />
-            </div>
-            <Loader.Item width="30%" height="22px" />
-            <div className="relative flex items-center gap-2">
+        <Skeleton aria-label="Loading page version">
+          <div className="relative space-y-4">
+            <SkeletonItem blockSize="36px" inlineSize="50%" />
+            <div className="space-y-2">
               <div className="py-2">
-                <Loader.Item width="30px" height="30px" />
+                <SkeletonItem blockSize="36px" />
+              </div>
+              <SkeletonItem blockSize="22px" inlineSize="80%" />
+              <div className="relative flex items-center gap-2">
+                <SkeletonItem blockSize="30px" inlineSize="30px" />
+                <SkeletonItem blockSize="22px" inlineSize="30%" />
+              </div>
+              <div className="py-2">
+                <SkeletonItem blockSize="36px" inlineSize="60%" />
+              </div>
+              <SkeletonItem blockSize="22px" inlineSize="70%" />
+              <SkeletonItem blockSize="22px" inlineSize="30%" />
+              <div className="relative flex items-center gap-2">
+                <SkeletonItem blockSize="30px" inlineSize="30px" />
+                <SkeletonItem blockSize="22px" inlineSize="30%" />
+              </div>
+              <div className="py-2">
+                <SkeletonItem blockSize="30px" inlineSize="50%" />
+              </div>
+              <SkeletonItem blockSize="22px" />
+              <div className="py-2">
+                <SkeletonItem blockSize="30px" inlineSize="30%" />
+              </div>
+              <SkeletonItem blockSize="22px" inlineSize="30%" />
+              <div className="relative flex items-center gap-2">
+                <div className="py-2">
+                  <SkeletonItem blockSize="30px" inlineSize="30px" />
+                </div>
+                <SkeletonItem blockSize="22px" inlineSize="30%" />
               </div>
-              <Loader.Item width="30%" height="22px" />
             </div>
           </div>
-        </Loader>
+        </Skeleton>
       </div>
     );
 
diff --git a/apps/web/core/components/profile/overview/activity.tsx b/apps/web/core/components/profile/overview/activity.tsx
index 95350412afe..7f6752b59e2 100644
--- a/apps/web/core/components/profile/overview/activity.tsx
+++ b/apps/web/core/components/profile/overview/activity.tsx
@@ -8,10 +8,11 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
 // ui
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { useTranslation } from "@plane/i18n";
 import { Avatar } from "@plane/propel/avatar";
 import { EmptyStateCompact } from "@plane/propel/empty-state";
-import { Loader, Card } from "@plane/ui";
+import { Card } from "@plane/ui";
 import { calculateTimeAgo, getFileURL } from "@plane/utils";
 // components
 import { ActivityMessage, IssueLink } from "@/components/core/activity";
@@ -46,13 +47,15 @@ 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 aria-label="Loading recent activity">
+            <div className="space-y-5">
+              <SkeletonItem blockSize="40px" />
+              <SkeletonItem blockSize="40px" />
+              <SkeletonItem blockSize="40px" />
+              <SkeletonItem blockSize="40px" />
+              <SkeletonItem blockSize="40px" />
+            </div>
+          </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 1128e82670a..2944a041481 100644
--- a/apps/web/core/components/profile/overview/priority-distribution.tsx
+++ b/apps/web/core/components/profile/overview/priority-distribution.tsx
@@ -5,11 +5,12 @@
  */
 
 // plane imports
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { useTranslation } from "@plane/i18n";
 import { BarChart } from "@plane/propel/charts/bar-chart";
 import { EmptyStateCompact } from "@plane/propel/empty-state";
 import type { IUserProfileData } from "@plane/types";
-import { Loader, Card } from "@plane/ui";
+import { Card } from "@plane/ui";
 import { capitalizeFirstLetter } from "@plane/utils";
 
 type Props = {
@@ -72,13 +73,15 @@ 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 aria-label="Loading priority distribution">
+            <div className="flex items-end gap-12">
+              <SkeletonItem blockSize="200px" inlineSize="30px" />
+              <SkeletonItem blockSize="150px" inlineSize="30px" />
+              <SkeletonItem blockSize="250px" inlineSize="30px" />
+              <SkeletonItem blockSize="150px" inlineSize="30px" />
+              <SkeletonItem blockSize="100px" inlineSize="30px" />
+            </div>
+          </Skeleton>
         </div>
       )}
     </div>
diff --git a/apps/web/core/components/profile/overview/stats.tsx b/apps/web/core/components/profile/overview/stats.tsx
index c4ac86ecc2d..0a30e80d1d6 100644
--- a/apps/web/core/components/profile/overview/stats.tsx
+++ b/apps/web/core/components/profile/overview/stats.tsx
@@ -11,8 +11,9 @@ import { useParams } from "next/navigation";
 import { useTranslation } from "@plane/i18n";
 import { LayerStackIcon } from "@plane/propel/icons";
 import { AddOutline, UserOutline } from "@makeplane/propel/icons";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import type { IUserProfileData } from "@plane/types";
-import { Loader, Card, ECardSpacing, ECardDirection } from "@plane/ui";
+import { Card, ECardSpacing, ECardDirection } from "@plane/ui";
 // types
 
 type Props = {
@@ -65,11 +66,13 @@ 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 aria-label="Loading profile stats">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+            <SkeletonItem blockSize="80px" />
+            <SkeletonItem blockSize="80px" />
+            <SkeletonItem blockSize="80px" />
+          </div>
+        </Skeleton>
       )}
     </div>
   );
diff --git a/apps/web/core/components/profile/sidebar.tsx b/apps/web/core/components/profile/sidebar.tsx
index 4bb2cbed6c0..520b1721a1f 100644
--- a/apps/web/core/components/profile/sidebar.tsx
+++ b/apps/web/core/components/profile/sidebar.tsx
@@ -15,8 +15,8 @@ import { Logo } from "@plane/propel/emoji-icon-picker";
 import { IconButton } from "@plane/propel/icon-button";
 import { ChevronDownOutline, EditOutline } from "@makeplane/propel/icons";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import type { IUserProfileProjectSegregation } from "@plane/types";
-import { Loader } from "@plane/ui";
 import { cn, renderFormattedDate, getFileURL } from "@plane/utils";
 // components
 import { CoverImage } from "@/components/common/cover-image";
@@ -280,16 +280,18 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
           </div>
         </>
       ) : (
-        <Loader className="space-y-7 px-5">
-          <Loader.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 aria-label="Loading sidebar">
+          <div className="space-y-7 px-5">
+            <SkeletonItem blockSize="130px" />
+            <div className="space-y-5">
+              <SkeletonItem blockSize="20px" />
+              <SkeletonItem blockSize="20px" />
+              <SkeletonItem blockSize="20px" />
+              <SkeletonItem blockSize="20px" />
+              <SkeletonItem blockSize="20px" />
+            </div>
           </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 876110c8e37..c67d317bc1d 100644
--- a/apps/web/core/components/project-states/loader.tsx
+++ b/apps/web/core/components/project-states/loader.tsx
@@ -4,15 +4,16 @@
  * See the LICENSE file for details.
  */
 
-import { Loader } from "@plane/ui";
-
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/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 aria-label="Loading project states">
+      <div className="space-y-5 md:w-2/3">
+        <SkeletonItem blockSize="40px" />
+        <SkeletonItem blockSize="40px" />
+        <SkeletonItem blockSize="40px" />
+        <SkeletonItem blockSize="40px" />
+      </div>
+    </Skeleton>
   );
 }
diff --git a/apps/web/core/components/project/dropdowns/filters/lead.tsx b/apps/web/core/components/project/dropdowns/filters/lead.tsx
index b47ec8c3678..32bec15c69a 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";
 // plane ui
 import { Avatar } from "@makeplane/propel/components/avatar";
-import { Loader } from "@plane/ui";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 // components
 import { getFileURL } from "@plane/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -103,11 +103,13 @@ 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 aria-label="Loading lead options">
+              <div className="space-y-2">
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+              </div>
+            </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 b13b7e35886..c43502f4306 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";
 // plane ui
 import { Avatar } from "@makeplane/propel/components/avatar";
-import { Loader } from "@plane/ui";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 // components
 import { getFileURL } from "@plane/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -103,11 +103,13 @@ 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 aria-label="Loading members">
+              <div className="space-y-2">
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+                <SkeletonItem blockSize="20px" />
+              </div>
+            </Skeleton>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/project/form-loader.tsx b/apps/web/core/components/project/form-loader.tsx
index a78d4d134c1..74c1a9c4625 100644
--- a/apps/web/core/components/project/form-loader.tsx
+++ b/apps/web/core/components/project/form-loader.tsx
@@ -4,62 +4,67 @@
  * See the LICENSE file for details.
  */
 
-// components
-import { Loader } from "@plane/ui";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 
 export function ProjectDetailsFormLoader() {
   return (
     <>
       <div className="relative mt-6 h-44 w-full">
-        <Loader>
-          <Loader.Item height="auto" width="46px" />
-        </Loader>
+        <Skeleton aria-label="Loading project form">
+          <SkeletonItem inlineSize="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 aria-label="Loading project form">
+                <SkeletonItem blockSize="46px" inlineSize="46px" />
+              </Skeleton>
             </div>
           </div>
           <div className="flex flex-shrink-0 justify-center">
-            <Loader>
-              <Loader.Item height="32px" width="108px" />
-            </Loader>
+            <Skeleton aria-label="Loading project form">
+              <SkeletonItem blockSize="32px" inlineSize="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 aria-label="Loading project form">
+            <SkeletonItem blockSize="46px" />
+          </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 aria-label="Loading project form">
+            <div className="w-full">
+              <SkeletonItem blockSize="102px" inlineSize="full" />
+            </div>
+          </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 aria-label="Loading project form">
+              <SkeletonItem blockSize="36px" />
+            </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 aria-label="Loading project form">
+              <div className="w-full">
+                <SkeletonItem blockSize="46px" />
+              </div>
+            </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 aria-label="Loading project form">
+            <div className="mt-2 w-full">
+              <SkeletonItem blockSize="34px" inlineSize="100px" />
+            </div>
+          </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 f15d6c08bc8..adab3550cf0 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 "@plane/i18n";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IProject, IUserLite, IWorkspace } from "@plane/types";
 import { Switch } from "@makeplane/propel/components/switch";
-import { Loader } from "@plane/ui";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 // constants
 import { PROJECT_DETAILS } from "@plane/constants";
 // hooks
@@ -156,9 +156,11 @@ export const ProjectSettingsMemberDefaults = observer(function ProjectSettingsMe
             )}
           />
         ) : (
-          <Loader className="h-9 w-full">
-            <Loader.Item width="100%" height="100%" />
-          </Loader>
+          <Skeleton aria-label="Loading member defaults">
+            <div className="h-9 w-full">
+              <SkeletonItem blockSize="100%" />
+            </div>
+          </Skeleton>
         )}
       </DefaultSettingItem>
       <DefaultSettingItem title="Default Assignee" description="Select the default assignee for the project.">
@@ -177,9 +179,11 @@ export const ProjectSettingsMemberDefaults = observer(function ProjectSettingsMe
             )}
           />
         ) : (
-          <Loader className="h-9 w-full">
-            <Loader.Item width="100%" height="100%" />
-          </Loader>
+          <Skeleton aria-label="Loading member defaults">
+            <div className="h-9 w-full">
+              <SkeletonItem blockSize="100%" />
+            </div>
+          </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 c0674da21be..cc91c71a481 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 "@plane/propel/toast";
 import type { TProjectPublishLayouts, TProjectPublishSettings } from "@plane/types";
 // ui
 import { Switch } from "@makeplane/propel/components/switch";
-import { Loader, CustomSelect, ModalCore, EModalWidth } from "@plane/ui";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { CustomSelect, ModalCore, EModalWidth } from "@plane/ui";
 // helpers
 import { copyTextToClipboard } from "@plane/utils";
 // hooks
@@ -196,12 +197,14 @@ 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 aria-label="Loading publish settings">
+            <div className="space-y-4 px-5">
+              <SkeletonItem blockSize="30px" />
+              <SkeletonItem blockSize="30px" />
+              <SkeletonItem blockSize="30px" />
+              <SkeletonItem blockSize="30px" />
+            </div>
+          </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 f041dcbfaff..6ff3189aeba 100644
--- a/apps/web/core/components/readonly/state.tsx
+++ b/apps/web/core/components/readonly/state.tsx
@@ -7,9 +7,9 @@
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { useTranslation } from "@plane/i18n";
 import { StateGroupIcon } from "@plane/propel/icons";
-import { Loader } from "@plane/ui";
 import { cn } from "@plane/utils";
 // hooks
 import { useProjectState } from "@/hooks/store/use-project-state";
@@ -52,10 +52,12 @@ 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 aria-label="Loading states">
+        <div className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
+          <SkeletonItem variant="circle" blockSize="16px" inlineSize="16px" />
+          <SkeletonItem blockSize="16px" inlineSize="50px" />
+        </div>
+      </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 508d7546c37..f627cab6352 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,11 @@
  * See the LICENSE file for details.
  */
 
-import { Loader } from "@plane/ui";
-
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 export function FilterItemLoader() {
   return (
-    <Loader>
-      <Loader.Item height="28px" width="180px" />
-    </Loader>
+    <Skeleton aria-label="Loading filter">
+      <SkeletonItem blockSize="28px" inlineSize="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 9a836fcafe6..1d962b8b8f6 100644
--- a/apps/web/core/components/rich-filters/filters-row.tsx
+++ b/apps/web/core/components/rich-filters/filters-row.tsx
@@ -7,12 +7,13 @@
 import React, { useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import { AddFilterOutline } from "@makeplane/propel/icons";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { Transition } from "@headlessui/react";
 // plane imports
 import { Button } from "@plane/propel/button";
 import type { IFilterInstance } from "@plane/shared-state";
 import type { TExternalFilter, TFilterProperty } from "@plane/types";
-import { cn, EHeaderVariant, Header, Loader } from "@plane/ui";
+import { cn, EHeaderVariant, Header } from "@plane/ui";
 // local imports
 import type { TAddFilterButtonProps } from "./add-filters/button";
 import { AddFilterButton } from "./add-filters/button";
@@ -128,9 +129,11 @@ 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 aria-label="Loading filters">
+          <div className={cn("overflow-hidden", { "rounded-none": variant === "header" })}>
+            <SkeletonItem blockSize="44px" />
+          </div>
+        </Skeleton>
       </RowTransition>
     );
   }
diff --git a/apps/web/core/components/stickies/layout/stickies-infinite.tsx b/apps/web/core/components/stickies/layout/stickies-infinite.tsx
index ea7029af056..de9b88dba66 100644
--- a/apps/web/core/components/stickies/layout/stickies-infinite.tsx
+++ b/apps/web/core/components/stickies/layout/stickies-infinite.tsx
@@ -8,8 +8,9 @@ import { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { STICKIES_PER_PAGE } from "@plane/constants";
-import { ContentWrapper, Loader } from "@plane/ui";
+import { ContentWrapper } from "@plane/ui";
 import { cn } from "@plane/utils";
 import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
 import { useSticky } from "@/hooks/use-stickies";
@@ -55,9 +56,11 @@ 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 aria-label="Loading more stickies">
+                  <div className="h-full w-full">
+                    <SkeletonItem blockSize="100%" />
+                  </div>
+                </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 f1666fc37c5..85b3512bfba 100644
--- a/apps/web/core/components/stickies/layout/stickies-loader.tsx
+++ b/apps/web/core/components/stickies/layout/stickies-loader.tsx
@@ -4,49 +4,63 @@
  * See the LICENSE file for details.
  */
 
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 // plane ui
-import { Loader } from "@plane/ui";
 
 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">
-          <div className="space-y-2">
-            <Loader.Item height="20px" />
-            <Loader.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%" />
-            </div>
-            <div className="flex items-center gap-2">
-              <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
-              <Loader.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 aria-label="Loading sticky" key={index}>
+          <div className="space-y-5 rounded-sm border border-subtle p-3">
+            <div className="space-y-2">
+              <SkeletonItem blockSize="20px" />
+              <SkeletonItem blockSize="15px" inlineSize="75%" />
             </div>
-            <div className="flex items-center gap-2">
-              <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
-              <Loader.Item height="15px" width="60%" />
+            <div className="space-y-2">
+              <div className="flex items-center gap-2">
+                <div className="flex-shrink-0">
+                  <SkeletonItem blockSize="15px" inlineSize="15px" />
+                </div>
+                <SkeletonItem blockSize="15px" />
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="flex-shrink-0">
+                  <SkeletonItem blockSize="15px" inlineSize="15px" />
+                </div>
+                <SkeletonItem blockSize="15px" inlineSize="75%" />
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="flex-shrink-0">
+                  <SkeletonItem blockSize="15px" inlineSize="15px" />
+                </div>
+                <SkeletonItem blockSize="15px" inlineSize="90%" />
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="flex-shrink-0">
+                  <SkeletonItem blockSize="15px" inlineSize="15px" />
+                </div>
+                <SkeletonItem blockSize="15px" inlineSize="60%" />
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="flex-shrink-0">
+                  <SkeletonItem blockSize="15px" inlineSize="15px" />
+                </div>
+                <SkeletonItem blockSize="15px" inlineSize="50%" />
+              </div>
             </div>
-            <div className="flex items-center gap-2">
-              <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
-              <Loader.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" />
+            <div className="flex items-center justify-between gap-2">
+              <div className="flex items-center gap-2">
+                <SkeletonItem blockSize="25px" inlineSize="25px" />
+                <SkeletonItem blockSize="25px" inlineSize="25px" />
+                <SkeletonItem blockSize="25px" inlineSize="25px" />
+              </div>
+              <div className="flex-shrink-0">
+                <SkeletonItem blockSize="25px" inlineSize="25px" />
+              </div>
             </div>
-            <Loader.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 41b09d13de2..4761adb0491 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
@@ -4,9 +4,9 @@
  * See the LICENSE file for details.
  */
 
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import React from "react";
 // ui
-import { Loader } from "@plane/ui";
 import { InboxSidebarLoader } from "./inbox-sidebar-loader";
 
 export function InboxLayoutLoader() {
@@ -16,15 +16,17 @@ export function InboxLayoutLoader() {
         <InboxSidebarLoader />
       </div>
       <div className="w-4/6">
-        <Loader 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 aria-label="Loading inbox">
+          <div className="flex h-full flex-col gap-5 p-5">
+            <div className="space-y-2">
+              <SkeletonItem blockSize="30px" inlineSize="40%" />
+              <SkeletonItem blockSize="15px" inlineSize="60%" />
+              <SkeletonItem blockSize="15px" inlineSize="60%" />
+              <SkeletonItem blockSize="15px" inlineSize="40%" />
+            </div>
+            <SkeletonItem blockSize="150px" />
           </div>
-          <Loader.Item height="150px" />
-        </Loader>
+        </Skeleton>
       </div>
     </div>
   );
diff --git a/apps/web/core/components/workspace/sidebar/projects-list.tsx b/apps/web/core/components/workspace/sidebar/projects-list.tsx
index 4f96a2a5b2e..41d5d479cc5 100644
--- a/apps/web/core/components/workspace/sidebar/projects-list.tsx
+++ b/apps/web/core/components/workspace/sidebar/projects-list.tsx
@@ -17,7 +17,7 @@ import { useTranslation } from "@plane/i18n";
 import { IconButton } from "@plane/propel/icon-button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
-import { Loader } from "@plane/ui";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { copyUrlToClipboard, cn, orderJoinedProjects } from "@plane/utils";
 // components
 import { CreateProjectModal } from "@/components/project/create-project-modal";
@@ -227,11 +227,13 @@ export const SidebarProjectsList = observer(function SidebarProjectsList() {
               leaveTo="transform scale-95 opacity-0"
             >
               {loader === "init-loader" && (
-                <Loader className="w-full space-y-1.5">
-                  {Array.from({ length: 4 }).map((_, index) => (
-                    <Loader.Item key={index} height="28px" />
-                  ))}
-                </Loader>
+                <Skeleton aria-label="Loading projects">
+                  <div className="w-full space-y-1.5">
+                    {Array.from({ length: 4 }).map((_, index) => (
+                      <SkeletonItem key={index} blockSize="28px" />
+                    ))}
+                  </div>
+                </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 be082f40c58..9e314edd822 100644
--- a/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
+++ b/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
@@ -9,13 +9,13 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 // icons
 import { ChevronDownOutline, LogOutOutline, MailOutline, PlusCircleOutline } from "@makeplane/propel/icons";
+import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 // ui
 import { Menu, Transition } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IWorkspace } from "@plane/types";
-import { Loader } from "@plane/ui";
 import { orderWorkspacesList, cn } from "@plane/utils";
 // helpers
 import { AppSidebarItem } from "@/components/sidebar/sidebar-item";
@@ -178,10 +178,12 @@ 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 aria-label="Loading workspaces">
+                          <div className="space-y-2">
+                            <SkeletonItem blockSize="30px" />
+                            <SkeletonItem blockSize="30px" />
+                          </div>
+                        </Skeleton>
                       </div>
                     )}
                   </div>

From 38012d13f3d5cb969fdc2ed75a9adbd3e40cb78d Mon Sep 17 00:00:00 2001
From: Atul Tameshwari <atameshwari9@gmail.com>
Date: Fri, 4 Sep 2026 23:54:44 +0530
Subject: [PATCH 2/4] refactor: enhance loading states with Skeleton components

Updated various components to improve loading state visuals by integrating Skeleton and SkeletonItem from @makeplane/propel/components/skeleton. This change affects issue details pages, analytics loaders, and other UI elements, providing a more cohesive and visually appealing user experience during loading times.
---
 .../(projects)/browse/[workItem]/page.tsx     | 32 ++++++++++---------
 .../(detail)/[archivedIssueId]/page.tsx       | 32 ++++++++++---------
 .../web/core/components/analytics/loaders.tsx | 12 ++++---
 .../home/widgets/loaders/home-loader.tsx      |  4 +--
 .../home/widgets/loaders/quick-links.tsx      |  1 -
 .../home/widgets/loaders/recent-activity.tsx  |  1 -
 .../pages/loaders/page-content-loader.tsx     | 28 ++++++----------
 .../components/pages/loaders/page-loader.tsx  | 24 +++++++-------
 .../core/components/project/form-loader.tsx   |  6 ++--
 .../stickies/layout/stickies-infinite.tsx     |  8 ++---
 10 files changed, 72 insertions(+), 76 deletions(-)

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 85b55242aa0..c79b1de1338 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx
@@ -107,22 +107,24 @@ export const IssueDetailsPage = observer(function IssueDetailsPage({ params }: R
 
   if (issueLoader) {
     return (
-      <Skeleton aria-label="Loading work item details">
-        <div className="flex h-full gap-5 p-5">
-          <div className="basis-2/3 space-y-2">
-            <SkeletonItem blockSize="30px" inlineSize="40%" />
-            <SkeletonItem blockSize="15px" inlineSize="60%" />
-            <SkeletonItem blockSize="15px" inlineSize="60%" />
-            <SkeletonItem blockSize="15px" inlineSize="40%" />
+      <div className="flex h-full gap-5 p-5">
+        <Skeleton aria-label="Loading work item details">
+          <div className="flex w-full gap-5">
+            <div className="basis-2/3 space-y-2">
+              <SkeletonItem blockSize="30px" inlineSize="40%" />
+              <SkeletonItem blockSize="15px" inlineSize="60%" />
+              <SkeletonItem blockSize="15px" inlineSize="60%" />
+              <SkeletonItem blockSize="15px" inlineSize="40%" />
+            </div>
+            <div className="basis-1/3 space-y-3">
+              <SkeletonItem blockSize="30px" />
+              <SkeletonItem blockSize="30px" />
+              <SkeletonItem blockSize="30px" />
+              <SkeletonItem blockSize="30px" />
+            </div>
           </div>
-          <div className="basis-1/3 space-y-3">
-            <SkeletonItem blockSize="30px" />
-            <SkeletonItem blockSize="30px" />
-            <SkeletonItem blockSize="30px" />
-            <SkeletonItem blockSize="30px" />
-          </div>
-        </div>
-      </Skeleton>
+        </Skeleton>
+      </div>
     );
   }
 
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 6305cd69f5d..0e83254ae95 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
@@ -51,22 +51,24 @@ function ArchivedIssueDetailsPage({ params }: Route.ComponentProps) {
     <>
       <PageHead title={pageTitle} />
       {issueLoader ? (
-        <Skeleton aria-label="Loading work item details">
-          <div className="flex h-full gap-5 p-5">
-            <div className="basis-2/3 space-y-2">
-              <SkeletonItem blockSize="30px" inlineSize="40%" />
-              <SkeletonItem blockSize="15px" inlineSize="60%" />
-              <SkeletonItem blockSize="15px" inlineSize="60%" />
-              <SkeletonItem blockSize="15px" inlineSize="40%" />
+        <div className="flex h-full gap-5 p-5">
+          <Skeleton aria-label="Loading work item details">
+            <div className="flex w-full gap-5">
+              <div className="basis-2/3 space-y-2">
+                <SkeletonItem blockSize="30px" inlineSize="40%" />
+                <SkeletonItem blockSize="15px" inlineSize="60%" />
+                <SkeletonItem blockSize="15px" inlineSize="60%" />
+                <SkeletonItem blockSize="15px" inlineSize="40%" />
+              </div>
+              <div className="basis-1/3 space-y-3">
+                <SkeletonItem blockSize="30px" />
+                <SkeletonItem blockSize="30px" />
+                <SkeletonItem blockSize="30px" />
+                <SkeletonItem blockSize="30px" />
+              </div>
             </div>
-            <div className="basis-1/3 space-y-3">
-              <SkeletonItem blockSize="30px" />
-              <SkeletonItem blockSize="30px" />
-              <SkeletonItem blockSize="30px" />
-              <SkeletonItem blockSize="30px" />
-            </div>
-          </div>
-        </Skeleton>
+          </Skeleton>
+        </div>
       ) : (
         <>
           <Banner
diff --git a/apps/web/core/components/analytics/loaders.tsx b/apps/web/core/components/analytics/loaders.tsx
index d14f0468e09..568cfe00524 100644
--- a/apps/web/core/components/analytics/loaders.tsx
+++ b/apps/web/core/components/analytics/loaders.tsx
@@ -9,11 +9,13 @@ import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 export function ProjectInsightsLoader() {
   return (
     <div className="flex h-[200px] gap-1">
-      <Skeleton aria-label="Loading chart">
-        <div className="h-full w-full">
-          <SkeletonItem blockSize="100%" />
-        </div>
-      </Skeleton>
+      <div className="h-[200px] w-full">
+        <Skeleton aria-label="Loading chart">
+          <div className="h-full w-full">
+            <SkeletonItem blockSize="100%" inlineSize="100%" />
+          </div>
+        </Skeleton>
+      </div>
       <div className="flex h-full w-full flex-col gap-1">
         <Skeleton aria-label="Loading chart">
           <div className="h-12 w-full">
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 8212fc9e9e5..457df5caee6 100644
--- a/apps/web/core/components/home/widgets/loaders/home-loader.tsx
+++ b/apps/web/core/components/home/widgets/loaders/home-loader.tsx
@@ -17,8 +17,8 @@ export function HomeLoader() {
               <div className="mb-4">
                 <SkeletonItem blockSize="20px" inlineSize="100px" />
               </div>
-              <div className="flex h-[110px] w-full items-center justify-center gap-2 rounded-sm text-placeholder">
-                <SkeletonItem blockSize="100%" />
+              <div className="h-[110px] w-full rounded-sm">
+                <SkeletonItem blockSize="100%" inlineSize="100%" />
               </div>
             </div>
           </Skeleton>
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 249b5ed7592..bb5d4330d2f 100644
--- a/apps/web/core/components/home/widgets/loaders/quick-links.tsx
+++ b/apps/web/core/components/home/widgets/loaders/quick-links.tsx
@@ -6,7 +6,6 @@
 
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { range } from "lodash-es";
-// ui
 
 export function QuickLinksWidgetLoader() {
   return (
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 7fd9cf89844..63f9a045ac5 100644
--- a/apps/web/core/components/home/widgets/loaders/recent-activity.tsx
+++ b/apps/web/core/components/home/widgets/loaders/recent-activity.tsx
@@ -6,7 +6,6 @@
 
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
 import { range } from "lodash-es";
-// ui
 
 export function RecentActivityWidgetLoader() {
   return (
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 fd15cc1edb0..a814efb23e1 100644
--- a/apps/web/core/components/pages/loaders/page-content-loader.tsx
+++ b/apps/web/core/components/pages/loaders/page-content-loader.tsx
@@ -17,9 +17,9 @@ export function PageContentLoader(props: Props) {
 
   return (
     <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">
-        <Skeleton aria-label="Loading page content">
+      <Skeleton aria-label="Loading page content">
+        {/* header */}
+        <div className="relative flex h-12 w-full flex-shrink-0 items-center divide-x divide-subtle border-b border-subtle">
           <div className="relative flex items-center gap-1 pr-2">
             <SkeletonItem blockSize="26px" inlineSize="26px" />
             <SkeletonItem blockSize="26px" inlineSize="26px" />
@@ -29,32 +29,24 @@ export function PageContentLoader(props: Props) {
             <SkeletonItem blockSize="26px" inlineSize="26px" />
             <SkeletonItem blockSize="26px" inlineSize="26px" />
           </div>
-        </Skeleton>
-        <Skeleton aria-label="Loading page content">
           <div className="relative flex items-center gap-1 px-2">
             <SkeletonItem blockSize="26px" inlineSize="26px" />
             <SkeletonItem blockSize="26px" inlineSize="26px" />
           </div>
-        </Skeleton>
-        <Skeleton aria-label="Loading page content">
           <div className="relative flex items-center gap-1 px-2">
             <SkeletonItem blockSize="26px" inlineSize="26px" />
             <SkeletonItem blockSize="26px" inlineSize="26px" />
           </div>
-        </Skeleton>
-        <Skeleton aria-label="Loading page content">
           <div className="relative flex items-center gap-1 pl-2">
             <SkeletonItem blockSize="26px" inlineSize="26px" />
             <SkeletonItem blockSize="26px" inlineSize="26px" />
           </div>
-        </Skeleton>
-      </div>
+        </div>
 
-      {/* content */}
-      <div className="relative flex size-full overflow-hidden pt-[64px]">
-        {/* editor loader */}
-        <div className="size-full py-5">
-          <Skeleton aria-label="Loading page content">
+        {/* content */}
+        <div className="relative flex size-full overflow-hidden pt-[64px]">
+          {/* editor loader */}
+          <div className="size-full py-5">
             <div className="relative space-y-4">
               <SkeletonItem blockSize="36px" inlineSize="50%" />
               <div className="space-y-2">
@@ -91,9 +83,9 @@ export function PageContentLoader(props: Props) {
                 </div>
               </div>
             </div>
-          </Skeleton>
+          </div>
         </div>
-      </div>
+      </Skeleton>
     </div>
   );
 }
diff --git a/apps/web/core/components/pages/loaders/page-loader.tsx b/apps/web/core/components/pages/loaders/page-loader.tsx
index 120310da66d..aec3e94db0f 100644
--- a/apps/web/core/components/pages/loaders/page-loader.tsx
+++ b/apps/web/core/components/pages/loaders/page-loader.tsx
@@ -9,9 +9,9 @@ import { range } from "lodash-es";
 
 export function PageLoader() {
   return (
-    <div className="relative flex h-full w-full flex-col">
-      <div className="border-b border-subtle px-3 py-3">
-        <Skeleton aria-label="Loading page">
+    <Skeleton aria-label="Loading page">
+      <div className="relative flex h-full w-full flex-col">
+        <div className="border-b border-subtle px-3 py-3">
           <div className="relative flex items-center gap-2">
             <SkeletonItem blockSize="30px" inlineSize="200px" />
             <div className="relative ml-auto flex items-center gap-2">
@@ -19,13 +19,11 @@ export function PageLoader() {
               <SkeletonItem blockSize="30px" inlineSize="100px" />
             </div>
           </div>
-        </Skeleton>
-      </div>
-      <div>
-        {range(10).map((i) => (
-          <Skeleton aria-label="Loading page" key={i}>
-            <div className="relative flex items-center gap-2 border-b border-subtle p-3 py-4">
-              <SkeletonItem blockSize="22px" inlineSize={`${250 + 10 * Math.floor(Math.random() * 10)}px`} />
+        </div>
+        <div>
+          {range(10).map((i) => (
+            <div key={i} className="relative flex items-center gap-2 border-b border-subtle p-3 py-4">
+              <SkeletonItem blockSize="22px" inlineSize={`${250 + 10 * (i % 10)}px`} />
               <div className="relative ml-auto flex items-center gap-2">
                 <SkeletonItem blockSize="22px" inlineSize="60px" />
                 <SkeletonItem blockSize="22px" inlineSize="22px" />
@@ -33,9 +31,9 @@ export function PageLoader() {
                 <SkeletonItem blockSize="22px" inlineSize="22px" />
               </div>
             </div>
-          </Skeleton>
-        ))}
+          ))}
+        </div>
       </div>
-    </div>
+    </Skeleton>
   );
 }
diff --git a/apps/web/core/components/project/form-loader.tsx b/apps/web/core/components/project/form-loader.tsx
index 74c1a9c4625..450835e7d98 100644
--- a/apps/web/core/components/project/form-loader.tsx
+++ b/apps/web/core/components/project/form-loader.tsx
@@ -11,7 +11,9 @@ export function ProjectDetailsFormLoader() {
     <>
       <div className="relative mt-6 h-44 w-full">
         <Skeleton aria-label="Loading project form">
-          <SkeletonItem inlineSize="46px" />
+          <div className="h-full w-full">
+            <SkeletonItem blockSize="100%" inlineSize="100%" />
+          </div>
         </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">
@@ -39,7 +41,7 @@ export function ProjectDetailsFormLoader() {
           <h4 className="text-13">Description</h4>
           <Skeleton aria-label="Loading project form">
             <div className="w-full">
-              <SkeletonItem blockSize="102px" inlineSize="full" />
+              <SkeletonItem blockSize="102px" inlineSize="100%" />
             </div>
           </Skeleton>
         </div>
diff --git a/apps/web/core/components/stickies/layout/stickies-infinite.tsx b/apps/web/core/components/stickies/layout/stickies-infinite.tsx
index de9b88dba66..0069beb9b55 100644
--- a/apps/web/core/components/stickies/layout/stickies-infinite.tsx
+++ b/apps/web/core/components/stickies/layout/stickies-infinite.tsx
@@ -51,14 +51,14 @@ export const StickiesInfinite = observer(function StickiesInfinite() {
           hasNextPage &&
           workspaceStickies?.length >= STICKIES_PER_PAGE && (
             <div
-              className={cn("box-border flex min-h-[300px] w-full p-2")}
+              className={cn("box-border flex min-h-75 w-full p-2")}
               ref={setElementRef}
               id="intersection-element"
             >
-              <div className="flex min-h-[300px] w-full rounded-sm">
+              <div className="min-h-75 w-full rounded-sm">
                 <Skeleton aria-label="Loading more stickies">
-                  <div className="h-full w-full">
-                    <SkeletonItem blockSize="100%" />
+                  <div className="h-75 w-full">
+                    <SkeletonItem blockSize="100%" inlineSize="100%" />
                   </div>
                 </Skeleton>
               </div>

From da0fe815db7b0eecea46f8054c4bec9b645e4541 Mon Sep 17 00:00:00 2001
From: Atul Tameshwari <atameshwari9@gmail.com>
Date: Sat, 5 Sep 2026 00:44:15 +0530
Subject: [PATCH 3/4] feat(i18n): add loading states translations for multiple
 languages

Added translations for loading states in various languages, including Czech, German, English, Spanish, French, Indonesian, Italian, Japanese, Georgian, Korean, Polish, Brazilian Portuguese, Romanian, Russian, and Slovak. This enhancement improves the user experience by providing localized loading messages across the application.
---
 .../i18n/src/locales/cs/accessibility.json    | 59 +++++++++++++++++++
 .../i18n/src/locales/de/accessibility.json    | 59 +++++++++++++++++++
 .../i18n/src/locales/en/accessibility.json    | 59 +++++++++++++++++++
 .../i18n/src/locales/es/accessibility.json    | 59 +++++++++++++++++++
 .../i18n/src/locales/fr/accessibility.json    | 59 +++++++++++++++++++
 .../i18n/src/locales/id/accessibility.json    | 59 +++++++++++++++++++
 .../i18n/src/locales/it/accessibility.json    | 59 +++++++++++++++++++
 .../i18n/src/locales/ja/accessibility.json    | 59 +++++++++++++++++++
 .../i18n/src/locales/ka-ge/accessibility.json | 59 +++++++++++++++++++
 .../i18n/src/locales/ko/accessibility.json    | 59 +++++++++++++++++++
 .../i18n/src/locales/pl/accessibility.json    | 59 +++++++++++++++++++
 .../i18n/src/locales/pt-BR/accessibility.json | 59 +++++++++++++++++++
 .../i18n/src/locales/ro/accessibility.json    | 59 +++++++++++++++++++
 .../i18n/src/locales/ru/accessibility.json    | 59 +++++++++++++++++++
 .../i18n/src/locales/sk/accessibility.json    | 59 +++++++++++++++++++
 .../i18n/src/locales/tr-TR/accessibility.json | 59 +++++++++++++++++++
 .../i18n/src/locales/ua/accessibility.json    | 59 +++++++++++++++++++
 .../i18n/src/locales/vi-VN/accessibility.json | 59 +++++++++++++++++++
 .../i18n/src/locales/zh-CN/accessibility.json | 59 +++++++++++++++++++
 .../i18n/src/locales/zh-TW/accessibility.json | 59 +++++++++++++++++++
 20 files changed, 1180 insertions(+)

diff --git a/packages/i18n/src/locales/cs/accessibility.json b/packages/i18n/src/locales/cs/accessibility.json
index 676c2d44236..44454845d2a 100644
--- a/packages/i18n/src/locales/cs/accessibility.json
+++ b/packages/i18n/src/locales/cs/accessibility.json
@@ -29,6 +29,65 @@
       "hide_password": "Skrýt heslo",
       "close_alert": "Zavřít upozornění",
       "close_popover": "Zavřít vyskakovací okno"
+    },
+    "loading": {
+      "chart": "Načítání grafu",
+      "insight": "Načítání přehledu",
+      "table": "Načítání tabulky",
+      "active_projects": "Načítání aktivních projektů",
+      "work_item": "Načítání pracovní položky",
+      "work_item_details": "Načítání podrobností pracovní položky",
+      "work_items": "Načítání pracovních položek",
+      "more_work_items": "Načítání dalších pracovních položek",
+      "page": "Načítání stránky",
+      "page_content": "Načítání obsahu stránky",
+      "page_version": "Načítání verze stránky",
+      "home_widget": "Načítání widgetu domovské stránky",
+      "quick_links": "Načítání rychlých odkazů",
+      "recent_activity": "Načítání nedávné aktivity",
+      "project_form": "Načítání formuláře projektu",
+      "modules": "Načítání modulů",
+      "projects": "Načítání projektů",
+      "mentions": "Načítání zmínek",
+      "states": "Načítání stavů",
+      "created_by_options": "Načítání možností tvůrce",
+      "labels": "Načítání štítků",
+      "assignees": "Načítání přiřazených",
+      "cycles": "Načítání cyklů",
+      "description": "Načítání popisu",
+      "issue_activity": "Načítání aktivity pracovní položky",
+      "issue_description": "Načítání popisu pracovní položky",
+      "sidebar": "Načítání postranního panelu",
+      "auto_archive_settings": "Načítání nastavení automatické archivace",
+      "auto_close_settings": "Načítání nastavení automatického uzavření",
+      "workspaces": "Načítání pracovních prostorů",
+      "estimates": "Načítání odhadů",
+      "publish_settings": "Načítání nastavení publikování",
+      "member_defaults": "Načítání výchozích hodnot členů",
+      "members": "Načítání členů",
+      "lead_options": "Načítání možností vedoucího",
+      "images": "Načítání obrázků",
+      "cycle_sidebar_details": "Načítání podrobností postranního panelu cyklu",
+      "cycle_progress_chart": "Načítání grafu průběhu cyklu",
+      "cycle_stats": "Načítání statistik cyklu",
+      "cycle_productivity": "Načítání produktivity cyklu",
+      "cycle_progress": "Načítání průběhu cyklu",
+      "price": "Načítání ceny",
+      "checkout_button": "Načítání tlačítka platby",
+      "sticky": "Načítání Sticky",
+      "more_stickies": "Načítání dalších Stickies",
+      "intake": "Načítání Intake",
+      "project_states": "Načítání stavů projektu",
+      "profile_stats": "Načítání statistik profilu",
+      "priority_distribution": "Načítání rozložení priorit",
+      "changelog": "Načítání protokolu změn",
+      "module_sidebar_details": "Načítání podrobností postranního panelu modulu",
+      "filter": "Načítání filtru",
+      "filters": "Načítání filtrů",
+      "description_version": "Načítání verze popisu",
+      "integration_status": "Načítání stavu integrace",
+      "subscription": "Načítání předplatného",
+      "slack_channel": "Načítání kanálu Slack"
     }
   }
 }
diff --git a/packages/i18n/src/locales/de/accessibility.json b/packages/i18n/src/locales/de/accessibility.json
index 9e4eeebd9e6..60f03a5082f 100644
--- a/packages/i18n/src/locales/de/accessibility.json
+++ b/packages/i18n/src/locales/de/accessibility.json
@@ -29,6 +29,65 @@
       "hide_password": "Passwort verbergen",
       "close_alert": "Warnung schließen",
       "close_popover": "Popover schließen"
+    },
+    "loading": {
+      "chart": "Diagramm wird geladen",
+      "insight": "Einblick wird geladen",
+      "table": "Tabelle wird geladen",
+      "active_projects": "Aktive Projekte werden geladen",
+      "work_item": "Arbeitselement wird geladen",
+      "work_item_details": "Details des Arbeitselements werden geladen",
+      "work_items": "Arbeitselemente werden geladen",
+      "more_work_items": "Weitere Arbeitselemente werden geladen",
+      "page": "Seite wird geladen",
+      "page_content": "Seiteninhalt wird geladen",
+      "page_version": "Seitenversion wird geladen",
+      "home_widget": "Start-Widget wird geladen",
+      "quick_links": "Schnelllinks werden geladen",
+      "recent_activity": "Letzte Aktivität wird geladen",
+      "project_form": "Projektformular wird geladen",
+      "modules": "Module werden geladen",
+      "projects": "Projekte werden geladen",
+      "mentions": "Erwähnungen werden geladen",
+      "states": "Status werden geladen",
+      "created_by_options": "Erstelleroptionen werden geladen",
+      "labels": "Labels werden geladen",
+      "assignees": "Zugewiesene werden geladen",
+      "cycles": "Zyklen werden geladen",
+      "description": "Beschreibung wird geladen",
+      "issue_activity": "Aktivität des Arbeitselements wird geladen",
+      "issue_description": "Beschreibung des Arbeitselements wird geladen",
+      "sidebar": "Seitenleiste wird geladen",
+      "auto_archive_settings": "Einstellungen für die automatische Archivierung werden geladen",
+      "auto_close_settings": "Einstellungen für das automatische Schließen werden geladen",
+      "workspaces": "Arbeitsbereiche werden geladen",
+      "estimates": "Schätzungen werden geladen",
+      "publish_settings": "Veröffentlichungseinstellungen werden geladen",
+      "member_defaults": "Standardwerte für Mitglieder werden geladen",
+      "members": "Mitglieder werden geladen",
+      "lead_options": "Lead-Optionen werden geladen",
+      "images": "Bilder werden geladen",
+      "cycle_sidebar_details": "Zyklus-Seitenleistendetails werden geladen",
+      "cycle_progress_chart": "Zyklus-Fortschrittsdiagramm wird geladen",
+      "cycle_stats": "Zyklusstatistiken werden geladen",
+      "cycle_productivity": "Zyklusproduktivität wird geladen",
+      "cycle_progress": "Zyklusfortschritt wird geladen",
+      "price": "Preis wird geladen",
+      "checkout_button": "Checkout-Schaltfläche wird geladen",
+      "sticky": "Sticky wird geladen",
+      "more_stickies": "Weitere Stickies werden geladen",
+      "intake": "Intake wird geladen",
+      "project_states": "Projektstatus werden geladen",
+      "profile_stats": "Profilstatistiken werden geladen",
+      "priority_distribution": "Prioritätsverteilung wird geladen",
+      "changelog": "Änderungsprotokoll wird geladen",
+      "module_sidebar_details": "Modul-Seitenleistendetails werden geladen",
+      "filter": "Filter wird geladen",
+      "filters": "Filter werden geladen",
+      "description_version": "Beschreibungsversion wird geladen",
+      "integration_status": "Integrationsstatus wird geladen",
+      "subscription": "Abonnement wird geladen",
+      "slack_channel": "Slack-Kanal wird geladen"
     }
   }
 }
diff --git a/packages/i18n/src/locales/en/accessibility.json b/packages/i18n/src/locales/en/accessibility.json
index 86660d640ec..cc5113389d3 100644
--- a/packages/i18n/src/locales/en/accessibility.json
+++ b/packages/i18n/src/locales/en/accessibility.json
@@ -29,6 +29,65 @@
       "hide_password": "Hide password",
       "close_alert": "Close alert",
       "close_popover": "Close popover"
+    },
+    "loading": {
+      "chart": "Loading chart",
+      "insight": "Loading insight",
+      "table": "Loading table",
+      "active_projects": "Loading active projects",
+      "work_item": "Loading work item",
+      "work_item_details": "Loading work item details",
+      "work_items": "Loading work items",
+      "more_work_items": "Loading more work items",
+      "page": "Loading page",
+      "page_content": "Loading page content",
+      "page_version": "Loading page version",
+      "home_widget": "Loading home widget",
+      "quick_links": "Loading quick links",
+      "recent_activity": "Loading recent activity",
+      "project_form": "Loading project form",
+      "modules": "Loading modules",
+      "projects": "Loading projects",
+      "mentions": "Loading mentions",
+      "states": "Loading states",
+      "created_by_options": "Loading created-by options",
+      "labels": "Loading labels",
+      "assignees": "Loading assignees",
+      "cycles": "Loading cycles",
+      "description": "Loading description",
+      "issue_activity": "Loading issue activity",
+      "issue_description": "Loading issue description",
+      "sidebar": "Loading sidebar",
+      "auto_archive_settings": "Loading auto-archive settings",
+      "auto_close_settings": "Loading auto-close settings",
+      "workspaces": "Loading workspaces",
+      "estimates": "Loading estimates",
+      "publish_settings": "Loading publish settings",
+      "member_defaults": "Loading member defaults",
+      "members": "Loading members",
+      "lead_options": "Loading lead options",
+      "images": "Loading images",
+      "cycle_sidebar_details": "Loading cycle sidebar details",
+      "cycle_progress_chart": "Loading cycle progress chart",
+      "cycle_stats": "Loading cycle stats",
+      "cycle_productivity": "Loading cycle productivity",
+      "cycle_progress": "Loading cycle progress",
+      "price": "Loading price",
+      "checkout_button": "Loading checkout button",
+      "sticky": "Loading Sticky",
+      "more_stickies": "Loading more Stickies",
+      "intake": "Loading Intake",
+      "project_states": "Loading project states",
+      "profile_stats": "Loading profile stats",
+      "priority_distribution": "Loading priority distribution",
+      "changelog": "Loading changelog",
+      "module_sidebar_details": "Loading module sidebar details",
+      "filter": "Loading filter",
+      "filters": "Loading filters",
+      "description_version": "Loading description version",
+      "integration_status": "Loading integration status",
+      "subscription": "Loading subscription",
+      "slack_channel": "Loading Slack channel"
     }
   }
 }
diff --git a/packages/i18n/src/locales/es/accessibility.json b/packages/i18n/src/locales/es/accessibility.json
index 4d957f5a9f5..9a9aaf722e4 100644
--- a/packages/i18n/src/locales/es/accessibility.json
+++ b/packages/i18n/src/locales/es/accessibility.json
@@ -29,6 +29,65 @@
       "hide_password": "Ocultar contraseña",
       "close_alert": "Cerrar alerta",
       "close_popover": "Cerrar ventana emergente"
+    },
+    "loading": {
+      "chart": "Cargando gráfico",
+      "insight": "Cargando insight",
+      "table": "Cargando tabla",
+      "active_projects": "Cargando proyectos activos",
+      "work_item": "Cargando elemento de trabajo",
+      "work_item_details": "Cargando detalles del elemento de trabajo",
+      "work_items": "Cargando elementos de trabajo",
+      "more_work_items": "Cargando más elementos de trabajo",
+      "page": "Cargando página",
+      "page_content": "Cargando contenido de la página",
+      "page_version": "Cargando versión de la página",
+      "home_widget": "Cargando widget de inicio",
+      "quick_links": "Cargando enlaces rápidos",
+      "recent_activity": "Cargando actividad reciente",
+      "project_form": "Cargando formulario del proyecto",
+      "modules": "Cargando módulos",
+      "projects": "Cargando proyectos",
+      "mentions": "Cargando menciones",
+      "states": "Cargando estados",
+      "created_by_options": "Cargando opciones de creador",
+      "labels": "Cargando etiquetas",
+      "assignees": "Cargando asignados",
+      "cycles": "Cargando ciclos",
+      "description": "Cargando descripción",
+      "issue_activity": "Cargando actividad del elemento de trabajo",
+      "issue_description": "Cargando descripción del elemento de trabajo",
+      "sidebar": "Cargando barra lateral",
+      "auto_archive_settings": "Cargando ajustes de archivado automático",
+      "auto_close_settings": "Cargando ajustes de cierre automático",
+      "workspaces": "Cargando espacios de trabajo",
+      "estimates": "Cargando estimaciones",
+      "publish_settings": "Cargando ajustes de publicación",
+      "member_defaults": "Cargando valores predeterminados de miembros",
+      "members": "Cargando miembros",
+      "lead_options": "Cargando opciones de responsable",
+      "images": "Cargando imágenes",
+      "cycle_sidebar_details": "Cargando detalles de la barra lateral del ciclo",
+      "cycle_progress_chart": "Cargando gráfico de progreso del ciclo",
+      "cycle_stats": "Cargando estadísticas del ciclo",
+      "cycle_productivity": "Cargando productividad del ciclo",
+      "cycle_progress": "Cargando progreso del ciclo",
+      "price": "Cargando precio",
+      "checkout_button": "Cargando botón de pago",
+      "sticky": "Cargando Sticky",
+      "more_stickies": "Cargando más Stickies",
+      "intake": "Cargando Intake",
+      "project_states": "Cargando estados del proyecto",
+      "profile_stats": "Cargando estadísticas del perfil",
+      "priority_distribution": "Cargando distribución de prioridades",
+      "changelog": "Cargando registro de cambios",
+      "module_sidebar_details": "Cargando detalles de la barra lateral del módulo",
+      "filter": "Cargando filtro",
+      "filters": "Cargando filtros",
+      "description_version": "Cargando versión de la descripción",
+      "integration_status": "Cargando estado de la integración",
+      "subscription": "Cargando suscripción",
+      "slack_channel": "Cargando canal de Slack"
     }
   }
 }
diff --git a/packages/i18n/src/locales/fr/accessibility.json b/packages/i18n/src/locales/fr/accessibility.json
index 9e02785f816..3d9dd116b31 100644
--- a/packages/i18n/src/locales/fr/accessibility.json
+++ b/packages/i18n/src/locales/fr/accessibility.json
@@ -29,6 +29,65 @@
       "hide_password": "Masquer le mot de passe",
       "close_alert": "Fermer l’alerte",
       "close_popover": "Fermer la fenêtre contextuelle"
+    },
+    "loading": {
+      "chart": "Chargement du graphique",
+      "insight": "Chargement de l’aperçu",
+      "table": "Chargement du tableau",
+      "active_projects": "Chargement des projets actifs",
+      "work_item": "Chargement de l’élément de travail",
+      "work_item_details": "Chargement des détails de l’élément de travail",
+      "work_items": "Chargement des éléments de travail",
+      "more_work_items": "Chargement d’autres éléments de travail",
+      "page": "Chargement de la page",
+      "page_content": "Chargement du contenu de la page",
+      "page_version": "Chargement de la version de la page",
+      "home_widget": "Chargement du widget d’accueil",
+      "quick_links": "Chargement des liens rapides",
+      "recent_activity": "Chargement de l’activité récente",
+      "project_form": "Chargement du formulaire de projet",
+      "modules": "Chargement des modules",
+      "projects": "Chargement des projets",
+      "mentions": "Chargement des mentions",
+      "states": "Chargement des statuts",
+      "created_by_options": "Chargement des options de créateur",
+      "labels": "Chargement des étiquettes",
+      "assignees": "Chargement des acteurs",
+      "cycles": "Chargement des cycles",
+      "description": "Chargement de la description",
+      "issue_activity": "Chargement de l’activité de l’élément de travail",
+      "issue_description": "Chargement de la description de l’élément de travail",
+      "sidebar": "Chargement de la barre latérale",
+      "auto_archive_settings": "Chargement des paramètres d’archivage automatique",
+      "auto_close_settings": "Chargement des paramètres de fermeture automatique",
+      "workspaces": "Chargement des espaces de travail",
+      "estimates": "Chargement des estimations",
+      "publish_settings": "Chargement des paramètres de publication",
+      "member_defaults": "Chargement des valeurs par défaut des membres",
+      "members": "Chargement des membres",
+      "lead_options": "Chargement des options de responsable",
+      "images": "Chargement des images",
+      "cycle_sidebar_details": "Chargement des détails de la barre latérale du cycle",
+      "cycle_progress_chart": "Chargement du graphique de progression du cycle",
+      "cycle_stats": "Chargement des statistiques du cycle",
+      "cycle_productivity": "Chargement de la productivité du cycle",
+      "cycle_progress": "Chargement de la progression du cycle",
+      "price": "Chargement du prix",
+      "checkout_button": "Chargement du bouton de paiement",
+      "sticky": "Chargement du Sticky",
+      "more_stickies": "Chargement d’autres Stickies",
+      "intake": "Chargement d’Intake",
+      "project_states": "Chargement des statuts du projet",
+      "profile_stats": "Chargement des statistiques du profil",
+      "priority_distribution": "Chargement de la répartition des priorités",
+      "changelog": "Chargement du journal des modifications",
+      "module_sidebar_details": "Chargement des détails de la barre latérale du module",
+      "filter": "Chargement du filtre",
+      "filters": "Chargement des filtres",
+      "description_version": "Chargement de la version de la description",
+      "integration_status": "Chargement du statut de l’intégration",
+      "subscription": "Chargement de l’abonnement",
+      "slack_channel": "Chargement du canal Slack"
     }
   }
 }
diff --git a/packages/i18n/src/locales/id/accessibility.json b/packages/i18n/src/locales/id/accessibility.json
index 73207340152..eb6540072a7 100644
--- a/packages/i18n/src/locales/id/accessibility.json
+++ b/packages/i18n/src/locales/id/accessibility.json
@@ -29,6 +29,65 @@
       "hide_password": "Sembunyikan kata sandi",
       "close_alert": "Tutup peringatan",
       "close_popover": "Tutup popover"
+    },
+    "loading": {
+      "chart": "Memuat bagan",
+      "insight": "Memuat wawasan",
+      "table": "Memuat tabel",
+      "active_projects": "Memuat proyek aktif",
+      "work_item": "Memuat item kerja",
+      "work_item_details": "Memuat detail item kerja",
+      "work_items": "Memuat item kerja",
+      "more_work_items": "Memuat item kerja lainnya",
+      "page": "Memuat halaman",
+      "page_content": "Memuat konten halaman",
+      "page_version": "Memuat versi halaman",
+      "home_widget": "Memuat widget beranda",
+      "quick_links": "Memuat tautan cepat",
+      "recent_activity": "Memuat aktivitas terbaru",
+      "project_form": "Memuat formulir proyek",
+      "modules": "Memuat modul",
+      "projects": "Memuat proyek",
+      "mentions": "Memuat sebutan",
+      "states": "Memuat status",
+      "created_by_options": "Memuat opsi pembuat",
+      "labels": "Memuat label",
+      "assignees": "Memuat penugas",
+      "cycles": "Memuat siklus",
+      "description": "Memuat deskripsi",
+      "issue_activity": "Memuat aktivitas item kerja",
+      "issue_description": "Memuat deskripsi item kerja",
+      "sidebar": "Memuat bilah sisi",
+      "auto_archive_settings": "Memuat pengaturan arsip otomatis",
+      "auto_close_settings": "Memuat pengaturan tutup otomatis",
+      "workspaces": "Memuat ruang kerja",
+      "estimates": "Memuat estimasi",
+      "publish_settings": "Memuat pengaturan publikasi",
+      "member_defaults": "Memuat default anggota",
+      "members": "Memuat anggota",
+      "lead_options": "Memuat opsi penanggung jawab",
+      "images": "Memuat gambar",
+      "cycle_sidebar_details": "Memuat detail bilah sisi siklus",
+      "cycle_progress_chart": "Memuat bagan progres siklus",
+      "cycle_stats": "Memuat statistik siklus",
+      "cycle_productivity": "Memuat produktivitas siklus",
+      "cycle_progress": "Memuat progres siklus",
+      "price": "Memuat harga",
+      "checkout_button": "Memuat tombol pembayaran",
+      "sticky": "Memuat Sticky",
+      "more_stickies": "Memuat Stickies lainnya",
+      "intake": "Memuat Intake",
+      "project_states": "Memuat status proyek",
+      "profile_stats": "Memuat statistik profil",
+      "priority_distribution": "Memuat distribusi prioritas",
+      "changelog": "Memuat log perubahan",
+      "module_sidebar_details": "Memuat detail bilah sisi modul",
+      "filter": "Memuat filter",
+      "filters": "Memuat filter",
+      "description_version": "Memuat versi deskripsi",
+      "integration_status": "Memuat status integrasi",
+      "subscription": "Memuat langganan",
+      "slack_channel": "Memuat kanal Slack"
     }
   }
 }
diff --git a/packages/i18n/src/locales/it/accessibility.json b/packages/i18n/src/locales/it/accessibility.json
index 16d22bcbc10..1bece8aef09 100644
--- a/packages/i18n/src/locales/it/accessibility.json
+++ b/packages/i18n/src/locales/it/accessibility.json
@@ -29,6 +29,65 @@
       "hide_password": "Nascondi password",
       "close_alert": "Chiudi avviso",
       "close_popover": "Chiudi popover"
+    },
+    "loading": {
+      "chart": "Caricamento del grafico",
+      "insight": "Caricamento dell’insight",
+      "table": "Caricamento della tabella",
+      "active_projects": "Caricamento dei progetti attivi",
+      "work_item": "Caricamento dell’elemento di lavoro",
+      "work_item_details": "Caricamento dei dettagli dell’elemento di lavoro",
+      "work_items": "Caricamento degli elementi di lavoro",
+      "more_work_items": "Caricamento di altri elementi di lavoro",
+      "page": "Caricamento della pagina",
+      "page_content": "Caricamento del contenuto della pagina",
+      "page_version": "Caricamento della versione della pagina",
+      "home_widget": "Caricamento del widget home",
+      "quick_links": "Caricamento dei collegamenti rapidi",
+      "recent_activity": "Caricamento dell’attività recente",
+      "project_form": "Caricamento del modulo progetto",
+      "modules": "Caricamento dei moduli",
+      "projects": "Caricamento dei progetti",
+      "mentions": "Caricamento delle menzioni",
+      "states": "Caricamento degli stati",
+      "created_by_options": "Caricamento delle opzioni creatore",
+      "labels": "Caricamento delle etichette",
+      "assignees": "Caricamento degli assegnatari",
+      "cycles": "Caricamento dei cicli",
+      "description": "Caricamento della descrizione",
+      "issue_activity": "Caricamento dell’attività dell’elemento di lavoro",
+      "issue_description": "Caricamento della descrizione dell’elemento di lavoro",
+      "sidebar": "Caricamento della barra laterale",
+      "auto_archive_settings": "Caricamento delle impostazioni di archiviazione automatica",
+      "auto_close_settings": "Caricamento delle impostazioni di chiusura automatica",
+      "workspaces": "Caricamento degli spazi di lavoro",
+      "estimates": "Caricamento delle stime",
+      "publish_settings": "Caricamento delle impostazioni di pubblicazione",
+      "member_defaults": "Caricamento dei valori predefiniti dei membri",
+      "members": "Caricamento dei membri",
+      "lead_options": "Caricamento delle opzioni responsabile",
+      "images": "Caricamento delle immagini",
+      "cycle_sidebar_details": "Caricamento dei dettagli della barra laterale del ciclo",
+      "cycle_progress_chart": "Caricamento del grafico di avanzamento del ciclo",
+      "cycle_stats": "Caricamento delle statistiche del ciclo",
+      "cycle_productivity": "Caricamento della produttività del ciclo",
+      "cycle_progress": "Caricamento dell’avanzamento del ciclo",
+      "price": "Caricamento del prezzo",
+      "checkout_button": "Caricamento del pulsante di pagamento",
+      "sticky": "Caricamento dello Sticky",
+      "more_stickies": "Caricamento di altri Stickies",
+      "intake": "Caricamento di Intake",
+      "project_states": "Caricamento degli stati del progetto",
+      "profile_stats": "Caricamento delle statistiche del profilo",
+      "priority_distribution": "Caricamento della distribuzione delle priorità",
+      "changelog": "Caricamento del registro delle modifiche",
+      "module_sidebar_details": "Caricamento dei dettagli della barra laterale del modulo",
+      "filter": "Caricamento del filtro",
+      "filters": "Caricamento dei filtri",
+      "description_version": "Caricamento della versione della descrizione",
+      "integration_status": "Caricamento dello stato dell’integrazione",
+      "subscription": "Caricamento dell’abbonamento",
+      "slack_channel": "Caricamento del canale Slack"
     }
   }
 }
diff --git a/packages/i18n/src/locales/ja/accessibility.json b/packages/i18n/src/locales/ja/accessibility.json
index b983500ff1c..ae81a51244b 100644
--- a/packages/i18n/src/locales/ja/accessibility.json
+++ b/packages/i18n/src/locales/ja/accessibility.json
@@ -29,6 +29,65 @@
       "hide_password": "パスワードを非表示",
       "close_alert": "アラートを閉じる",
       "close_popover": "ポップオーバーを閉じる"
+    },
+    "loading": {
+      "chart": "チャートを読み込み中",
+      "insight": "インサイトを読み込み中",
+      "table": "テーブルを読み込み中",
+      "active_projects": "進行中のプロジェクトを読み込み中",
+      "work_item": "作業項目を読み込み中",
+      "work_item_details": "作業項目の詳細を読み込み中",
+      "work_items": "作業項目を読み込み中",
+      "more_work_items": "さらに作業項目を読み込み中",
+      "page": "ページを読み込み中",
+      "page_content": "ページの内容を読み込み中",
+      "page_version": "ページのバージョンを読み込み中",
+      "home_widget": "ホームウィジェットを読み込み中",
+      "quick_links": "クイックリンクを読み込み中",
+      "recent_activity": "最近のアクティビティを読み込み中",
+      "project_form": "プロジェクトフォームを読み込み中",
+      "modules": "モジュールを読み込み中",
+      "projects": "プロジェクトを読み込み中",
+      "mentions": "メンションを読み込み中",
+      "states": "ステータスを読み込み中",
+      "created_by_options": "作成者の選択肢を読み込み中",
+      "labels": "ラベルを読み込み中",
+      "assignees": "担当者を読み込み中",
+      "cycles": "サイクルを読み込み中",
+      "description": "説明を読み込み中",
+      "issue_activity": "作業項目のアクティビティを読み込み中",
+      "issue_description": "作業項目の説明を読み込み中",
+      "sidebar": "サイドバーを読み込み中",
+      "auto_archive_settings": "自動アーカイブ設定を読み込み中",
+      "auto_close_settings": "自動クローズ設定を読み込み中",
+      "workspaces": "ワークスペースを読み込み中",
+      "estimates": "見積もりを読み込み中",
+      "publish_settings": "公開設定を読み込み中",
+      "member_defaults": "メンバーのデフォルトを読み込み中",
+      "members": "メンバーを読み込み中",
+      "lead_options": "リードの選択肢を読み込み中",
+      "images": "画像を読み込み中",
+      "cycle_sidebar_details": "サイクルのサイドバー詳細を読み込み中",
+      "cycle_progress_chart": "サイクルの進捗チャートを読み込み中",
+      "cycle_stats": "サイクルの統計を読み込み中",
+      "cycle_productivity": "サイクルの生産性を読み込み中",
+      "cycle_progress": "サイクルの進捗を読み込み中",
+      "price": "価格を読み込み中",
+      "checkout_button": "チェックアウトボタンを読み込み中",
+      "sticky": "Stickyを読み込み中",
+      "more_stickies": "さらにStickiesを読み込み中",
+      "intake": "Intakeを読み込み中",
+      "project_states": "プロジェクトのステータスを読み込み中",
+      "profile_stats": "プロフィールの統計を読み込み中",
+      "priority_distribution": "優先度の分布を読み込み中",
+      "changelog": "変更履歴を読み込み中",
+      "module_sidebar_details": "モジュールのサイドバー詳細を読み込み中",
+      "filter": "フィルターを読み込み中",
+      "filters": "フィルターを読み込み中",
+      "description_version": "説明のバージョンを読み込み中",
+      "integration_status": "連携ステータスを読み込み中",
+      "subscription": "サブスクリプションを読み込み中",
+      "slack_channel": "Slackチャンネルを読み込み中"
     }
   }
 }
diff --git a/packages/i18n/src/locales/ka-ge/accessibility.json b/packages/i18n/src/locales/ka-ge/accessibility.json
index 188aa46ce46..a0d018b4350 100644
--- a/packages/i18n/src/locales/ka-ge/accessibility.json
+++ b/packages/i18n/src/locales/ka-ge/accessibility.json
@@ -29,6 +29,65 @@
       "hide_password": "პაროლის დამალვა",
       "close_alert": "გაფრთხილების დახურვა",
       "close_popover": "პოპაპის დახურვა"
+    },
+    "loading": {
+      "chart": "დიაგრამის ჩატვირთვა",
+      "insight": "ინსაითის ჩატვირთვა",
+      "table": "ცხრილის ჩატვირთვა",
+      "active_projects": "აქტიური პროექტების ჩატვირთვა",
+      "work_item": "სამუშაო ელემენტის ჩატვირთვა",
+      "work_item_details": "სამუშაო ელემენტის დეტალების ჩატვირთვა",
+      "work_items": "სამუშაო ელემენტების ჩატვირთვა",
+      "more_work_items": "დამატებითი სამუშაო ელემენტების ჩატვირთვა",
+      "page": "გვერდის ჩატვირთვა",
+      "page_content": "გვერდის შიგთავსის ჩატვირთვა",
+      "page_version": "გვერდის ვერსიის ჩატვირთვა",
+      "home_widget": "მთავარი გვერდის ვიჯეტის ჩატვირთვა",
+      "quick_links": "სწრაფი ბმულების ჩატვირთვა",
+      "recent_activity": "ბოლო აქტივობის ჩატვირთვა",
+      "project_form": "პროექტის ფორმის ჩატვირთვა",
+      "modules": "მოდულების ჩატვირთვა",
+      "projects": "პროექტების ჩატვირთვა",
+      "mentions": "ხსენებების ჩატვირთვა",
+      "states": "სტატუსების ჩატვირთვა",
+      "created_by_options": "შემქმნელის პარამეტრების ჩატვირთვა",
+      "labels": "იარლიყების ჩატვირთვა",
+      "assignees": "მინიჭებულების ჩატვირთვა",
+      "cycles": "ციკლების ჩატვირთვა",
+      "description": "აღწერის ჩატვირთვა",
+      "issue_activity": "სამუშაო ელემენტის აქტივობის ჩატვირთვა",
+      "issue_description": "სამუშაო ელემენტის აღწერის ჩატვირთვა",
+      "sidebar": "გვერდითი პანელის ჩატვირთვა",
+      "auto_archive_settings": "ავტომატური დაარქივების პარამეტრების ჩატვირთვა",
+      "auto_close_settings": "ავტომატური დახურვის პარამეტრების ჩატვირთვა",
+      "workspaces": "სამუშაო სივრცეების ჩატვირთვა",
+      "estimates": "შეფასებების ჩატვირთვა",
+      "publish_settings": "გამოქვეყნების პარამეტრების ჩატვირთვა",
+      "member_defaults": "წევრების ნაგულისხმევი მნიშვნელობების ჩატვირთვა",
+      "members": "წევრების ჩატვირთვა",
+      "lead_options": "ხელმძღვანელის პარამეტრების ჩატვირთვა",
+      "images": "სურათების ჩატვირთვა",
+      "cycle_sidebar_details": "ციკლის გვერდითი პანელის დეტალების ჩატვირთვა",
+      "cycle_progress_chart": "ციკლის პროგრესის დიაგრამის ჩატვირთვა",
+      "cycle_stats": "ციკლის სტატისტიკის ჩატვირთვა",
+      "cycle_productivity": "ციკლის პროდუქტიულობის ჩატვირთვა",
+      "cycle_progress": "ციკლის პროგრესის ჩატვირთვა",
+      "price": "ფასის ჩატვირთვა",
+      "checkout_button": "გადახდის ღილაკის ჩატვირთვა",
+      "sticky": "Sticky-ის ჩატვირთვა",
+      "more_stickies": "დამატებითი Stickies-ის ჩატვირთვა",
+      "intake": "Intake-ის ჩატვირთვა",
+      "project_states": "პროექტის სტატუსების ჩატვირთვა",
+      "profile_stats": "პროფილის სტატისტიკის ჩატვირთვა",
+      "priority_distribution": "პრიორიტეტების განაწილების ჩატვირთვა",
+      "changelog": "ცვლილებების ჟურნალის ჩატვირთვა",
+      "module_sidebar_details": "მოდულის გვერდითი პანელის დეტალების ჩატვირთვა",
+      "filter": "ფილტრის ჩატვირთვა",
+      "filters": "ფილტრების ჩატვირთვა",
+      "description_version": "აღწერის ვერსიის ჩატვირთვა",
+      "integration_status": "ინტეგრაციის სტატუსის ჩატვირთვა",
+      "subscription": "გამოწერის ჩატვირთვა",
+      "slack_channel": "Slack არხის ჩატვირთვა"
     }
   }
 }
diff --git a/packages/i18n/src/locales/ko/accessibility.json b/packages/i18n/src/locales/ko/accessibility.json
index 298a7e122d8..6bf24b55a6d 100644
--- a/packages/i18n/src/locales/ko/accessibility.json
+++ b/packages/i18n/src/locales/ko/accessibility.json
@@ -29,6 +29,65 @@
       "hide_password": "비밀번호 숨기기",
       "close_alert": "알림 닫기",
       "close_popover": "팝오버 닫기"
+    },
+    "loading": {
+      "chart": "차트 로딩 중",
+      "insight": "인사이트 로딩 중",
+      "table": "표 로딩 중",
+      "active_projects": "활성 프로젝트 로딩 중",
+      "work_item": "작업 항목 로딩 중",
+      "work_item_details": "작업 항목 세부정보 로딩 중",
+      "work_items": "작업 항목 로딩 중",
+      "more_work_items": "추가 작업 항목 로딩 중",
+      "page": "페이지 로딩 중",
+      "page_content": "페이지 콘텐츠 로딩 중",
+      "page_version": "페이지 버전 로딩 중",
+      "home_widget": "홈 위젯 로딩 중",
+      "quick_links": "빠른 링크 로딩 중",
+      "recent_activity": "최근 활동 로딩 중",
+      "project_form": "프로젝트 양식 로딩 중",
+      "modules": "모듈 로딩 중",
+      "projects": "프로젝트 로딩 중",
+      "mentions": "멘션 로딩 중",
+      "states": "상태 로딩 중",
+      "created_by_options": "작성자 옵션 로딩 중",
+      "labels": "레이블 로딩 중",
+      "assignees": "담당자 로딩 중",
+      "cycles": "사이클 로딩 중",
+      "description": "설명 로딩 중",
+      "issue_activity": "작업 항목 활동 로딩 중",
+      "issue_description": "작업 항목 설명 로딩 중",
+      "sidebar": "사이드바 로딩 중",
+      "auto_archive_settings": "자동 보관 설정 로딩 중",
+      "auto_close_settings": "자동 닫기 설정 로딩 중",
+      "workspaces": "워크스페이스 로딩 중",
+      "estimates": "추정 로딩 중",
+      "publish_settings": "게시 설정 로딩 중",
+      "member_defaults": "멤버 기본값 로딩 중",
+      "members": "멤버 로딩 중",
+      "lead_options": "리더 옵션 로딩 중",
+      "images": "이미지 로딩 중",
+      "cycle_sidebar_details": "사이클 사이드바 세부정보 로딩 중",
+      "cycle_progress_chart": "사이클 진행 차트 로딩 중",
+      "cycle_stats": "사이클 통계 로딩 중",
+      "cycle_productivity": "사이클 생산성 로딩 중",
+      "cycle_progress": "사이클 진행 상황 로딩 중",
+      "price": "가격 로딩 중",
+      "checkout_button": "결제 버튼 로딩 중",
+      "sticky": "Sticky 로딩 중",
+      "more_stickies": "추가 Stickies 로딩 중",
+      "intake": "Intake 로딩 중",
+      "project_states": "프로젝트 상태 로딩 중",
+      "profile_stats": "프로필 통계 로딩 중",
+      "priority_distribution": "우선순위 분포 로딩 중",
+      "changelog": "변경 로그 로딩 중",
+      "module_sidebar_details": "모듈 사이드바 세부정보 로딩 중",
+      "filter": "필터 로딩 중",
+      "filters": "필터 로딩 중",
+      "description_version": "설명 버전 로딩 중",
+      "integration_status": "연동 상태 로딩 중",
+      "subscription": "구독 로딩 중",
+      "slack_channel": "Slack 채널 로딩 중"
     }
   }
 }
diff --git a/packages/i18n/src/locales/pl/accessibility.json b/packages/i18n/src/locales/pl/accessibility.json
index c1407911acd..2ced45ba95c 100644
--- a/packages/i18n/src/locales/pl/accessibility.json
+++ b/packages/i18n/src/locales/pl/accessibility.json
@@ -29,6 +29,65 @@
       "hide_password": "Ukryj hasło",
       "close_alert": "Zamknij alert",
       "close_popover": "Zamknij popover"
+    },
+    "loading": {
+      "chart": "Ładowanie wykresu",
+      "insight": "Ładowanie wglądu",
+      "table": "Ładowanie tabeli",
+      "active_projects": "Ładowanie aktywnych projektów",
+      "work_item": "Ładowanie elementu pracy",
+      "work_item_details": "Ładowanie szczegółów elementu pracy",
+      "work_items": "Ładowanie elementów pracy",
+      "more_work_items": "Ładowanie kolejnych elementów pracy",
+      "page": "Ładowanie strony",
+      "page_content": "Ładowanie zawartości strony",
+      "page_version": "Ładowanie wersji strony",
+      "home_widget": "Ładowanie widżetu strony głównej",
+      "quick_links": "Ładowanie szybkich łączy",
+      "recent_activity": "Ładowanie ostatniej aktywności",
+      "project_form": "Ładowanie formularza projektu",
+      "modules": "Ładowanie modułów",
+      "projects": "Ładowanie projektów",
+      "mentions": "Ładowanie wzmianek",
+      "states": "Ładowanie statusów",
+      "created_by_options": "Ładowanie opcji twórcy",
+      "labels": "Ładowanie etykiet",
+      "assignees": "Ładowanie przypisanych",
+      "cycles": "Ładowanie cykli",
+      "description": "Ładowanie opisu",
+      "issue_activity": "Ładowanie aktywności elementu pracy",
+      "issue_description": "Ładowanie opisu elementu pracy",
+      "sidebar": "Ładowanie paska bocznego",
+      "auto_archive_settings": "Ładowanie ustawień automatycznego archiwizowania",
+      "auto_close_settings": "Ładowanie ustawień automatycznego zamykania",
+      "workspaces": "Ładowanie obszarów roboczych",
+      "estimates": "Ładowanie szacunków",
+      "publish_settings": "Ładowanie ustawień publikacji",
+      "member_defaults": "Ładowanie wartości domyślnych członków",
+      "members": "Ładowanie członków",
+      "lead_options": "Ładowanie opcji prowadzącego",
+      "images": "Ładowanie obrazów",
+      "cycle_sidebar_details": "Ładowanie szczegółów paska bocznego cyklu",
+      "cycle_progress_chart": "Ładowanie wykresu postępu cyklu",
+      "cycle_stats": "Ładowanie statystyk cyklu",
+      "cycle_productivity": "Ładowanie produktywności cyklu",
+      "cycle_progress": "Ładowanie postępu cyklu",
+      "price": "Ładowanie ceny",
+      "checkout_button": "Ładowanie przycisku płatności",
+      "sticky": "Ładowanie Sticky",
+      "more_stickies": "Ładowanie kolejnych Stickies",
+      "intake": "Ładowanie Intake",
+      "project_states": "Ładowanie statusów projektu",
+      "profile_stats": "Ładowanie statystyk profilu",
+      "priority_distribution": "Ładowanie rozkładu priorytetów",
+      "changelog": "Ładowanie dziennika zmian",
+      "module_sidebar_details": "Ładowanie szczegółów paska bocznego modułu",
+      "filter": "Ładowanie filtra",
+      "filters": "Ładowanie filtrów",
+      "description_version": "Ładowanie wersji opisu",
+      "integration_status": "Ładowanie statusu integracji",
+      "subscription": "Ładowanie subskrypcji",
+      "slack_channel": "Ładowanie kanału Slack"
     }
   }
 }
diff --git a/packages/i18n/src/locales/pt-BR/accessibility.json b/packages/i18n/src/locales/pt-BR/accessibility.json
index de90eeb36d5..0bf2c8df37c 100644
--- a/packages/i18n/src/locales/pt-BR/accessibility.json
+++ b/packages/i18n/src/locales/pt-BR/accessibility.json
@@ -29,6 +29,65 @@
       "hide_password": "Ocultar senha",
       "close_alert": "Fechar alerta",
       "close_popover": "Fechar popover"
+    },
+    "loading": {
+      "chart": "Carregando gráfico",
+      "insight": "Carregando insight",
+      "table": "Carregando tabela",
+      "active_projects": "Carregando projetos ativos",
+      "work_item": "Carregando item de trabalho",
+      "work_item_details": "Carregando detalhes do item de trabalho",
+      "work_items": "Carregando itens de trabalho",
+      "more_work_items": "Carregando mais itens de trabalho",
+      "page": "Carregando página",
+      "page_content": "Carregando conteúdo da página",
+      "page_version": "Carregando versão da página",
+      "home_widget": "Carregando widget inicial",
+      "quick_links": "Carregando links rápidos",
+      "recent_activity": "Carregando atividade recente",
+      "project_form": "Carregando formulário do projeto",
+      "modules": "Carregando módulos",
+      "projects": "Carregando projetos",
+      "mentions": "Carregando menções",
+      "states": "Carregando estados",
+      "created_by_options": "Carregando opções de criador",
+      "labels": "Carregando etiquetas",
+      "assignees": "Carregando responsáveis",
+      "cycles": "Carregando ciclos",
+      "description": "Carregando descrição",
+      "issue_activity": "Carregando atividade do item de trabalho",
+      "issue_description": "Carregando descrição do item de trabalho",
+      "sidebar": "Carregando barra lateral",
+      "auto_archive_settings": "Carregando configurações de arquivamento automático",
+      "auto_close_settings": "Carregando configurações de fechamento automático",
+      "workspaces": "Carregando espaços de trabalho",
+      "estimates": "Carregando estimativas",
+      "publish_settings": "Carregando configurações de publicação",
+      "member_defaults": "Carregando padrões de membros",
+      "members": "Carregando membros",
+      "lead_options": "Carregando opções de responsável",
+      "images": "Carregando imagens",
+      "cycle_sidebar_details": "Carregando detalhes da barra lateral do ciclo",
+      "cycle_progress_chart": "Carregando gráfico de progresso do ciclo",
+      "cycle_stats": "Carregando estatísticas do ciclo",
+      "cycle_productivity": "Carregando produtividade do ciclo",
+      "cycle_progress": "Carregando progresso do ciclo",
+      "price": "Carregando preço",
+      "checkout_button": "Carregando botão de pagamento",
+      "sticky": "Carregando Sticky",
+      "more_stickies": "Carregando mais Stickies",
+      "intake": "Carregando Intake",
+      "project_states": "Carregando estados do projeto",
+      "profile_stats": "Carregando estatísticas do perfil",
+      "priority_distribution": "Carregando distribuição de prioridades",
+      "changelog": "Carregando registro de alterações",
+      "module_sidebar_details": "Carregando detalhes da barra lateral do módulo",
+      "filter": "Carregando filtro",
+      "filters": "Carregando filtros",
+      "description_version": "Carregando versão da descrição",
+      "integration_status": "Carregando status da integração",
+      "subscription": "Carregando assinatura",
+      "slack_channel": "Carregando canal do Slack"
     }
   }
 }
diff --git a/packages/i18n/src/locales/ro/accessibility.json b/packages/i18n/src/locales/ro/accessibility.json
index 52f55548157..d8d2797c7dc 100644
--- a/packages/i18n/src/locales/ro/accessibility.json
+++ b/packages/i18n/src/locales/ro/accessibility.json
@@ -29,6 +29,65 @@
       "hide_password": "Ascunde parola",
       "close_alert": "Închide alerta",
       "close_popover": "Închide popover-ul"
+    },
+    "loading": {
+      "chart": "Se încarcă graficul",
+      "insight": "Se încarcă perspectiva",
+      "table": "Se încarcă tabelul",
+      "active_projects": "Se încarcă proiectele active",
+      "work_item": "Se încarcă activitatea",
+      "work_item_details": "Se încarcă detaliile activității",
+      "work_items": "Se încarcă activitățile",
+      "more_work_items": "Se încarcă mai multe activități",
+      "page": "Se încarcă pagina",
+      "page_content": "Se încarcă conținutul paginii",
+      "page_version": "Se încarcă versiunea paginii",
+      "home_widget": "Se încarcă widgetul de start",
+      "quick_links": "Se încarcă linkurile rapide",
+      "recent_activity": "Se încarcă activitatea recentă",
+      "project_form": "Se încarcă formularul proiectului",
+      "modules": "Se încarcă modulele",
+      "projects": "Se încarcă proiectele",
+      "mentions": "Se încarcă mențiunile",
+      "states": "Se încarcă stările",
+      "created_by_options": "Se încarcă opțiunile de creator",
+      "labels": "Se încarcă etichetele",
+      "assignees": "Se încarcă responsabili",
+      "cycles": "Se încarcă ciclurile",
+      "description": "Se încarcă descrierea",
+      "issue_activity": "Se încarcă activitatea elementului de lucru",
+      "issue_description": "Se încarcă descrierea elementului de lucru",
+      "sidebar": "Se încarcă bara laterală",
+      "auto_archive_settings": "Se încarcă setările de arhivare automată",
+      "auto_close_settings": "Se încarcă setările de închidere automată",
+      "workspaces": "Se încarcă spațiile de lucru",
+      "estimates": "Se încarcă estimările",
+      "publish_settings": "Se încarcă setările de publicare",
+      "member_defaults": "Se încarcă valorile implicite ale membrilor",
+      "members": "Se încarcă membrii",
+      "lead_options": "Se încarcă opțiunile de responsabil",
+      "images": "Se încarcă imaginile",
+      "cycle_sidebar_details": "Se încarcă detaliile barei laterale a ciclului",
+      "cycle_progress_chart": "Se încarcă graficul de progres al ciclului",
+      "cycle_stats": "Se încarcă statisticile ciclului",
+      "cycle_productivity": "Se încarcă productivitatea ciclului",
+      "cycle_progress": "Se încarcă progresul ciclului",
+      "price": "Se încarcă prețul",
+      "checkout_button": "Se încarcă butonul de plată",
+      "sticky": "Se încarcă Sticky",
+      "more_stickies": "Se încarcă mai multe Stickies",
+      "intake": "Se încarcă Intake",
+      "project_states": "Se încarcă stările proiectului",
+      "profile_stats": "Se încarcă statisticile profilului",
+      "priority_distribution": "Se încarcă distribuția priorităților",
+      "changelog": "Se încarcă jurnalul de modificări",
+      "module_sidebar_details": "Se încarcă detaliile barei laterale a modulului",
+      "filter": "Se încarcă filtrul",
+      "filters": "Se încarcă filtrele",
+      "description_version": "Se încarcă versiunea descrierii",
+      "integration_status": "Se încarcă starea integrării",
+      "subscription": "Se încarcă abonamentul",
+      "slack_channel": "Se încarcă canalul Slack"
     }
   }
 }
diff --git a/packages/i18n/src/locales/ru/accessibility.json b/packages/i18n/src/locales/ru/accessibility.json
index dd4dde76b14..6127900f1fb 100644
--- a/packages/i18n/src/locales/ru/accessibility.json
+++ b/packages/i18n/src/locales/ru/accessibility.json
@@ -29,6 +29,65 @@
       "hide_password": "Скрыть пароль",
       "close_alert": "Закрыть уведомление",
       "close_popover": "Закрыть всплывающее окно"
+    },
+    "loading": {
+      "chart": "Загрузка диаграммы",
+      "insight": "Загрузка аналитики",
+      "table": "Загрузка таблицы",
+      "active_projects": "Загрузка активных проектов",
+      "work_item": "Загрузка рабочего элемента",
+      "work_item_details": "Загрузка сведений о рабочем элементе",
+      "work_items": "Загрузка рабочих элементов",
+      "more_work_items": "Загрузка дополнительных рабочих элементов",
+      "page": "Загрузка страницы",
+      "page_content": "Загрузка содержимого страницы",
+      "page_version": "Загрузка версии страницы",
+      "home_widget": "Загрузка виджета главной",
+      "quick_links": "Загрузка быстрых ссылок",
+      "recent_activity": "Загрузка недавней активности",
+      "project_form": "Загрузка формы проекта",
+      "modules": "Загрузка модулей",
+      "projects": "Загрузка проектов",
+      "mentions": "Загрузка упоминаний",
+      "states": "Загрузка статусов",
+      "created_by_options": "Загрузка параметров автора",
+      "labels": "Загрузка меток",
+      "assignees": "Загрузка назначенных",
+      "cycles": "Загрузка циклов",
+      "description": "Загрузка описания",
+      "issue_activity": "Загрузка активности рабочего элемента",
+      "issue_description": "Загрузка описания рабочего элемента",
+      "sidebar": "Загрузка боковой панели",
+      "auto_archive_settings": "Загрузка параметров автоархивации",
+      "auto_close_settings": "Загрузка параметров автозакрытия",
+      "workspaces": "Загрузка рабочих пространств",
+      "estimates": "Загрузка оценок",
+      "publish_settings": "Загрузка параметров публикации",
+      "member_defaults": "Загрузка значений по умолчанию для участников",
+      "members": "Загрузка участников",
+      "lead_options": "Загрузка параметров руководителя",
+      "images": "Загрузка изображений",
+      "cycle_sidebar_details": "Загрузка сведений боковой панели цикла",
+      "cycle_progress_chart": "Загрузка диаграммы прогресса цикла",
+      "cycle_stats": "Загрузка статистики цикла",
+      "cycle_productivity": "Загрузка продуктивности цикла",
+      "cycle_progress": "Загрузка прогресса цикла",
+      "price": "Загрузка цены",
+      "checkout_button": "Загрузка кнопки оплаты",
+      "sticky": "Загрузка Sticky",
+      "more_stickies": "Загрузка дополнительных Stickies",
+      "intake": "Загрузка Intake",
+      "project_states": "Загрузка статусов проекта",
+      "profile_stats": "Загрузка статистики профиля",
+      "priority_distribution": "Загрузка распределения приоритетов",
+      "changelog": "Загрузка журнала изменений",
+      "module_sidebar_details": "Загрузка сведений боковой панели модуля",
+      "filter": "Загрузка фильтра",
+      "filters": "Загрузка фильтров",
+      "description_version": "Загрузка версии описания",
+      "integration_status": "Загрузка статуса интеграции",
+      "subscription": "Загрузка подписки",
+      "slack_channel": "Загрузка канала Slack"
     }
   }
 }
diff --git a/packages/i18n/src/locales/sk/accessibility.json b/packages/i18n/src/locales/sk/accessibility.json
index 26c5c8be6fe..29277895c86 100644
--- a/packages/i18n/src/locales/sk/accessibility.json
+++ b/packages/i18n/src/locales/sk/accessibility.json
@@ -29,6 +29,65 @@
       "hide_password": "Skryť heslo",
       "close_alert": "Zavrieť upozornenie",
       "close_popover": "Zavrieť vyskakovacie okno"
+    },
+    "loading": {
+      "chart": "Načítavanie grafu",
+      "insight": "Načítavanie prehľadu",
+      "table": "Načítavanie tabuľky",
+      "active_projects": "Načítavanie aktívnych projektov",
+      "work_item": "Načítavanie pracovnej položky",
+      "work_item_details": "Načítavanie podrobností pracovnej položky",
+      "work_items": "Načítavanie pracovných položiek",
+      "more_work_items": "Načítavanie ďalších pracovných položiek",
+      "page": "Načítavanie stránky",
+      "page_content": "Načítavanie obsahu stránky",
+      "page_version": "Načítavanie verzie stránky",
+      "home_widget": "Načítavanie miniaplikácie úvodnej stránky",
+      "quick_links": "Načítavanie rýchlych odkazov",
+      "recent_activity": "Načítavanie nedávnej aktivity",
+      "project_form": "Načítavanie formulára projektu",
+      "modules": "Načítavanie modulov",
+      "projects": "Načítavanie projektov",
+      "mentions": "Načítavanie zmienok",
+      "states": "Načítavanie stavov",
+      "created_by_options": "Načítavanie možností tvorcu",
+      "labels": "Načítavanie štítkov",
+      "assignees": "Načítavanie priradených",
+      "cycles": "Načítavanie cyklov",
+      "description": "Načítavanie popisu",
+      "issue_activity": "Načítavanie aktivity pracovnej položky",
+      "issue_description": "Načítavanie popisu pracovnej položky",
+      "sidebar": "Načítavanie bočného panela",
+      "auto_archive_settings": "Načítavanie nastavení automatickej archivácie",
+      "auto_close_settings": "Načítavanie nastavení automatického zatvorenia",
+      "workspaces": "Načítavanie pracovných priestorov",
+      "estimates": "Načítavanie odhadov",
+      "publish_settings": "Načítavanie nastavení publikovania",
+      "member_defaults": "Načítavanie predvolených hodnôt členov",
+      "members": "Načítavanie členov",
+      "lead_options": "Načítavanie možností vedúceho",
+      "images": "Načítavanie obrázkov",
+      "cycle_sidebar_details": "Načítavanie podrobností bočného panela cyklu",
+      "cycle_progress_chart": "Načítavanie grafu priebehu cyklu",
+      "cycle_stats": "Načítavanie štatistík cyklu",
+      "cycle_productivity": "Načítavanie produktivity cyklu",
+      "cycle_progress": "Načítavanie priebehu cyklu",
+      "price": "Načítavanie ceny",
+      "checkout_button": "Načítavanie tlačidla platby",
+      "sticky": "Načítavanie Sticky",
+      "more_stickies": "Načítavanie ďalších Stickies",
+      "intake": "Načítavanie Intake",
+      "project_states": "Načítavanie stavov projektu",
+      "profile_stats": "Načítavanie štatistík profilu",
+      "priority_distribution": "Načítavanie rozloženia priorít",
+      "changelog": "Načítavanie denníka zmien",
+      "module_sidebar_details": "Načítavanie podrobností bočného panela modulu",
+      "filter": "Načítavanie filtra",
+      "filters": "Načítavanie filtrov",
+      "description_version": "Načítavanie verzie popisu",
+      "integration_status": "Načítavanie stavu integrácie",
+      "subscription": "Načítavanie predplatného",
+      "slack_channel": "Načítavanie kanála Slack"
     }
   }
 }
diff --git a/packages/i18n/src/locales/tr-TR/accessibility.json b/packages/i18n/src/locales/tr-TR/accessibility.json
index 80a35611c2d..08e494bf681 100644
--- a/packages/i18n/src/locales/tr-TR/accessibility.json
+++ b/packages/i18n/src/locales/tr-TR/accessibility.json
@@ -29,6 +29,65 @@
       "hide_password": "Şifreyi gizle",
       "close_alert": "Uyarıyı kapat",
       "close_popover": "Açılır pencereyi kapat"
+    },
+    "loading": {
+      "chart": "Grafik yükleniyor",
+      "insight": "İçgörü yükleniyor",
+      "table": "Tablo yükleniyor",
+      "active_projects": "Aktif projeler yükleniyor",
+      "work_item": "İş öğesi yükleniyor",
+      "work_item_details": "İş öğesi ayrıntıları yükleniyor",
+      "work_items": "İş öğeleri yükleniyor",
+      "more_work_items": "Daha fazla iş öğesi yükleniyor",
+      "page": "Sayfa yükleniyor",
+      "page_content": "Sayfa içeriği yükleniyor",
+      "page_version": "Sayfa sürümü yükleniyor",
+      "home_widget": "Ana sayfa widget’ı yükleniyor",
+      "quick_links": "Hızlı bağlantılar yükleniyor",
+      "recent_activity": "Son etkinlik yükleniyor",
+      "project_form": "Proje formu yükleniyor",
+      "modules": "Modüller yükleniyor",
+      "projects": "Projeler yükleniyor",
+      "mentions": "Bahsetmeler yükleniyor",
+      "states": "Durumlar yükleniyor",
+      "created_by_options": "Oluşturan seçenekleri yükleniyor",
+      "labels": "Etiketler yükleniyor",
+      "assignees": "Atananlar yükleniyor",
+      "cycles": "Döngüler yükleniyor",
+      "description": "Açıklama yükleniyor",
+      "issue_activity": "İş öğesi etkinliği yükleniyor",
+      "issue_description": "İş öğesi açıklaması yükleniyor",
+      "sidebar": "Kenar çubuğu yükleniyor",
+      "auto_archive_settings": "Otomatik arşivleme ayarları yükleniyor",
+      "auto_close_settings": "Otomatik kapatma ayarları yükleniyor",
+      "workspaces": "Çalışma alanları yükleniyor",
+      "estimates": "Tahminler yükleniyor",
+      "publish_settings": "Yayınlama ayarları yükleniyor",
+      "member_defaults": "Üye varsayılanları yükleniyor",
+      "members": "Üyeler yükleniyor",
+      "lead_options": "Sorumlu seçenekleri yükleniyor",
+      "images": "Görseller yükleniyor",
+      "cycle_sidebar_details": "Döngü kenar çubuğu ayrıntıları yükleniyor",
+      "cycle_progress_chart": "Döngü ilerleme grafiği yükleniyor",
+      "cycle_stats": "Döngü istatistikleri yükleniyor",
+      "cycle_productivity": "Döngü üretkenliği yükleniyor",
+      "cycle_progress": "Döngü ilerlemesi yükleniyor",
+      "price": "Fiyat yükleniyor",
+      "checkout_button": "Ödeme düğmesi yükleniyor",
+      "sticky": "Sticky yükleniyor",
+      "more_stickies": "Daha fazla Stickies yükleniyor",
+      "intake": "Intake yükleniyor",
+      "project_states": "Proje durumları yükleniyor",
+      "profile_stats": "Profil istatistikleri yükleniyor",
+      "priority_distribution": "Öncelik dağılımı yükleniyor",
+      "changelog": "Değişiklik günlüğü yükleniyor",
+      "module_sidebar_details": "Modül kenar çubuğu ayrıntıları yükleniyor",
+      "filter": "Filtre yükleniyor",
+      "filters": "Filtreler yükleniyor",
+      "description_version": "Açıklama sürümü yükleniyor",
+      "integration_status": "Entegrasyon durumu yükleniyor",
+      "subscription": "Abonelik yükleniyor",
+      "slack_channel": "Slack kanalı yükleniyor"
     }
   }
 }
diff --git a/packages/i18n/src/locales/ua/accessibility.json b/packages/i18n/src/locales/ua/accessibility.json
index 42766731214..56f990616af 100644
--- a/packages/i18n/src/locales/ua/accessibility.json
+++ b/packages/i18n/src/locales/ua/accessibility.json
@@ -29,6 +29,65 @@
       "hide_password": "Приховати пароль",
       "close_alert": "Закрити сповіщення",
       "close_popover": "Закрити спливаюче вікно"
+    },
+    "loading": {
+      "chart": "Завантаження діаграми",
+      "insight": "Завантаження аналітики",
+      "table": "Завантаження таблиці",
+      "active_projects": "Завантаження активних проєктів",
+      "work_item": "Завантаження робочої одиниці",
+      "work_item_details": "Завантаження деталей робочої одиниці",
+      "work_items": "Завантаження робочих одиниць",
+      "more_work_items": "Завантаження інших робочих одиниць",
+      "page": "Завантаження сторінки",
+      "page_content": "Завантаження вмісту сторінки",
+      "page_version": "Завантаження версії сторінки",
+      "home_widget": "Завантаження віджета головної",
+      "quick_links": "Завантаження швидких посилань",
+      "recent_activity": "Завантаження нещодавньої активності",
+      "project_form": "Завантаження форми проєкту",
+      "modules": "Завантаження модулів",
+      "projects": "Завантаження проєктів",
+      "mentions": "Завантаження згадок",
+      "states": "Завантаження станів",
+      "created_by_options": "Завантаження параметрів автора",
+      "labels": "Завантаження міток",
+      "assignees": "Завантаження призначених",
+      "cycles": "Завантаження циклів",
+      "description": "Завантаження опису",
+      "issue_activity": "Завантаження активності робочої одиниці",
+      "issue_description": "Завантаження опису робочої одиниці",
+      "sidebar": "Завантаження бічної панелі",
+      "auto_archive_settings": "Завантаження параметрів автоархівування",
+      "auto_close_settings": "Завантаження параметрів автозакриття",
+      "workspaces": "Завантаження робочих просторів",
+      "estimates": "Завантаження оцінок",
+      "publish_settings": "Завантаження параметрів публікації",
+      "member_defaults": "Завантаження типових значень учасників",
+      "members": "Завантаження учасників",
+      "lead_options": "Завантаження параметрів керівника",
+      "images": "Завантаження зображень",
+      "cycle_sidebar_details": "Завантаження деталей бічної панелі циклу",
+      "cycle_progress_chart": "Завантаження діаграми прогресу циклу",
+      "cycle_stats": "Завантаження статистики циклу",
+      "cycle_productivity": "Завантаження продуктивності циклу",
+      "cycle_progress": "Завантаження прогресу циклу",
+      "price": "Завантаження ціни",
+      "checkout_button": "Завантаження кнопки оплати",
+      "sticky": "Завантаження Sticky",
+      "more_stickies": "Завантаження інших Stickies",
+      "intake": "Завантаження Intake",
+      "project_states": "Завантаження станів проєкту",
+      "profile_stats": "Завантаження статистики профілю",
+      "priority_distribution": "Завантаження розподілу пріоритетів",
+      "changelog": "Завантаження журналу змін",
+      "module_sidebar_details": "Завантаження деталей бічної панелі модуля",
+      "filter": "Завантаження фільтра",
+      "filters": "Завантаження фільтрів",
+      "description_version": "Завантаження версії опису",
+      "integration_status": "Завантаження стану інтеграції",
+      "subscription": "Завантаження підписки",
+      "slack_channel": "Завантаження каналу Slack"
     }
   }
 }
diff --git a/packages/i18n/src/locales/vi-VN/accessibility.json b/packages/i18n/src/locales/vi-VN/accessibility.json
index b3ab93530e0..39a553add4b 100644
--- a/packages/i18n/src/locales/vi-VN/accessibility.json
+++ b/packages/i18n/src/locales/vi-VN/accessibility.json
@@ -29,6 +29,65 @@
       "hide_password": "Ẩn mật khẩu",
       "close_alert": "Đóng cảnh báo",
       "close_popover": "Đóng popover"
+    },
+    "loading": {
+      "chart": "Đang tải biểu đồ",
+      "insight": "Đang tải thông tin",
+      "table": "Đang tải bảng",
+      "active_projects": "Đang tải các dự án đang hoạt động",
+      "work_item": "Đang tải mục công việc",
+      "work_item_details": "Đang tải chi tiết mục công việc",
+      "work_items": "Đang tải các mục công việc",
+      "more_work_items": "Đang tải thêm mục công việc",
+      "page": "Đang tải trang",
+      "page_content": "Đang tải nội dung trang",
+      "page_version": "Đang tải phiên bản trang",
+      "home_widget": "Đang tải tiện ích trang chủ",
+      "quick_links": "Đang tải liên kết nhanh",
+      "recent_activity": "Đang tải hoạt động gần đây",
+      "project_form": "Đang tải biểu mẫu dự án",
+      "modules": "Đang tải mô-đun",
+      "projects": "Đang tải dự án",
+      "mentions": "Đang tải đề cập",
+      "states": "Đang tải trạng thái",
+      "created_by_options": "Đang tải tùy chọn người tạo",
+      "labels": "Đang tải nhãn",
+      "assignees": "Đang tải người phụ trách",
+      "cycles": "Đang tải chu kỳ",
+      "description": "Đang tải mô tả",
+      "issue_activity": "Đang tải hoạt động mục công việc",
+      "issue_description": "Đang tải mô tả mục công việc",
+      "sidebar": "Đang tải thanh bên",
+      "auto_archive_settings": "Đang tải cài đặt lưu trữ tự động",
+      "auto_close_settings": "Đang tải cài đặt đóng tự động",
+      "workspaces": "Đang tải không gian làm việc",
+      "estimates": "Đang tải ước tính",
+      "publish_settings": "Đang tải cài đặt xuất bản",
+      "member_defaults": "Đang tải giá trị mặc định của thành viên",
+      "members": "Đang tải thành viên",
+      "lead_options": "Đang tải tùy chọn người phụ trách",
+      "images": "Đang tải hình ảnh",
+      "cycle_sidebar_details": "Đang tải chi tiết thanh bên chu kỳ",
+      "cycle_progress_chart": "Đang tải biểu đồ tiến độ chu kỳ",
+      "cycle_stats": "Đang tải thống kê chu kỳ",
+      "cycle_productivity": "Đang tải năng suất chu kỳ",
+      "cycle_progress": "Đang tải tiến độ chu kỳ",
+      "price": "Đang tải giá",
+      "checkout_button": "Đang tải nút thanh toán",
+      "sticky": "Đang tải Sticky",
+      "more_stickies": "Đang tải thêm Stickies",
+      "intake": "Đang tải Intake",
+      "project_states": "Đang tải trạng thái dự án",
+      "profile_stats": "Đang tải thống kê hồ sơ",
+      "priority_distribution": "Đang tải phân bố mức ưu tiên",
+      "changelog": "Đang tải nhật ký thay đổi",
+      "module_sidebar_details": "Đang tải chi tiết thanh bên mô-đun",
+      "filter": "Đang tải bộ lọc",
+      "filters": "Đang tải bộ lọc",
+      "description_version": "Đang tải phiên bản mô tả",
+      "integration_status": "Đang tải trạng thái tích hợp",
+      "subscription": "Đang tải gói đăng ký",
+      "slack_channel": "Đang tải kênh Slack"
     }
   }
 }
diff --git a/packages/i18n/src/locales/zh-CN/accessibility.json b/packages/i18n/src/locales/zh-CN/accessibility.json
index fea84d06373..fcbcc8ec09f 100644
--- a/packages/i18n/src/locales/zh-CN/accessibility.json
+++ b/packages/i18n/src/locales/zh-CN/accessibility.json
@@ -29,6 +29,65 @@
       "hide_password": "隐藏密码",
       "close_alert": "关闭警告",
       "close_popover": "关闭弹出框"
+    },
+    "loading": {
+      "chart": "正在加载图表",
+      "insight": "正在加载洞察",
+      "table": "正在加载表格",
+      "active_projects": "正在加载进行中的项目",
+      "work_item": "正在加载工作项",
+      "work_item_details": "正在加载工作项详情",
+      "work_items": "正在加载工作项",
+      "more_work_items": "正在加载更多工作项",
+      "page": "正在加载页面",
+      "page_content": "正在加载页面内容",
+      "page_version": "正在加载页面版本",
+      "home_widget": "正在加载主页小组件",
+      "quick_links": "正在加载快捷链接",
+      "recent_activity": "正在加载最近活动",
+      "project_form": "正在加载项目表单",
+      "modules": "正在加载模块",
+      "projects": "正在加载项目",
+      "mentions": "正在加载提及",
+      "states": "正在加载状态",
+      "created_by_options": "正在加载创建者选项",
+      "labels": "正在加载标签",
+      "assignees": "正在加载负责人",
+      "cycles": "正在加载周期",
+      "description": "正在加载描述",
+      "issue_activity": "正在加载工作项动态",
+      "issue_description": "正在加载工作项描述",
+      "sidebar": "正在加载侧边栏",
+      "auto_archive_settings": "正在加载自动归档设置",
+      "auto_close_settings": "正在加载自动关闭设置",
+      "workspaces": "正在加载工作区",
+      "estimates": "正在加载估算",
+      "publish_settings": "正在加载发布设置",
+      "member_defaults": "正在加载成员默认值",
+      "members": "正在加载成员",
+      "lead_options": "正在加载负责人选项",
+      "images": "正在加载图片",
+      "cycle_sidebar_details": "正在加载周期侧边栏详情",
+      "cycle_progress_chart": "正在加载周期进度图表",
+      "cycle_stats": "正在加载周期统计",
+      "cycle_productivity": "正在加载周期效率",
+      "cycle_progress": "正在加载周期进度",
+      "price": "正在加载价格",
+      "checkout_button": "正在加载结账按钮",
+      "sticky": "正在加载 Sticky",
+      "more_stickies": "正在加载更多 Stickies",
+      "intake": "正在加载 Intake",
+      "project_states": "正在加载项目状态",
+      "profile_stats": "正在加载个人资料统计",
+      "priority_distribution": "正在加载优先级分布",
+      "changelog": "正在加载更新日志",
+      "module_sidebar_details": "正在加载模块侧边栏详情",
+      "filter": "正在加载筛选器",
+      "filters": "正在加载筛选器",
+      "description_version": "正在加载描述版本",
+      "integration_status": "正在加载集成状态",
+      "subscription": "正在加载订阅",
+      "slack_channel": "正在加载 Slack 频道"
     }
   }
 }
diff --git a/packages/i18n/src/locales/zh-TW/accessibility.json b/packages/i18n/src/locales/zh-TW/accessibility.json
index 75747f86124..48c6e459a8c 100644
--- a/packages/i18n/src/locales/zh-TW/accessibility.json
+++ b/packages/i18n/src/locales/zh-TW/accessibility.json
@@ -29,6 +29,65 @@
       "hide_password": "隱藏密碼",
       "close_alert": "關閉警告",
       "close_popover": "關閉彈出框"
+    },
+    "loading": {
+      "chart": "正在載入圖表",
+      "insight": "正在載入洞察",
+      "table": "正在載入表格",
+      "active_projects": "正在載入進行中的專案",
+      "work_item": "正在載入工作事項",
+      "work_item_details": "正在載入工作事項詳情",
+      "work_items": "正在載入工作事項",
+      "more_work_items": "正在載入更多工作事項",
+      "page": "正在載入頁面",
+      "page_content": "正在載入頁面內容",
+      "page_version": "正在載入頁面版本",
+      "home_widget": "正在載入首頁小工具",
+      "quick_links": "正在載入快速連結",
+      "recent_activity": "正在載入最近活動",
+      "project_form": "正在載入專案表單",
+      "modules": "正在載入模組",
+      "projects": "正在載入專案",
+      "mentions": "正在載入提及",
+      "states": "正在載入狀態",
+      "created_by_options": "正在載入建立者選項",
+      "labels": "正在載入標籤",
+      "assignees": "正在載入指派對象",
+      "cycles": "正在載入週期",
+      "description": "正在載入描述",
+      "issue_activity": "正在載入工作事項動態",
+      "issue_description": "正在載入工作事項描述",
+      "sidebar": "正在載入側邊欄",
+      "auto_archive_settings": "正在載入自動封存設定",
+      "auto_close_settings": "正在載入自動關閉設定",
+      "workspaces": "正在載入工作區",
+      "estimates": "正在載入估算",
+      "publish_settings": "正在載入發布設定",
+      "member_defaults": "正在載入成員預設值",
+      "members": "正在載入成員",
+      "lead_options": "正在載入負責人選項",
+      "images": "正在載入圖片",
+      "cycle_sidebar_details": "正在載入週期側邊欄詳情",
+      "cycle_progress_chart": "正在載入週期進度圖表",
+      "cycle_stats": "正在載入週期統計",
+      "cycle_productivity": "正在載入週期效率",
+      "cycle_progress": "正在載入週期進度",
+      "price": "正在載入價格",
+      "checkout_button": "正在載入結帳按鈕",
+      "sticky": "正在載入 Sticky",
+      "more_stickies": "正在載入更多 Stickies",
+      "intake": "正在載入 Intake",
+      "project_states": "正在載入專案狀態",
+      "profile_stats": "正在載入個人檔案統計",
+      "priority_distribution": "正在載入優先順序分布",
+      "changelog": "正在載入更新紀錄",
+      "module_sidebar_details": "正在載入模組側邊欄詳情",
+      "filter": "正在載入篩選器",
+      "filters": "正在載入篩選器",
+      "description_version": "正在載入描述版本",
+      "integration_status": "正在載入整合狀態",
+      "subscription": "正在載入訂閱",
+      "slack_channel": "正在載入 Slack 頻道"
     }
   }
 }

From 5d9c8c734175b7ee43e1e7b886fea095c3bd989c Mon Sep 17 00:00:00 2001
From: Atul Tameshwari <atameshwari9@gmail.com>
Date: Sat, 5 Sep 2026 00:50:17 +0530
Subject: [PATCH 4/4] refactor: update loading states to use localized
 aria-labels

Replaced static aria-labels in various components with localized strings using the translation function. This change enhances accessibility and user experience by providing contextually relevant loading messages across the application. Components affected include issue details, analytics loaders, and various modals.
---
 .../(projects)/browse/[workItem]/page.tsx      |  2 +-
 .../issues/(detail)/[archivedIssueId]/page.tsx |  4 +++-
 .../core/components/analytics/insight-card.tsx |  4 +++-
 .../analytics/insight-table/loader.tsx         |  4 +++-
 apps/web/core/components/analytics/loaders.tsx | 11 +++++++----
 .../analytics/overview/active-projects.tsx     |  2 +-
 .../automation/auto-archive-automation.tsx     |  2 +-
 .../automation/auto-close-automation.tsx       |  2 +-
 .../components/base-layouts/gantt/sidebar.tsx  |  4 +++-
 .../components/common/filters/created-by.tsx   |  4 +++-
 .../core/description-versions/modal.tsx        |  2 +-
 .../components/core/image-picker-popover.tsx   |  4 +++-
 .../core/modals/bulk-delete-issues-modal.tsx   |  2 +-
 .../core/modals/existing-issues-list-modal.tsx |  2 +-
 .../cycles/active-cycle/cycle-stats.tsx        |  4 ++--
 .../cycles/active-cycle/productivity.tsx       |  2 +-
 .../cycles/active-cycle/progress.tsx           |  2 +-
 .../cycles/analytics-sidebar/root.tsx          |  4 +++-
 .../cycles/analytics-sidebar/sidebar-chart.tsx |  2 +-
 .../rich-text/description-input/loader.tsx     |  4 +++-
 .../components/estimates/loader-screen.tsx     |  4 +++-
 .../gantt-chart/sidebar/issues/sidebar.tsx     |  4 +++-
 .../gantt-chart/sidebar/modules/sidebar.tsx    |  4 +++-
 .../global/product-updates/changelog.tsx       |  4 +++-
 .../home/widgets/loaders/home-loader.tsx       |  4 +++-
 .../home/widgets/loaders/quick-links.tsx       |  4 +++-
 .../home/widgets/loaders/recent-activity.tsx   |  4 +++-
 .../inbox/inbox-filter/filters/labels.tsx      |  4 +++-
 .../inbox/inbox-filter/filters/members.tsx     |  4 +++-
 .../inbox/inbox-filter/filters/state.tsx       |  4 +++-
 .../modals/create-modal/issue-description.tsx  |  2 +-
 .../inbox/modals/select-duplicate.tsx          |  2 +-
 .../web/core/components/inbox/sidebar/root.tsx |  2 +-
 .../integration/single-integration-card.tsx    |  4 +++-
 .../integration/slack/select-channel.tsx       |  4 +++-
 .../issue-detail/issue-activity/loader.tsx     |  4 +++-
 .../issues/issue-detail/subscription.tsx       |  2 +-
 .../filters/header/filters/assignee.tsx        |  4 +++-
 .../filters/header/filters/created-by.tsx      |  4 +++-
 .../filters/header/filters/cycle.tsx           |  4 +++-
 .../filters/header/filters/labels.tsx          |  4 +++-
 .../filters/header/filters/mentions.tsx        |  4 +++-
 .../filters/header/filters/module.tsx          |  4 +++-
 .../filters/header/filters/project.tsx         |  4 +++-
 .../filters/header/filters/state.tsx           |  4 +++-
 .../components/description-editor.tsx          |  2 +-
 .../issues/parent-issues-list-modal.tsx        |  2 +-
 .../components/issues/peek-overview/loader.tsx |  4 +++-
 .../labels/project-setting-label-list.tsx      |  2 +-
 .../license/modal/card/checkout-button.tsx     |  6 ++++--
 .../license/modal/card/talk-to-sales.tsx       |  6 ++++--
 .../modules/analytics-sidebar/root.tsx         |  2 +-
 .../modules/dropdowns/filters/lead.tsx         |  4 +++-
 .../modules/dropdowns/filters/members.tsx      |  4 +++-
 .../pages/loaders/page-content-loader.tsx      |  4 +++-
 .../components/pages/loaders/page-loader.tsx   |  4 +++-
 .../core/components/pages/version/editor.tsx   |  4 +++-
 .../components/profile/overview/activity.tsx   |  2 +-
 .../profile/overview/priority-distribution.tsx |  2 +-
 .../core/components/profile/overview/stats.tsx |  2 +-
 apps/web/core/components/profile/sidebar.tsx   |  2 +-
 .../core/components/project-states/loader.tsx  |  4 +++-
 .../project/dropdowns/filters/lead.tsx         |  4 +++-
 .../project/dropdowns/filters/members.tsx      |  4 +++-
 .../core/components/project/form-loader.tsx    | 18 ++++++++++--------
 .../project-settings-member-defaults.tsx       |  4 ++--
 .../project/publish-project/modal.tsx          |  4 +++-
 apps/web/core/components/readonly/state.tsx    |  2 +-
 .../rich-filters/filter-item/loader.tsx        |  4 +++-
 .../components/rich-filters/filters-row.tsx    |  4 +++-
 .../stickies/layout/stickies-infinite.tsx      |  4 +++-
 .../stickies/layout/stickies-loader.tsx        |  4 +++-
 .../project-inbox/inbox-layout-loader.tsx      |  4 +++-
 .../workspace/sidebar/projects-list.tsx        |  2 +-
 .../workspace/sidebar/workspace-menu-root.tsx  |  2 +-
 75 files changed, 186 insertions(+), 89 deletions(-)

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 c79b1de1338..b4c5efdf657 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx
@@ -108,7 +108,7 @@ export const IssueDetailsPage = observer(function IssueDetailsPage({ params }: R
   if (issueLoader) {
     return (
       <div className="flex h-full gap-5 p-5">
-        <Skeleton aria-label="Loading work item details">
+        <Skeleton ariaLabel={t("aria_labels.loading.work_item_details")}>
           <div className="flex w-full gap-5">
             <div className="basis-2/3 space-y-2">
               <SkeletonItem blockSize="30px" inlineSize="40%" />
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 0e83254ae95..d3dd08a12fc 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,6 +12,7 @@ import { Banner } from "@plane/propel/banner";
 import { Button } from "@plane/propel/button";
 import { ArchiveOutline } from "@makeplane/propel/icons";
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 // components
 import { PageHead } from "@/components/core/page-title";
 import { IssueDetailRoot } from "@/components/issues/issue-detail";
@@ -22,6 +23,7 @@ import { useProject } from "@/hooks/store/use-project";
 import type { Route } from "./+types/page";
 
 function ArchivedIssueDetailsPage({ params }: Route.ComponentProps) {
+  const { t } = useTranslation();
   // router
   const { workspaceSlug, projectId, archivedIssueId } = params;
   const router = useRouter();
@@ -52,7 +54,7 @@ function ArchivedIssueDetailsPage({ params }: Route.ComponentProps) {
       <PageHead title={pageTitle} />
       {issueLoader ? (
         <div className="flex h-full gap-5 p-5">
-          <Skeleton aria-label="Loading work item details">
+          <Skeleton aria-label={t("aria_labels.loading.work_item_details")}>
             <div className="flex w-full gap-5">
               <div className="basis-2/3 space-y-2">
                 <SkeletonItem blockSize="30px" inlineSize="40%" />
diff --git a/apps/web/core/components/analytics/insight-card.tsx b/apps/web/core/components/analytics/insight-card.tsx
index e8e706eeef3..f78799d7c98 100644
--- a/apps/web/core/components/analytics/insight-card.tsx
+++ b/apps/web/core/components/analytics/insight-card.tsx
@@ -7,6 +7,7 @@
 // plane package imports
 import React from "react";
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 import type { IAnalyticsResponseFields } from "@plane/types";
 
 export type InsightCardProps = {
@@ -16,6 +17,7 @@ export type InsightCardProps = {
 };
 
 function InsightCard(props: InsightCardProps) {
+  const { t } = useTranslation();
   const { data, label, isLoading = false } = props;
   const count = data?.count ?? 0;
 
@@ -27,7 +29,7 @@ function InsightCard(props: InsightCardProps) {
           <div className="text-20 font-bold text-primary">{count}</div>
         </div>
       ) : (
-        <Skeleton aria-label="Loading insight">
+        <Skeleton aria-label={t("aria_labels.loading.insight")}>
           <SkeletonItem blockSize="50px" />
         </Skeleton>
       )}
diff --git a/apps/web/core/components/analytics/insight-table/loader.tsx b/apps/web/core/components/analytics/insight-table/loader.tsx
index f378ad96d3d..7dcd3170639 100644
--- a/apps/web/core/components/analytics/insight-table/loader.tsx
+++ b/apps/web/core/components/analytics/insight-table/loader.tsx
@@ -7,6 +7,7 @@
 import * as React from "react";
 import type { ColumnDef } from "@tanstack/react-table";
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@plane/propel/table";
 
 interface TableSkeletonProps {
@@ -15,8 +16,9 @@ interface TableSkeletonProps {
 }
 
 export function TableLoader({ columns, rows }: TableSkeletonProps) {
+  const { t } = useTranslation();
   return (
-    <Skeleton aria-label="Loading table">
+    <Skeleton aria-label={t("aria_labels.loading.table")}>
       <Table>
         <TableHeader>
           <TableRow>
diff --git a/apps/web/core/components/analytics/loaders.tsx b/apps/web/core/components/analytics/loaders.tsx
index 568cfe00524..dbcb06b62f2 100644
--- a/apps/web/core/components/analytics/loaders.tsx
+++ b/apps/web/core/components/analytics/loaders.tsx
@@ -5,24 +5,26 @@
  */
 
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 
 export function ProjectInsightsLoader() {
+  const { t } = useTranslation();
   return (
     <div className="flex h-[200px] gap-1">
       <div className="h-[200px] w-full">
-        <Skeleton aria-label="Loading chart">
+        <Skeleton aria-label={t("aria_labels.loading.chart")}>
           <div className="h-full w-full">
             <SkeletonItem blockSize="100%" inlineSize="100%" />
           </div>
         </Skeleton>
       </div>
       <div className="flex h-full w-full flex-col gap-1">
-        <Skeleton aria-label="Loading chart">
+        <Skeleton aria-label={t("aria_labels.loading.chart")}>
           <div className="h-12 w-full">
             <SkeletonItem blockSize="100%" />
           </div>
         </Skeleton>
-        <Skeleton aria-label="Loading chart">
+        <Skeleton aria-label={t("aria_labels.loading.chart")}>
           <div className="h-full w-full">
             <SkeletonItem blockSize="100%" />
           </div>
@@ -33,8 +35,9 @@ export function ProjectInsightsLoader() {
 }
 
 export function ChartLoader() {
+  const { t } = useTranslation();
   return (
-    <Skeleton aria-label="Loading chart">
+    <Skeleton aria-label={t("aria_labels.loading.chart")}>
       <div className="h-[350px] w-full">
         <SkeletonItem blockSize="100%" />
       </div>
diff --git a/apps/web/core/components/analytics/overview/active-projects.tsx b/apps/web/core/components/analytics/overview/active-projects.tsx
index fbbf0f5b09c..0d1cfc9ffbb 100644
--- a/apps/web/core/components/analytics/overview/active-projects.tsx
+++ b/apps/web/core/components/analytics/overview/active-projects.tsx
@@ -40,7 +40,7 @@ const ActiveProjects = observer(function ActiveProjects() {
     >
       <div className="flex h-[350px] flex-col gap-4 overflow-auto">
         {isProjectAnalyticsCountLoading && (
-          <Skeleton aria-label="Loading active projects">
+          <Skeleton aria-label={t("aria_labels.loading.active_projects")}>
             <div className="flex flex-col gap-4">
               {Array.from({ length: 5 }).map((_, index) => (
                 <SkeletonItem key={index} blockSize="40px" />
diff --git a/apps/web/core/components/automation/auto-archive-automation.tsx b/apps/web/core/components/automation/auto-archive-automation.tsx
index c8a0018d0af..5e9103956db 100644
--- a/apps/web/core/components/automation/auto-archive-automation.tsx
+++ b/apps/web/core/components/automation/auto-archive-automation.tsx
@@ -126,7 +126,7 @@ export const AutoArchiveAutomation = observer(function AutoArchiveAutomation(pro
             </div>
           )
         ) : (
-          <Skeleton aria-label="Loading auto-archive settings">
+          <Skeleton aria-label={t("aria_labels.loading.auto_archive_settings")}>
             <div className="ml-13">
               <SkeletonItem blockSize="50px" />
             </div>
diff --git a/apps/web/core/components/automation/auto-close-automation.tsx b/apps/web/core/components/automation/auto-close-automation.tsx
index aea06d01b65..fc4925edcb6 100644
--- a/apps/web/core/components/automation/auto-close-automation.tsx
+++ b/apps/web/core/components/automation/auto-close-automation.tsx
@@ -189,7 +189,7 @@ export const AutoCloseAutomation = observer(function AutoCloseAutomation(props:
             </div>
           )
         ) : (
-          <Skeleton aria-label="Loading auto-close settings">
+          <Skeleton aria-label={t("aria_labels.loading.auto_close_settings")}>
             <div className="ml-13">
               <SkeletonItem blockSize="50px" />
             </div>
diff --git a/apps/web/core/components/base-layouts/gantt/sidebar.tsx b/apps/web/core/components/base-layouts/gantt/sidebar.tsx
index 5f116b38ce9..86060a6054d 100644
--- a/apps/web/core/components/base-layouts/gantt/sidebar.tsx
+++ b/apps/web/core/components/base-layouts/gantt/sidebar.tsx
@@ -8,6 +8,7 @@ import type { RefObject } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 import type { IBaseLayoutsBaseItem, IBlockUpdateData } from "@plane/types";
 import { Row } from "@plane/ui";
 import { cn } from "@plane/utils";
@@ -32,6 +33,7 @@ type Props<T extends IBaseLayoutsBaseItem> = {
 };
 
 export const BaseGanttSidebar = observer(function BaseGanttSidebar<T extends IBaseLayoutsBaseItem>(props: Props<T>) {
+  const { t } = useTranslation();
   const {
     blockUpdateHandler,
     blockIds,
@@ -144,7 +146,7 @@ export const BaseGanttSidebar = observer(function BaseGanttSidebar<T extends IBa
           )}
         </>
       ) : (
-        <Skeleton aria-label="Loading sidebar">
+        <Skeleton aria-label={t("aria_labels.loading.sidebar")}>
           <div className="space-y-3 pr-2">
             <SkeletonItem blockSize="34px" />
             <SkeletonItem blockSize="34px" />
diff --git a/apps/web/core/components/common/filters/created-by.tsx b/apps/web/core/components/common/filters/created-by.tsx
index 5d1e2990f01..5d99bfd78e7 100644
--- a/apps/web/core/components/common/filters/created-by.tsx
+++ b/apps/web/core/components/common/filters/created-by.tsx
@@ -10,6 +10,7 @@ import { observer } from "mobx-react";
 // ui
 import { Avatar } from "@makeplane/propel/components/avatar";
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 // components
 import { getFileURL } from "@plane/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -26,6 +27,7 @@ type Props = {
 };
 
 export const FilterCreatedBy = observer(function FilterCreatedBy(props: Props) {
+  const { t } = useTranslation();
   const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
   // states
   const [itemsToRender, setItemsToRender] = useState(5);
@@ -103,7 +105,7 @@ export const FilterCreatedBy = observer(function FilterCreatedBy(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Skeleton aria-label="Loading created-by options">
+            <Skeleton aria-label={t("aria_labels.loading.created_by_options")}>
               <div className="space-y-2">
                 <SkeletonItem blockSize="20px" />
                 <SkeletonItem blockSize="20px" />
diff --git a/apps/web/core/components/core/description-versions/modal.tsx b/apps/web/core/components/core/description-versions/modal.tsx
index 6d71e5fa13c..df656ed7a59 100644
--- a/apps/web/core/components/core/description-versions/modal.tsx
+++ b/apps/web/core/components/core/description-versions/modal.tsx
@@ -140,7 +140,7 @@ export const DescriptionVersionsModal = observer(function DescriptionVersionsMod
               workspaceSlug={workspaceSlug}
             />
           ) : (
-            <Skeleton aria-label="Loading description version">
+            <Skeleton aria-label={t("aria_labels.loading.description_version")}>
               <div className="space-y-1">
                 <SkeletonItem blockSize="15px" inlineSize="300px" />
                 <SkeletonItem blockSize="15px" inlineSize="400px" />
diff --git a/apps/web/core/components/core/image-picker-popover.tsx b/apps/web/core/components/core/image-picker-popover.tsx
index ed8fe836b4a..be9c4aad46a 100644
--- a/apps/web/core/components/core/image-picker-popover.tsx
+++ b/apps/web/core/components/core/image-picker-popover.tsx
@@ -15,6 +15,7 @@ import { Popover } from "@headlessui/react";
 // plane imports
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 import { ACCEPTED_COVER_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
 import { Tabs } from "@plane/propel/tabs";
@@ -53,6 +54,7 @@ type Props<TFieldValues extends FieldValues = FieldValues> = {
 const fileService = new FileService();
 
 function ImagePickerPopoverComponent<TFieldValues extends FieldValues = FieldValues>(props: Props<TFieldValues>) {
+  const { t } = useTranslation();
   const { label, value, control, onChange, disabled = false, tabIndex, isProfileCover = false, projectId } = props;
   // states
   const [image, setImage] = useState<File | null>(null);
@@ -272,7 +274,7 @@ function ImagePickerPopoverComponent<TFieldValues extends FieldValues = FieldVal
                           <p className="pt-7 text-center text-11 text-secondary">No images found.</p>
                         )
                       ) : (
-                        <Skeleton aria-label="Loading images">
+                        <Skeleton aria-label={t("aria_labels.loading.images")}>
                           <div className="grid grid-cols-4 gap-4">
                             <SkeletonItem blockSize="80px" />
                             <SkeletonItem blockSize="80px" />
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 d43c2897965..0c72468cdcf 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
@@ -186,7 +186,7 @@ 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 ? (
-              <Skeleton aria-label="Loading work items">
+              <Skeleton aria-label={t("aria_labels.loading.work_items")}>
                 <div className="space-y-3 p-3">
                   <SkeletonItem blockSize="40px" />
                   <SkeletonItem blockSize="40px" />
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 f927e2b46b8..a620cfc1332 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
@@ -236,7 +236,7 @@ export function ExistingIssuesListModal(props: Props) {
           )}
 
           {isSearching || isLoading ? (
-            <Skeleton aria-label="Loading work items">
+            <Skeleton aria-label={t("aria_labels.loading.work_items")}>
               <div className="space-y-3 p-3">
                 <SkeletonItem blockSize="40px" />
                 <SkeletonItem blockSize="40px" />
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 f6c56f65c0b..d91216de523 100644
--- a/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx
+++ b/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx
@@ -97,7 +97,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
   useIntersectionObserver(issuesContainerRef, issuesLoaderElement, loadMoreIssues, `0% 0% 100% 0%`);
 
   const loaders = (
-    <Skeleton aria-label="Loading cycle stats">
+    <Skeleton aria-label={t("aria_labels.loading.cycle_stats")}>
       <div className="space-y-3">
         <SkeletonItem blockSize="30px" />
         <SkeletonItem blockSize="30px" />
@@ -372,7 +372,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
       </Tab.Group>
     </div>
   ) : (
-    <Skeleton aria-label="Loading cycle stats">
+    <Skeleton aria-label={t("aria_labels.loading.cycle_stats")}>
       <div 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">
         <SkeletonItem blockSize="17rem" />
       </div>
diff --git a/apps/web/core/components/cycles/active-cycle/productivity.tsx b/apps/web/core/components/cycles/active-cycle/productivity.tsx
index 9098d9216e4..0e901a82b76 100644
--- a/apps/web/core/components/cycles/active-cycle/productivity.tsx
+++ b/apps/web/core/components/cycles/active-cycle/productivity.tsx
@@ -101,7 +101,7 @@ export const ActiveCycleProductivity = observer(function ActiveCycleProductivity
       </Link>
     </div>
   ) : (
-    <Skeleton aria-label="Loading cycle productivity">
+    <Skeleton aria-label={t("aria_labels.loading.cycle_productivity")}>
       <div className="flex min-h-[17rem] flex-col gap-5 rounded-lg border border-subtle bg-surface-1">
         <SkeletonItem blockSize="100%" />
       </div>
diff --git a/apps/web/core/components/cycles/active-cycle/progress.tsx b/apps/web/core/components/cycles/active-cycle/progress.tsx
index ef91c36bae6..63a558c22e7 100644
--- a/apps/web/core/components/cycles/active-cycle/progress.tsx
+++ b/apps/web/core/components/cycles/active-cycle/progress.tsx
@@ -116,7 +116,7 @@ export const ActiveCycleProgress = observer(function ActiveCycleProgress(props:
       )}
     </div>
   ) : (
-    <Skeleton aria-label="Loading cycle progress">
+    <Skeleton aria-label={t("aria_labels.loading.cycle_progress")}>
       <div className="flex min-h-[17rem] flex-col gap-5 rounded-lg border border-subtle bg-surface-1">
         <SkeletonItem blockSize="100%" />
       </div>
diff --git a/apps/web/core/components/cycles/analytics-sidebar/root.tsx b/apps/web/core/components/cycles/analytics-sidebar/root.tsx
index 887cfd0aca7..c2f8b881233 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/root.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/root.tsx
@@ -5,6 +5,7 @@
  */
 
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -23,6 +24,7 @@ type Props = {
 };
 
 export const CycleDetailsSidebar = observer(function CycleDetailsSidebar(props: Props) {
+  const { t } = useTranslation();
   const { handleClose, isArchived, projectId, workspaceSlug, cycleId } = props;
 
   // store hooks
@@ -34,7 +36,7 @@ export const CycleDetailsSidebar = observer(function CycleDetailsSidebar(props:
 
   if (!cycleDetails)
     return (
-      <Skeleton aria-label="Loading cycle sidebar details">
+      <Skeleton aria-label={t("aria_labels.loading.cycle_sidebar_details")}>
         <div className="px-5">
           <div className="space-y-2">
             <SkeletonItem blockSize="15px" inlineSize="50%" />
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 f6a3d2916b7..e0ca95b9d95 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/sidebar-chart.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/sidebar-chart.tsx
@@ -79,7 +79,7 @@ export const SidebarChart = observer(function SidebarChart(props: ProgressChartP
               />
             </Fragment>
           ) : (
-            <Skeleton aria-label="Loading cycle progress chart">
+            <Skeleton aria-label={t("aria_labels.loading.cycle_progress_chart")}>
               <div className="mt-4 h-[160px] w-full">
                 <SkeletonItem blockSize="100%" />
               </div>
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 3aaa52dd57d..16722f97109 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
@@ -6,6 +6,7 @@
 
 // plane imports
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 import { cn } from "@plane/utils";
 
 type Props = {
@@ -13,10 +14,11 @@ type Props = {
 };
 
 export function DescriptionInputLoader(props: Props) {
+  const { t } = useTranslation();
   const { className } = props;
 
   return (
-    <Skeleton aria-label="Loading description">
+    <Skeleton aria-label={t("aria_labels.loading.description")}>
       <div className={cn("space-y-2", className)}>
         <SkeletonItem blockSize="26px" />
         <div className="flex items-center gap-2">
diff --git a/apps/web/core/components/estimates/loader-screen.tsx b/apps/web/core/components/estimates/loader-screen.tsx
index 3d2d600a4bb..e5c678ce537 100644
--- a/apps/web/core/components/estimates/loader-screen.tsx
+++ b/apps/web/core/components/estimates/loader-screen.tsx
@@ -5,9 +5,11 @@
  */
 
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 export function EstimateLoaderScreen() {
+  const { t } = useTranslation();
   return (
-    <Skeleton aria-label="Loading estimates">
+    <Skeleton aria-label={t("aria_labels.loading.estimates")}>
       <div className="mt-5 space-y-5">
         <SkeletonItem blockSize="40px" />
         <SkeletonItem blockSize="40px" />
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 c6656923757..6d8a10bda6e 100644
--- a/apps/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx
+++ b/apps/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx
@@ -9,6 +9,7 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 // ui
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 import { GANTT_TIMELINE_TYPE } from "@plane/types";
 import type { IBlockUpdateData } from "@plane/types";
 // components
@@ -38,6 +39,7 @@ type Props = {
 };
 
 export const IssueGanttSidebar = observer(function IssueGanttSidebar(props: Props) {
+  const { t } = useTranslation();
   const {
     blockUpdateHandler,
     blockIds,
@@ -122,7 +124,7 @@ export const IssueGanttSidebar = observer(function IssueGanttSidebar(props: Prop
           )}
         </>
       ) : (
-        <Skeleton aria-label="Loading sidebar">
+        <Skeleton aria-label={t("aria_labels.loading.sidebar")}>
           <div className="space-y-3 pr-2">
             <SkeletonItem blockSize="34px" />
             <SkeletonItem blockSize="34px" />
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 1e210df743d..15aace75538 100644
--- a/apps/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx
+++ b/apps/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx
@@ -7,6 +7,7 @@
 import { observer } from "mobx-react";
 // ui
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 import { GANTT_TIMELINE_TYPE } from "@plane/types";
 import type { IBlockUpdateData } from "@plane/types";
 // components
@@ -25,6 +26,7 @@ type Props = {
 };
 
 export const ModuleGanttSidebar = observer(function ModuleGanttSidebar(props: Props) {
+  const { t } = useTranslation();
   const { blockUpdateHandler, blockIds, enableReorder } = props;
 
   const { getBlockById } = useTimeLineChart(GANTT_TIMELINE_TYPE.MODULE);
@@ -52,7 +54,7 @@ export const ModuleGanttSidebar = observer(function ModuleGanttSidebar(props: Pr
           </GanttDnDHOC>
         ))
       ) : (
-        <Skeleton aria-label="Loading sidebar">
+        <Skeleton aria-label={t("aria_labels.loading.sidebar")}>
           <div className="space-y-3 pr-2">
             <SkeletonItem blockSize="34px" />
             <SkeletonItem blockSize="34px" />
diff --git a/apps/web/core/components/global/product-updates/changelog.tsx b/apps/web/core/components/global/product-updates/changelog.tsx
index 58468de6d73..01d1753fe12 100644
--- a/apps/web/core/components/global/product-updates/changelog.tsx
+++ b/apps/web/core/components/global/product-updates/changelog.tsx
@@ -5,6 +5,7 @@
  */
 
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 import { useState, useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 // hooks
@@ -12,6 +13,7 @@ import { ProductUpdatesFallback } from "@/components/global/product-updates/fall
 import { useInstance } from "@/hooks/store/use-instance";
 
 export const ProductUpdatesChangelog = observer(function ProductUpdatesChangelog() {
+  const { t } = useTranslation();
   // refs
   const isLoadingRef = useRef(true);
   // states
@@ -74,7 +76,7 @@ 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 && (
-        <Skeleton aria-label="Loading changelog">
+        <Skeleton aria-label={t("aria_labels.loading.changelog")}>
           <div className="absolute inset-0 flex h-full w-full flex-col items-center justify-center gap-3">
             <SkeletonItem blockSize="95%" inlineSize="95%" />
           </div>
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 457df5caee6..d207199e780 100644
--- a/apps/web/core/components/home/widgets/loaders/home-loader.tsx
+++ b/apps/web/core/components/home/widgets/loaders/home-loader.tsx
@@ -6,13 +6,15 @@
 
 import { range } from "lodash-es";
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 
 export function HomeLoader() {
+  const { t } = useTranslation();
   return (
     <>
       {range(3).map((index) => (
         <div key={index}>
-          <Skeleton aria-label="Loading home widget">
+          <Skeleton aria-label={t("aria_labels.loading.home_widget")}>
             <div className="mb-2">
               <div className="mb-4">
                 <SkeletonItem blockSize="20px" inlineSize="100px" />
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 bb5d4330d2f..e8cc5ee547b 100644
--- a/apps/web/core/components/home/widgets/loaders/quick-links.tsx
+++ b/apps/web/core/components/home/widgets/loaders/quick-links.tsx
@@ -5,11 +5,13 @@
  */
 
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 import { range } from "lodash-es";
 
 export function QuickLinksWidgetLoader() {
+  const { t } = useTranslation();
   return (
-    <Skeleton aria-label="Loading quick links">
+    <Skeleton aria-label={t("aria_labels.loading.quick_links")}>
       <div className="flex flex-wrap gap-2 rounded-xl bg-surface-1">
         {range(4).map((index) => (
           <SkeletonItem key={index} blockSize="56px" inlineSize="230px" />
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 63f9a045ac5..31bae031154 100644
--- a/apps/web/core/components/home/widgets/loaders/recent-activity.tsx
+++ b/apps/web/core/components/home/widgets/loaders/recent-activity.tsx
@@ -5,11 +5,13 @@
  */
 
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 import { range } from "lodash-es";
 
 export function RecentActivityWidgetLoader() {
+  const { t } = useTranslation();
   return (
-    <Skeleton aria-label="Loading recent activity">
+    <Skeleton aria-label={t("aria_labels.loading.recent_activity")}>
       <div className="space-y-6 rounded-xl px-2">
         {range(5).map((index) => (
           <div key={index} className="flex items-start gap-3.5">
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 01ff49f68a8..e974dca4826 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/labels.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/labels.tsx
@@ -7,6 +7,7 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 import type { IIssueLabel } from "@plane/types";
 // components
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -23,6 +24,7 @@ type Props = {
 };
 
 export const FilterLabels = observer(function FilterLabels(props: Props) {
+  const { t } = useTranslation();
   const { labels, searchQuery } = props;
 
   const [itemsToRender, setItemsToRender] = useState(5);
@@ -81,7 +83,7 @@ export const FilterLabels = observer(function FilterLabels(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Skeleton aria-label="Loading labels">
+            <Skeleton aria-label={t("aria_labels.loading.labels")}>
               <div className="space-y-2">
                 <SkeletonItem blockSize="20px" />
                 <SkeletonItem blockSize="20px" />
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 538ccf7a7d1..06e7792bac1 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/members.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/members.tsx
@@ -10,6 +10,7 @@ import { observer } from "mobx-react";
 // plane types
 import { Avatar } from "@makeplane/propel/components/avatar";
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 import type { TInboxIssueFilterMemberKeys } from "@plane/types";
 // plane ui
 // components
@@ -29,6 +30,7 @@ type Props = {
 };
 
 export const FilterMember = observer(function FilterMember(props: Props) {
+  const { t } = useTranslation();
   const { filterKey, label = "Members", memberIds, searchQuery } = props;
   // hooks
   const { inboxFilters, handleInboxIssueFilters } = useProjectInbox();
@@ -111,7 +113,7 @@ export const FilterMember = observer(function FilterMember(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Skeleton aria-label="Loading members">
+            <Skeleton aria-label={t("aria_labels.loading.members")}>
               <div className="space-y-2">
                 <SkeletonItem blockSize="20px" />
                 <SkeletonItem blockSize="20px" />
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 063015f0f25..326405f9868 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/state.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/state.tsx
@@ -7,6 +7,7 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 import { EIconSize } from "@plane/constants";
 import { StateGroupIcon } from "@plane/propel/icons";
 import type { IState } from "@plane/types";
@@ -21,6 +22,7 @@ type Props = {
 };
 
 export const FilterState = observer(function FilterState(props: Props) {
+  const { t } = useTranslation();
   const { states, searchQuery } = props;
 
   const [itemsToRender, setItemsToRender] = useState(5);
@@ -86,7 +88,7 @@ export const FilterState = observer(function FilterState(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Skeleton aria-label="Loading states">
+            <Skeleton aria-label={t("aria_labels.loading.states")}>
               <div className="space-y-2">
                 <SkeletonItem blockSize="20px" />
                 <SkeletonItem blockSize="20px" />
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 d72ba151fed..5d08fb19da3 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
@@ -61,7 +61,7 @@ export const InboxIssueDescription = observer(function InboxIssueDescription(pro
 
   if (loader === "issue-loading")
     return (
-      <Skeleton aria-label="Loading issue description">
+      <Skeleton aria-label={t("aria_labels.loading.issue_description")}>
         <div className="min-h-[6rem] rounded-md border border-subtle">
           <SkeletonItem blockSize="140px" />
         </div>
diff --git a/apps/web/core/components/inbox/modals/select-duplicate.tsx b/apps/web/core/components/inbox/modals/select-duplicate.tsx
index 9563a87706a..56e519cc5d6 100644
--- a/apps/web/core/components/inbox/modals/select-duplicate.tsx
+++ b/apps/web/core/components/inbox/modals/select-duplicate.tsx
@@ -154,7 +154,7 @@ 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 ? (
-            <Skeleton aria-label="Loading work items">
+            <Skeleton aria-label={t("aria_labels.loading.work_items")}>
               <div className="space-y-3 p-3">
                 <SkeletonItem blockSize="40px" />
                 <SkeletonItem blockSize="40px" />
diff --git a/apps/web/core/components/inbox/sidebar/root.tsx b/apps/web/core/components/inbox/sidebar/root.tsx
index ef8e543f308..0dfbda0463f 100644
--- a/apps/web/core/components/inbox/sidebar/root.tsx
+++ b/apps/web/core/components/inbox/sidebar/root.tsx
@@ -175,7 +175,7 @@ export const InboxSidebar = observer(function InboxSidebar(props: IInboxSidebarP
             )}
             <div ref={setElementRef}>
               {inboxIssuePaginationInfo?.next_page_results && (
-                <Skeleton aria-label="Loading more work items">
+                <Skeleton aria-label={t("aria_labels.loading.more_work_items")}>
                   <div className="mx-auto w-full space-y-4 px-2 py-4">
                     <SkeletonItem blockSize="64px" />
                     <SkeletonItem blockSize="64px" />
diff --git a/apps/web/core/components/integration/single-integration-card.tsx b/apps/web/core/components/integration/single-integration-card.tsx
index e368735fbaf..aa883d6b099 100644
--- a/apps/web/core/components/integration/single-integration-card.tsx
+++ b/apps/web/core/components/integration/single-integration-card.tsx
@@ -14,6 +14,7 @@ import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 import type { IAppIntegration, IWorkspaceIntegration } from "@plane/types";
 // ui
 // assets
@@ -50,6 +51,7 @@ const integrationDetails: { [key: string]: any } = {
 const integrationService = new IntegrationService();
 
 export const SingleIntegrationCard = observer(function SingleIntegrationCard({ integration }: Props) {
+  const { t } = useTranslation();
   // states
   const [deletingIntegration, setDeletingIntegration] = useState(false);
   // router
@@ -177,7 +179,7 @@ export const SingleIntegrationCard = observer(function SingleIntegrationCard({ i
           </Tooltip>
         )
       ) : (
-        <Skeleton aria-label="Loading integration status">
+        <Skeleton aria-label={t("aria_labels.loading.integration_status")}>
           <SkeletonItem blockSize="32px" inlineSize="64px" />
         </Skeleton>
       )}
diff --git a/apps/web/core/components/integration/slack/select-channel.tsx b/apps/web/core/components/integration/slack/select-channel.tsx
index 2bf868a4bef..9c1d690c730 100644
--- a/apps/web/core/components/integration/slack/select-channel.tsx
+++ b/apps/web/core/components/integration/slack/select-channel.tsx
@@ -10,6 +10,7 @@ import { useParams } from "next/navigation";
 import useSWR, { mutate } from "swr";
 // types
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 import type { IWorkspaceIntegration, ISlackIntegration } from "@plane/types";
 // ui
 // fetch-keys
@@ -27,6 +28,7 @@ type Props = {
 const appInstallationService = new AppInstallationService();
 
 export const SelectChannel = observer(function SelectChannel({ integration }: Props) {
+  const { t } = useTranslation();
   // store hooks
   const { config } = useInstance();
   // states
@@ -102,7 +104,7 @@ export const SelectChannel = observer(function SelectChannel({ integration }: Pr
           />
         </button>
       ) : (
-        <Skeleton aria-label="Loading slack channel">
+        <Skeleton aria-label={t("aria_labels.loading.slack_channel")}>
           <SkeletonItem blockSize="35px" inlineSize="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 d2bd08fc41e..3be984129aa 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,10 +5,12 @@
  */
 
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 
 export function IssueActivityLoader() {
+  const { t } = useTranslation();
   return (
-    <Skeleton aria-label="Loading issue activity">
+    <Skeleton aria-label={t("aria_labels.loading.issue_activity")}>
       <div className="space-y-8">
         <div className="flex items-start gap-3">
           <div className="shrink-0">
diff --git a/apps/web/core/components/issues/issue-detail/subscription.tsx b/apps/web/core/components/issues/issue-detail/subscription.tsx
index a3f65e38e78..88583313932 100644
--- a/apps/web/core/components/issues/issue-detail/subscription.tsx
+++ b/apps/web/core/components/issues/issue-detail/subscription.tsx
@@ -74,7 +74,7 @@ export const IssueSubscription = observer(function IssueSubscription(props: TIss
 
   if (isNil(isSubscribed))
     return (
-      <Skeleton aria-label="Loading subscription">
+      <Skeleton aria-label={t("aria_labels.loading.subscription")}>
         <SkeletonItem blockSize="28px" inlineSize="106px" />
       </Skeleton>
     );
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 10e1825b6ba..6561686fc9d 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
@@ -10,6 +10,7 @@ import { observer } from "mobx-react";
 // plane ui
 import { Avatar } from "@makeplane/propel/components/avatar";
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 // components
 import { getFileURL } from "@plane/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -26,6 +27,7 @@ type Props = {
 };
 
 export const FilterAssignees = observer(function FilterAssignees(props: Props) {
+  const { t } = useTranslation();
   const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
   // states
   const [itemsToRender, setItemsToRender] = useState(5);
@@ -103,7 +105,7 @@ export const FilterAssignees = observer(function FilterAssignees(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Skeleton aria-label="Loading assignees">
+            <Skeleton aria-label={t("aria_labels.loading.assignees")}>
               <div className="space-y-2">
                 <SkeletonItem blockSize="20px" />
                 <SkeletonItem blockSize="20px" />
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 978462b4623..5c7b32d0c04 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
@@ -10,6 +10,7 @@ import { observer } from "mobx-react";
 // plane ui
 import { Avatar } from "@makeplane/propel/components/avatar";
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 // components
 import { getFileURL } from "@plane/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -26,6 +27,7 @@ type Props = {
 };
 
 export const FilterCreatedBy = observer(function FilterCreatedBy(props: Props) {
+  const { t } = useTranslation();
   const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
   // states
   const [itemsToRender, setItemsToRender] = useState(5);
@@ -103,7 +105,7 @@ export const FilterCreatedBy = observer(function FilterCreatedBy(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Skeleton aria-label="Loading created-by options">
+            <Skeleton aria-label={t("aria_labels.loading.created_by_options")}>
               <div className="space-y-2">
                 <SkeletonItem blockSize="20px" />
                 <SkeletonItem blockSize="20px" />
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 6e57a5f7867..0256fb3f7e8 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
@@ -9,6 +9,7 @@ import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 import { CycleGroupIcon } from "@plane/propel/icons";
 import type { TCycleGroups } from "@plane/types";
 // components
@@ -24,6 +25,7 @@ type Props = {
 };
 
 export const FilterCycle = observer(function FilterCycle(props: Props) {
+  const { t } = useTranslation();
   const { appliedFilters, handleUpdate, searchQuery } = props;
 
   // hooks
@@ -98,7 +100,7 @@ export const FilterCycle = observer(function FilterCycle(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Skeleton aria-label="Loading cycles">
+            <Skeleton aria-label={t("aria_labels.loading.cycles")}>
               <div className="space-y-2">
                 <SkeletonItem blockSize="20px" />
                 <SkeletonItem blockSize="20px" />
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 cbf932e87d6..e41747ded0f 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
@@ -8,6 +8,7 @@ import React, { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 import type { IIssueLabel } from "@plane/types";
 // components
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -27,6 +28,7 @@ type Props = {
 };
 
 export const FilterLabels = observer(function FilterLabels(props: Props) {
+  const { t } = useTranslation();
   const { appliedFilters, handleUpdate, labels, searchQuery } = props;
 
   const [itemsToRender, setItemsToRender] = useState(5);
@@ -88,7 +90,7 @@ export const FilterLabels = observer(function FilterLabels(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Skeleton aria-label="Loading labels">
+            <Skeleton aria-label={t("aria_labels.loading.labels")}>
               <div className="space-y-2">
                 <SkeletonItem blockSize="20px" />
                 <SkeletonItem blockSize="20px" />
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 cc1cd23e8fd..50635e9d4ad 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
@@ -10,6 +10,7 @@ import { observer } from "mobx-react";
 // plane ui
 import { Avatar } from "@makeplane/propel/components/avatar";
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 // components
 import { getFileURL } from "@plane/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -26,6 +27,7 @@ type Props = {
 };
 
 export const FilterMentions = observer(function FilterMentions(props: Props) {
+  const { t } = useTranslation();
   const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
   // states
   const [itemsToRender, setItemsToRender] = useState(5);
@@ -103,7 +105,7 @@ export const FilterMentions = observer(function FilterMentions(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Skeleton aria-label="Loading mentions">
+            <Skeleton aria-label={t("aria_labels.loading.mentions")}>
               <div className="space-y-2">
                 <SkeletonItem blockSize="20px" />
                 <SkeletonItem blockSize="20px" />
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 96ac6fe0be7..4775cf92545 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
@@ -11,6 +11,7 @@ import { useParams } from "next/navigation";
 // components
 import { ModuleOutline } from "@makeplane/propel/icons";
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
 import { useModule } from "@/hooks/store/use-module";
 // ui
@@ -22,6 +23,7 @@ type Props = {
 };
 
 export const FilterModule = observer(function FilterModule(props: Props) {
+  const { t } = useTranslation();
   const { appliedFilters, handleUpdate, searchQuery } = props;
   // hooks
   const { projectId } = useParams();
@@ -88,7 +90,7 @@ export const FilterModule = observer(function FilterModule(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Skeleton aria-label="Loading modules">
+            <Skeleton aria-label={t("aria_labels.loading.modules")}>
               <div className="space-y-2">
                 <SkeletonItem blockSize="20px" />
                 <SkeletonItem blockSize="20px" />
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 36a39c1770d..3435eb71446 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,6 +9,7 @@ import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 // ui
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 import { Logo } from "@plane/propel/emoji-icon-picker";
 // components
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -22,6 +23,7 @@ type Props = {
 };
 
 export const FilterProjects = observer(function FilterProjects(props: Props) {
+  const { t } = useTranslation();
   const { appliedFilters, handleUpdate, searchQuery } = props;
   // states
   const [itemsToRender, setItemsToRender] = useState(5);
@@ -89,7 +91,7 @@ export const FilterProjects = observer(function FilterProjects(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Skeleton aria-label="Loading projects">
+            <Skeleton aria-label={t("aria_labels.loading.projects")}>
               <div className="space-y-2">
                 <SkeletonItem blockSize="20px" />
                 <SkeletonItem blockSize="20px" />
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 b075d5bcad8..de99c306964 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
@@ -8,6 +8,7 @@ import React, { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 import { EIconSize } from "@plane/constants";
 import { StateGroupIcon } from "@plane/propel/icons";
 import type { IState } from "@plane/types";
@@ -24,6 +25,7 @@ type Props = {
 };
 
 export const FilterState = observer(function FilterState(props: Props) {
+  const { t } = useTranslation();
   const { appliedFilters, handleUpdate, searchQuery, states } = props;
 
   const [itemsToRender, setItemsToRender] = useState(5);
@@ -87,7 +89,7 @@ export const FilterState = observer(function FilterState(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Skeleton aria-label="Loading states">
+            <Skeleton aria-label={t("aria_labels.loading.states")}>
               <div className="space-y-2">
                 <SkeletonItem blockSize="20px" />
                 <SkeletonItem blockSize="20px" />
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 a30afaad1bb..fe34c899215 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
@@ -156,7 +156,7 @@ 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 ? (
-        <Skeleton aria-label="Loading description">
+        <Skeleton aria-label={t("aria_labels.loading.description")}>
           <div className="max-h-64 min-h-[120px] space-y-2 overflow-hidden rounded-md border border-subtle p-3 py-2 pt-3">
             <SkeletonItem blockSize="26px" />
             <div className="flex items-center gap-2">
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 c99271fa19e..e2367af6281 100644
--- a/apps/web/core/components/issues/parent-issues-list-modal.tsx
+++ b/apps/web/core/components/issues/parent-issues-list-modal.tsx
@@ -130,7 +130,7 @@ export function ParentIssuesListModal({
           )}
 
           {isSearching || isLoading ? (
-            <Skeleton aria-label="Loading work items">
+            <Skeleton aria-label={t("aria_labels.loading.work_items")}>
               <div className="space-y-3 p-3">
                 <SkeletonItem blockSize="40px" />
                 <SkeletonItem blockSize="40px" />
diff --git a/apps/web/core/components/issues/peek-overview/loader.tsx b/apps/web/core/components/issues/peek-overview/loader.tsx
index 5c434030da3..63046ccc4e9 100644
--- a/apps/web/core/components/issues/peek-overview/loader.tsx
+++ b/apps/web/core/components/issues/peek-overview/loader.tsx
@@ -7,6 +7,7 @@
 import { ArrowNarrowRightOutline } from "@makeplane/propel/icons";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 // hooks
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
@@ -15,12 +16,13 @@ type TIssuePeekOverviewLoader = {
 };
 
 export function IssuePeekOverviewLoader(props: TIssuePeekOverviewLoader) {
+  const { t } = useTranslation();
   const { removeRoutePeekId } = props;
   // hooks
   const { isMobile } = usePlatformOS();
 
   return (
-    <Skeleton aria-label="Loading work item">
+    <Skeleton aria-label={t("aria_labels.loading.work_item")}>
       <div 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">
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 f82abb12655..1713d48dea0 100644
--- a/apps/web/core/components/labels/project-setting-label-list.tsx
+++ b/apps/web/core/components/labels/project-setting-label-list.tsx
@@ -160,7 +160,7 @@ export const ProjectSettingsLabelList = observer(function ProjectSettingsLabelLi
           )
         ) : (
           !showLabelForm && (
-            <Skeleton aria-label="Loading labels">
+            <Skeleton aria-label={t("aria_labels.loading.labels")}>
               <div className="space-y-5">
                 <SkeletonItem blockSize="42px" />
                 <SkeletonItem blockSize="42px" />
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 880199438e7..3ddb0d30515 100644
--- a/apps/web/core/components/license/modal/card/checkout-button.tsx
+++ b/apps/web/core/components/license/modal/card/checkout-button.tsx
@@ -7,6 +7,7 @@
 import { observer } from "mobx-react";
 // plane imports
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import type { EProductSubscriptionEnum, IPaymentProduct, TSubscriptionPrice } from "@plane/types";
 // local imports
@@ -33,6 +34,7 @@ type Props = {
 };
 
 export const PlanCheckoutButton = observer(function PlanCheckoutButton(props: Props) {
+  const { t } = useTranslation();
   const {
     planeName,
     planVariant,
@@ -52,7 +54,7 @@ export const PlanCheckoutButton = observer(function PlanCheckoutButton(props: Pr
       <div className="pb-4 text-center">
         <div className="h-9 text-20 font-semibold">
           {isLoading ? (
-            <Skeleton aria-label="Loading checkout button">
+            <Skeleton aria-label={t("aria_labels.loading.checkout_button")}>
               <div className="flex flex-col items-center justify-center">
                 <SkeletonItem blockSize="36px" inlineSize="4rem" />
               </div>
@@ -70,7 +72,7 @@ export const PlanCheckoutButton = observer(function PlanCheckoutButton(props: Pr
         <div className="text-caption-md-medium text-tertiary">per user per month</div>
       </div>
       {isLoading ? (
-        <Skeleton aria-label="Loading checkout button">
+        <Skeleton aria-label={t("aria_labels.loading.checkout_button")}>
           <div className="flex flex-col items-center justify-center">
             <SkeletonItem blockSize="38px" inlineSize="14rem" />
           </div>
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 33e0d51d876..9f939cd72e3 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
@@ -8,6 +8,7 @@ import { observer } from "mobx-react";
 // types
 // plane imports
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 import { getButtonStyling } from "@plane/propel/button";
 import type { EProductSubscriptionEnum, IPaymentProduct, TSubscriptionPrice } from "@plane/types";
 import { cn } from "@plane/utils";
@@ -30,6 +31,7 @@ export type TalkToSalesCardProps = {
 };
 
 export const TalkToSalesCard = observer(function TalkToSalesCard(props: TalkToSalesCardProps) {
+  const { t } = useTranslation();
   const {
     planVariant,
     href,
@@ -57,7 +59,7 @@ 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 ? (
-            <Skeleton aria-label="Loading price">
+            <Skeleton aria-label={t("aria_labels.loading.price")}>
               <div className="flex flex-col items-center justify-center">
                 <SkeletonItem blockSize="36px" inlineSize="4rem" />
               </div>
@@ -69,7 +71,7 @@ export const TalkToSalesCard = observer(function TalkToSalesCard(props: TalkToSa
         <div className="text-caption-md-medium text-tertiary">per user per month</div>
       </div>
       {isLoading ? (
-        <Skeleton aria-label="Loading price">
+        <Skeleton aria-label={t("aria_labels.loading.price")}>
           <div className="flex flex-col items-center justify-center">
             <SkeletonItem blockSize="38px" inlineSize="14rem" />
           </div>
diff --git a/apps/web/core/components/modules/analytics-sidebar/root.tsx b/apps/web/core/components/modules/analytics-sidebar/root.tsx
index d60f20b4ad1..0b25f83b539 100644
--- a/apps/web/core/components/modules/analytics-sidebar/root.tsx
+++ b/apps/web/core/components/modules/analytics-sidebar/root.tsx
@@ -140,7 +140,7 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
 
   if (!moduleDetails)
     return (
-      <Skeleton aria-label="Loading module sidebar details">
+      <Skeleton aria-label={t("aria_labels.loading.module_sidebar_details")}>
         <div className="space-y-2">
           <SkeletonItem blockSize="15px" inlineSize="50%" />
           <SkeletonItem blockSize="15px" inlineSize="30%" />
diff --git a/apps/web/core/components/modules/dropdowns/filters/lead.tsx b/apps/web/core/components/modules/dropdowns/filters/lead.tsx
index 32bec15c69a..4aea4d696a1 100644
--- a/apps/web/core/components/modules/dropdowns/filters/lead.tsx
+++ b/apps/web/core/components/modules/dropdowns/filters/lead.tsx
@@ -10,6 +10,7 @@ import { observer } from "mobx-react";
 // plane ui
 import { Avatar } from "@makeplane/propel/components/avatar";
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 // components
 import { getFileURL } from "@plane/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -26,6 +27,7 @@ type Props = {
 };
 
 export const FilterLead = observer(function FilterLead(props: Props) {
+  const { t } = useTranslation();
   const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
   // states
   const [itemsToRender, setItemsToRender] = useState(5);
@@ -103,7 +105,7 @@ export const FilterLead = observer(function FilterLead(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Skeleton aria-label="Loading lead options">
+            <Skeleton aria-label={t("aria_labels.loading.lead_options")}>
               <div className="space-y-2">
                 <SkeletonItem blockSize="20px" />
                 <SkeletonItem blockSize="20px" />
diff --git a/apps/web/core/components/modules/dropdowns/filters/members.tsx b/apps/web/core/components/modules/dropdowns/filters/members.tsx
index c43502f4306..20c9d4bfb70 100644
--- a/apps/web/core/components/modules/dropdowns/filters/members.tsx
+++ b/apps/web/core/components/modules/dropdowns/filters/members.tsx
@@ -10,6 +10,7 @@ import { observer } from "mobx-react";
 // plane ui
 import { Avatar } from "@makeplane/propel/components/avatar";
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 // components
 import { getFileURL } from "@plane/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -26,6 +27,7 @@ type Props = {
 };
 
 export const FilterMembers = observer(function FilterMembers(props: Props) {
+  const { t } = useTranslation();
   const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
   // states
   const [itemsToRender, setItemsToRender] = useState(5);
@@ -103,7 +105,7 @@ export const FilterMembers = observer(function FilterMembers(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Skeleton aria-label="Loading members">
+            <Skeleton aria-label={t("aria_labels.loading.members")}>
               <div className="space-y-2">
                 <SkeletonItem blockSize="20px" />
                 <SkeletonItem blockSize="20px" />
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 a814efb23e1..04abf6db6ff 100644
--- a/apps/web/core/components/pages/loaders/page-content-loader.tsx
+++ b/apps/web/core/components/pages/loaders/page-content-loader.tsx
@@ -6,6 +6,7 @@
 
 // plane imports
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 import { cn } from "@plane/utils";
 
 type Props = {
@@ -13,11 +14,12 @@ type Props = {
 };
 
 export function PageContentLoader(props: Props) {
+  const { t } = useTranslation();
   const { className } = props;
 
   return (
     <div className={cn("relative flex size-full flex-col", className)}>
-      <Skeleton aria-label="Loading page content">
+      <Skeleton aria-label={t("aria_labels.loading.page_content")}>
         {/* header */}
         <div className="relative flex h-12 w-full flex-shrink-0 items-center divide-x divide-subtle border-b border-subtle">
           <div className="relative flex items-center gap-1 pr-2">
diff --git a/apps/web/core/components/pages/loaders/page-loader.tsx b/apps/web/core/components/pages/loaders/page-loader.tsx
index aec3e94db0f..e5e70c0d623 100644
--- a/apps/web/core/components/pages/loaders/page-loader.tsx
+++ b/apps/web/core/components/pages/loaders/page-loader.tsx
@@ -5,11 +5,13 @@
  */
 
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 import { range } from "lodash-es";
 
 export function PageLoader() {
+  const { t } = useTranslation();
   return (
-    <Skeleton aria-label="Loading page">
+    <Skeleton aria-label={t("aria_labels.loading.page")}>
       <div className="relative flex h-full w-full flex-col">
         <div className="border-b border-subtle px-3 py-3">
           <div className="relative flex items-center gap-2">
diff --git a/apps/web/core/components/pages/version/editor.tsx b/apps/web/core/components/pages/version/editor.tsx
index b9f527eea83..08f56ed638a 100644
--- a/apps/web/core/components/pages/version/editor.tsx
+++ b/apps/web/core/components/pages/version/editor.tsx
@@ -8,6 +8,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 import type { TDisplayConfig } from "@plane/editor";
 import type { JSONContent, TPageVersion } from "@plane/types";
 import { isJSONContentEmpty } from "@plane/utils";
@@ -26,6 +27,7 @@ export type TVersionEditorProps = {
 };
 
 export const PagesVersionEditor = observer(function PagesVersionEditor(props: TVersionEditorProps) {
+  const { t } = useTranslation();
   const { activeVersion, versionDetails } = props;
   // params
   const { workspaceSlug, projectId } = useParams();
@@ -45,7 +47,7 @@ export const PagesVersionEditor = observer(function PagesVersionEditor(props: TV
   if (!versionDetails)
     return (
       <div className="size-full px-5">
-        <Skeleton aria-label="Loading page version">
+        <Skeleton aria-label={t("aria_labels.loading.page_version")}>
           <div className="relative space-y-4">
             <SkeletonItem blockSize="36px" inlineSize="50%" />
             <div className="space-y-2">
diff --git a/apps/web/core/components/profile/overview/activity.tsx b/apps/web/core/components/profile/overview/activity.tsx
index 7f6752b59e2..5781b0bba4a 100644
--- a/apps/web/core/components/profile/overview/activity.tsx
+++ b/apps/web/core/components/profile/overview/activity.tsx
@@ -47,7 +47,7 @@ export const ProfileActivity = observer(function ProfileActivity() {
       <h3 className="text-16 font-medium">{t("profile.stats.recent_activity.title")}</h3>
       <Card>
         {!userProfileActivity ? (
-          <Skeleton aria-label="Loading recent activity">
+          <Skeleton aria-label={t("aria_labels.loading.recent_activity")}>
             <div className="space-y-5">
               <SkeletonItem blockSize="40px" />
               <SkeletonItem blockSize="40px" />
diff --git a/apps/web/core/components/profile/overview/priority-distribution.tsx b/apps/web/core/components/profile/overview/priority-distribution.tsx
index 2944a041481..552a25ae489 100644
--- a/apps/web/core/components/profile/overview/priority-distribution.tsx
+++ b/apps/web/core/components/profile/overview/priority-distribution.tsx
@@ -73,7 +73,7 @@ export function ProfilePriorityDistribution({ userProfile }: Props) {
         </Card>
       ) : (
         <div className="grid place-items-center p-7">
-          <Skeleton aria-label="Loading priority distribution">
+          <Skeleton aria-label={t("aria_labels.loading.priority_distribution")}>
             <div className="flex items-end gap-12">
               <SkeletonItem blockSize="200px" inlineSize="30px" />
               <SkeletonItem blockSize="150px" inlineSize="30px" />
diff --git a/apps/web/core/components/profile/overview/stats.tsx b/apps/web/core/components/profile/overview/stats.tsx
index 0a30e80d1d6..5edcbde517a 100644
--- a/apps/web/core/components/profile/overview/stats.tsx
+++ b/apps/web/core/components/profile/overview/stats.tsx
@@ -66,7 +66,7 @@ export function ProfileStats({ userProfile }: Props) {
           ))}
         </div>
       ) : (
-        <Skeleton aria-label="Loading profile stats">
+        <Skeleton aria-label={t("aria_labels.loading.profile_stats")}>
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
             <SkeletonItem blockSize="80px" />
             <SkeletonItem blockSize="80px" />
diff --git a/apps/web/core/components/profile/sidebar.tsx b/apps/web/core/components/profile/sidebar.tsx
index 520b1721a1f..65b4d946fa4 100644
--- a/apps/web/core/components/profile/sidebar.tsx
+++ b/apps/web/core/components/profile/sidebar.tsx
@@ -280,7 +280,7 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
           </div>
         </>
       ) : (
-        <Skeleton aria-label="Loading sidebar">
+        <Skeleton aria-label={t("aria_labels.loading.sidebar")}>
           <div className="space-y-7 px-5">
             <SkeletonItem blockSize="130px" />
             <div className="space-y-5">
diff --git a/apps/web/core/components/project-states/loader.tsx b/apps/web/core/components/project-states/loader.tsx
index c67d317bc1d..5f3c845481d 100644
--- a/apps/web/core/components/project-states/loader.tsx
+++ b/apps/web/core/components/project-states/loader.tsx
@@ -5,9 +5,11 @@
  */
 
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 export function ProjectStateLoader() {
+  const { t } = useTranslation();
   return (
-    <Skeleton aria-label="Loading project states">
+    <Skeleton aria-label={t("aria_labels.loading.project_states")}>
       <div className="space-y-5 md:w-2/3">
         <SkeletonItem blockSize="40px" />
         <SkeletonItem blockSize="40px" />
diff --git a/apps/web/core/components/project/dropdowns/filters/lead.tsx b/apps/web/core/components/project/dropdowns/filters/lead.tsx
index 32bec15c69a..4aea4d696a1 100644
--- a/apps/web/core/components/project/dropdowns/filters/lead.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/lead.tsx
@@ -10,6 +10,7 @@ import { observer } from "mobx-react";
 // plane ui
 import { Avatar } from "@makeplane/propel/components/avatar";
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 // components
 import { getFileURL } from "@plane/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -26,6 +27,7 @@ type Props = {
 };
 
 export const FilterLead = observer(function FilterLead(props: Props) {
+  const { t } = useTranslation();
   const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
   // states
   const [itemsToRender, setItemsToRender] = useState(5);
@@ -103,7 +105,7 @@ export const FilterLead = observer(function FilterLead(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Skeleton aria-label="Loading lead options">
+            <Skeleton aria-label={t("aria_labels.loading.lead_options")}>
               <div className="space-y-2">
                 <SkeletonItem blockSize="20px" />
                 <SkeletonItem blockSize="20px" />
diff --git a/apps/web/core/components/project/dropdowns/filters/members.tsx b/apps/web/core/components/project/dropdowns/filters/members.tsx
index c43502f4306..20c9d4bfb70 100644
--- a/apps/web/core/components/project/dropdowns/filters/members.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/members.tsx
@@ -10,6 +10,7 @@ import { observer } from "mobx-react";
 // plane ui
 import { Avatar } from "@makeplane/propel/components/avatar";
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 // components
 import { getFileURL } from "@plane/utils";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -26,6 +27,7 @@ type Props = {
 };
 
 export const FilterMembers = observer(function FilterMembers(props: Props) {
+  const { t } = useTranslation();
   const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
   // states
   const [itemsToRender, setItemsToRender] = useState(5);
@@ -103,7 +105,7 @@ export const FilterMembers = observer(function FilterMembers(props: Props) {
               <p className="text-11 text-placeholder italic">No matches found</p>
             )
           ) : (
-            <Skeleton aria-label="Loading members">
+            <Skeleton aria-label={t("aria_labels.loading.members")}>
               <div className="space-y-2">
                 <SkeletonItem blockSize="20px" />
                 <SkeletonItem blockSize="20px" />
diff --git a/apps/web/core/components/project/form-loader.tsx b/apps/web/core/components/project/form-loader.tsx
index 450835e7d98..1cbb7e2cade 100644
--- a/apps/web/core/components/project/form-loader.tsx
+++ b/apps/web/core/components/project/form-loader.tsx
@@ -5,12 +5,14 @@
  */
 
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 
 export function ProjectDetailsFormLoader() {
+  const { t } = useTranslation();
   return (
     <>
       <div className="relative mt-6 h-44 w-full">
-        <Skeleton aria-label="Loading project form">
+        <Skeleton aria-label={t("aria_labels.loading.project_form")}>
           <div className="h-full w-full">
             <SkeletonItem blockSize="100%" inlineSize="100%" />
           </div>
@@ -18,13 +20,13 @@ export function ProjectDetailsFormLoader() {
         <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">
-              <Skeleton aria-label="Loading project form">
+              <Skeleton aria-label={t("aria_labels.loading.project_form")}>
                 <SkeletonItem blockSize="46px" inlineSize="46px" />
               </Skeleton>
             </div>
           </div>
           <div className="flex flex-shrink-0 justify-center">
-            <Skeleton aria-label="Loading project form">
+            <Skeleton aria-label={t("aria_labels.loading.project_form")}>
               <SkeletonItem blockSize="32px" inlineSize="108px" />
             </Skeleton>
           </div>
@@ -33,13 +35,13 @@ export function ProjectDetailsFormLoader() {
       <div className="my-8 flex flex-col gap-8">
         <div className="flex flex-col gap-1">
           <h4 className="text-13">Project name</h4>
-          <Skeleton aria-label="Loading project form">
+          <Skeleton aria-label={t("aria_labels.loading.project_form")}>
             <SkeletonItem blockSize="46px" />
           </Skeleton>
         </div>
         <div className="flex flex-col gap-1">
           <h4 className="text-13">Description</h4>
-          <Skeleton aria-label="Loading project form">
+          <Skeleton aria-label={t("aria_labels.loading.project_form")}>
             <div className="w-full">
               <SkeletonItem blockSize="102px" inlineSize="100%" />
             </div>
@@ -48,13 +50,13 @@ export function ProjectDetailsFormLoader() {
         <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>
-            <Skeleton aria-label="Loading project form">
+            <Skeleton aria-label={t("aria_labels.loading.project_form")}>
               <SkeletonItem blockSize="36px" />
             </Skeleton>
           </div>
           <div className="flex w-1/2 flex-col gap-1">
             <h4 className="text-13">Network</h4>
-            <Skeleton aria-label="Loading project form">
+            <Skeleton aria-label={t("aria_labels.loading.project_form")}>
               <div className="w-full">
                 <SkeletonItem blockSize="46px" />
               </div>
@@ -62,7 +64,7 @@ export function ProjectDetailsFormLoader() {
           </div>
         </div>
         <div className="flex items-center justify-between py-2">
-          <Skeleton aria-label="Loading project form">
+          <Skeleton aria-label={t("aria_labels.loading.project_form")}>
             <div className="mt-2 w-full">
               <SkeletonItem blockSize="34px" inlineSize="100px" />
             </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 adab3550cf0..bd71e4c7fb6 100644
--- a/apps/web/core/components/project/project-settings-member-defaults.tsx
+++ b/apps/web/core/components/project/project-settings-member-defaults.tsx
@@ -156,7 +156,7 @@ export const ProjectSettingsMemberDefaults = observer(function ProjectSettingsMe
             )}
           />
         ) : (
-          <Skeleton aria-label="Loading member defaults">
+          <Skeleton aria-label={t("aria_labels.loading.member_defaults")}>
             <div className="h-9 w-full">
               <SkeletonItem blockSize="100%" />
             </div>
@@ -179,7 +179,7 @@ export const ProjectSettingsMemberDefaults = observer(function ProjectSettingsMe
             )}
           />
         ) : (
-          <Skeleton aria-label="Loading member defaults">
+          <Skeleton aria-label={t("aria_labels.loading.member_defaults")}>
             <div className="h-9 w-full">
               <SkeletonItem blockSize="100%" />
             </div>
diff --git a/apps/web/core/components/project/publish-project/modal.tsx b/apps/web/core/components/project/publish-project/modal.tsx
index cc91c71a481..79fc31219ee 100644
--- a/apps/web/core/components/project/publish-project/modal.tsx
+++ b/apps/web/core/components/project/publish-project/modal.tsx
@@ -18,6 +18,7 @@ import type { TProjectPublishLayouts, TProjectPublishSettings } from "@plane/typ
 // ui
 import { Switch } from "@makeplane/propel/components/switch";
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 import { CustomSelect, ModalCore, EModalWidth } from "@plane/ui";
 // helpers
 import { copyTextToClipboard } from "@plane/utils";
@@ -50,6 +51,7 @@ const VIEW_OPTIONS: {
 ];
 
 export const PublishProjectModal = observer(function PublishProjectModal(props: Props) {
+  const { t } = useTranslation();
   const { isOpen, onClose, projectId } = props;
   // states
   const [isUnPublishing, setIsUnPublishing] = useState(false);
@@ -197,7 +199,7 @@ export const PublishProjectModal = observer(function PublishProjectModal(props:
 
         {/* content */}
         {fetchSettingsLoader ? (
-          <Skeleton aria-label="Loading publish settings">
+          <Skeleton aria-label={t("aria_labels.loading.publish_settings")}>
             <div className="space-y-4 px-5">
               <SkeletonItem blockSize="30px" />
               <SkeletonItem blockSize="30px" />
diff --git a/apps/web/core/components/readonly/state.tsx b/apps/web/core/components/readonly/state.tsx
index 6ff3189aeba..f72b4eb0cec 100644
--- a/apps/web/core/components/readonly/state.tsx
+++ b/apps/web/core/components/readonly/state.tsx
@@ -52,7 +52,7 @@ export const ReadonlyState = observer(function ReadonlyState(props: TReadonlySta
 
   if (stateLoader) {
     return (
-      <Skeleton aria-label="Loading states">
+      <Skeleton aria-label={t("aria_labels.loading.states")}>
         <div className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
           <SkeletonItem variant="circle" blockSize="16px" inlineSize="16px" />
           <SkeletonItem blockSize="16px" inlineSize="50px" />
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 f627cab6352..3aaeeda95fb 100644
--- a/apps/web/core/components/rich-filters/filter-item/loader.tsx
+++ b/apps/web/core/components/rich-filters/filter-item/loader.tsx
@@ -5,9 +5,11 @@
  */
 
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 export function FilterItemLoader() {
+  const { t } = useTranslation();
   return (
-    <Skeleton aria-label="Loading filter">
+    <Skeleton aria-label={t("aria_labels.loading.filter")}>
       <SkeletonItem blockSize="28px" inlineSize="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 1d962b8b8f6..16ecda52e9a 100644
--- a/apps/web/core/components/rich-filters/filters-row.tsx
+++ b/apps/web/core/components/rich-filters/filters-row.tsx
@@ -8,6 +8,7 @@ import React, { useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import { AddFilterOutline } from "@makeplane/propel/icons";
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 import { Transition } from "@headlessui/react";
 // plane imports
 import { Button } from "@plane/propel/button";
@@ -29,6 +30,7 @@ export type TFiltersRowProps<K extends TFilterProperty, E extends TExternalFilte
 export const FiltersRow = observer(function FiltersRow<K extends TFilterProperty, E extends TExternalFilter>(
   props: TFiltersRowProps<K, E>
 ) {
+  const { t } = useTranslation();
   const { buttonConfig, disabledAllOperations: disabledAllOperationsProp = false, filter, variant = "header" } = props;
   // states
   const [isUpdating, setIsUpdating] = useState(false);
@@ -129,7 +131,7 @@ export const FiltersRow = observer(function FiltersRow<K extends TFilterProperty
   if (!filter.configManager.areConfigsReady && !hasAnyConditions) {
     return (
       <RowTransition show={filter.isVisible}>
-        <Skeleton aria-label="Loading filters">
+        <Skeleton aria-label={t("aria_labels.loading.filters")}>
           <div className={cn("overflow-hidden", { "rounded-none": variant === "header" })}>
             <SkeletonItem blockSize="44px" />
           </div>
diff --git a/apps/web/core/components/stickies/layout/stickies-infinite.tsx b/apps/web/core/components/stickies/layout/stickies-infinite.tsx
index 0069beb9b55..62b8f379bbc 100644
--- a/apps/web/core/components/stickies/layout/stickies-infinite.tsx
+++ b/apps/web/core/components/stickies/layout/stickies-infinite.tsx
@@ -9,6 +9,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 import { STICKIES_PER_PAGE } from "@plane/constants";
 import { ContentWrapper } from "@plane/ui";
 import { cn } from "@plane/utils";
@@ -17,6 +18,7 @@ import { useSticky } from "@/hooks/use-stickies";
 import { StickiesLayout } from "./stickies-list";
 
 export const StickiesInfinite = observer(function StickiesInfinite() {
+  const { t } = useTranslation();
   const { workspaceSlug } = useParams();
   // hooks
   const { fetchWorkspaceStickies, fetchNextWorkspaceStickies, getWorkspaceStickyIds, loader, paginationInfo } =
@@ -56,7 +58,7 @@ export const StickiesInfinite = observer(function StickiesInfinite() {
               id="intersection-element"
             >
               <div className="min-h-75 w-full rounded-sm">
-                <Skeleton aria-label="Loading more stickies">
+                <Skeleton aria-label={t("aria_labels.loading.more_stickies")}>
                   <div className="h-75 w-full">
                     <SkeletonItem blockSize="100%" inlineSize="100%" />
                   </div>
diff --git a/apps/web/core/components/stickies/layout/stickies-loader.tsx b/apps/web/core/components/stickies/layout/stickies-loader.tsx
index 85b3512bfba..8c0225b46cd 100644
--- a/apps/web/core/components/stickies/layout/stickies-loader.tsx
+++ b/apps/web/core/components/stickies/layout/stickies-loader.tsx
@@ -5,13 +5,15 @@
  */
 
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 // plane ui
 
 export function StickiesLoader() {
+  const { t } = useTranslation();
   return (
     <div className="grid grid-cols-4 gap-4 overflow-scroll pb-2">
       {Array.from({ length: 4 }).map((_, index) => (
-        <Skeleton aria-label="Loading sticky" key={index}>
+        <Skeleton aria-label={t("aria_labels.loading.sticky")} key={index}>
           <div className="space-y-5 rounded-sm border border-subtle p-3">
             <div className="space-y-2">
               <SkeletonItem blockSize="20px" />
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 4761adb0491..17ae3146384 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
@@ -5,18 +5,20 @@
  */
 
 import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
+import { useTranslation } from "@plane/i18n";
 import React from "react";
 // ui
 import { InboxSidebarLoader } from "./inbox-sidebar-loader";
 
 export function InboxLayoutLoader() {
+  const { t } = useTranslation();
   return (
     <div className="relative flex h-full w-full overflow-hidden">
       <div className="h-full w-2/6 flex-shrink-0 border-r border-strong">
         <InboxSidebarLoader />
       </div>
       <div className="w-4/6">
-        <Skeleton aria-label="Loading inbox">
+        <Skeleton aria-label={t("aria_labels.loading.intake")}>
           <div className="flex h-full flex-col gap-5 p-5">
             <div className="space-y-2">
               <SkeletonItem blockSize="30px" inlineSize="40%" />
diff --git a/apps/web/core/components/workspace/sidebar/projects-list.tsx b/apps/web/core/components/workspace/sidebar/projects-list.tsx
index 41d5d479cc5..87d8faa05ed 100644
--- a/apps/web/core/components/workspace/sidebar/projects-list.tsx
+++ b/apps/web/core/components/workspace/sidebar/projects-list.tsx
@@ -227,7 +227,7 @@ export const SidebarProjectsList = observer(function SidebarProjectsList() {
               leaveTo="transform scale-95 opacity-0"
             >
               {loader === "init-loader" && (
-                <Skeleton aria-label="Loading projects">
+                <Skeleton aria-label={t("aria_labels.loading.projects")}>
                   <div className="w-full space-y-1.5">
                     {Array.from({ length: 4 }).map((_, index) => (
                       <SkeletonItem key={index} blockSize="28px" />
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 9e314edd822..6f3fa222205 100644
--- a/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
+++ b/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
@@ -178,7 +178,7 @@ export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: Work
                       </div>
                     ) : (
                       <div className="w-full">
-                        <Skeleton aria-label="Loading workspaces">
+                        <Skeleton aria-label={t("aria_labels.loading.workspaces")}>
                           <div className="space-y-2">
                             <SkeletonItem blockSize="30px" />
                             <SkeletonItem blockSize="30px" />