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..b4c5efdf657 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,24 @@ export const IssueDetailsPage = observer(function IssueDetailsPage({ params }: R if (issueLoader) { return ( - -
- - - - -
-
- - - - -
- +
+ +
+
+ + + + +
+
+ + + + +
+
+ +
); } 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..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 @@ -11,7 +11,8 @@ 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"; +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(); @@ -51,20 +53,24 @@ function ArchivedIssueDetailsPage({ params }: Route.ComponentProps) { <> {issueLoader ? ( - -
- - - - -
-
- - - - -
- +
+ +
+
+ + + + +
+
+ + + + +
+
+ +
) : ( <> {count} ) : ( - + + + )} ); diff --git a/apps/web/core/components/analytics/insight-table/loader.tsx b/apps/web/core/components/analytics/insight-table/loader.tsx index e07da237466..7dcd3170639 100644 --- a/apps/web/core/components/analytics/insight-table/loader.tsx +++ b/apps/web/core/components/analytics/insight-table/loader.tsx @@ -6,8 +6,9 @@ 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"; -import { Loader } from "@plane/ui"; interface TableSkeletonProps { columns: ColumnDef[]; @@ -15,28 +16,31 @@ interface TableSkeletonProps { } export function TableLoader({ columns, rows }: TableSkeletonProps) { + const { t } = useTranslation(); return ( - - - - {columns.map((column, index) => ( - - {typeof column.header === "string" ? column.header : ""} - - ))} - - - - {Array.from({ length: rows }).map((_, rowIndex) => ( - - {columns.map((_, colIndex) => ( - - - + +
+ + + {columns.map((column, index) => ( + + {typeof column.header === "string" ? column.header : ""} + ))} - ))} - -
+ + + {Array.from({ length: rows }).map((_, rowIndex) => ( + + {columns.map((_, colIndex) => ( + + + + ))} + + ))} + + + ); } diff --git a/apps/web/core/components/analytics/loaders.tsx b/apps/web/core/components/analytics/loaders.tsx index c298dd00158..dbcb06b62f2 100644 --- a/apps/web/core/components/analytics/loaders.tsx +++ b/apps/web/core/components/analytics/loaders.tsx @@ -4,30 +4,43 @@ * See the LICENSE file for details. */ -import { Loader } from "@plane/ui"; +import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton"; +import { useTranslation } from "@plane/i18n"; export function ProjectInsightsLoader() { + const { t } = useTranslation(); return (
- - - +
+ +
+ +
+ +
- - - - - - + +
+ +
+ + +
+ +
+
); } export function ChartLoader() { + const { t } = useTranslation(); return ( - - - + +
+ +
+ ); } diff --git a/apps/web/core/components/analytics/overview/active-projects.tsx b/apps/web/core/components/analytics/overview/active-projects.tsx index 1ad22dc5423..0d1cfc9ffbb 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" >
- {isProjectAnalyticsCountLoading && - Array.from({ length: 5 }).map((_, index) => )} + {isProjectAnalyticsCountLoading && ( + +
+ {Array.from({ length: 5 }).map((_, index) => ( + + ))} +
+ + )} {!isProjectAnalyticsCountLoading && projectAnalyticsCount?.map((project) => )}
diff --git a/apps/web/core/components/automation/auto-archive-automation.tsx b/apps/web/core/components/automation/auto-archive-automation.tsx index cb0ee841bf7..5e9103956db 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 ) ) : ( - - - + +
+ +
+ )} diff --git a/apps/web/core/components/automation/auto-close-automation.tsx b/apps/web/core/components/automation/auto-close-automation.tsx index bf8c5301b3d..fc4925edcb6 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: ) ) : ( - - - + +
+ +
+ )} diff --git a/apps/web/core/components/base-layouts/gantt/sidebar.tsx b/apps/web/core/components/base-layouts/gantt/sidebar.tsx index 85f1e5b70cb..86060a6054d 100644 --- a/apps/web/core/components/base-layouts/gantt/sidebar.tsx +++ b/apps/web/core/components/base-layouts/gantt/sidebar.tsx @@ -7,8 +7,10 @@ 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 { 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"; @@ -31,6 +33,7 @@ type Props = { }; export const BaseGanttSidebar = observer(function BaseGanttSidebar(props: Props) { + const { t } = useTranslation(); const { blockUpdateHandler, blockIds, @@ -143,12 +146,14 @@ export const BaseGanttSidebar = observer(function BaseGanttSidebar ) : ( - - - - - - + +
+ + + + +
+ )} ); diff --git a/apps/web/core/components/common/filters/created-by.tsx b/apps/web/core/components/common/filters/created-by.tsx index f70cef7ae5c..5d99bfd78e7 100644 --- a/apps/web/core/components/common/filters/created-by.tsx +++ b/apps/web/core/components/common/filters/created-by.tsx @@ -9,7 +9,8 @@ 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"; +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,11 +105,13 @@ export const FilterCreatedBy = observer(function FilterCreatedBy(props: Props) {

No matches found

) ) : ( - - - - - + +
+ + + +
+ )} )} diff --git a/apps/web/core/components/core/description-versions/modal.tsx b/apps/web/core/components/core/description-versions/modal.tsx index 6ded29e8200..df656ed7a59 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} /> ) : ( -
- - -
- - + +
+ + +
+ + +
+
+ + +
+ +
-
- - -
- - -
+ )}
{/* 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..be9c4aad46a 100644 --- a/apps/web/core/components/core/image-picker-popover.tsx +++ b/apps/web/core/components/core/image-picker-popover.tsx @@ -14,13 +14,14 @@ 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 { 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"; 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 @@ -53,6 +54,7 @@ type Props = { const fileService = new FileService(); function ImagePickerPopoverComponent(props: Props) { + const { t } = useTranslation(); const { label, value, control, onChange, disabled = false, tabIndex, isProfileCover = false, projectId } = props; // states const [image, setImage] = useState(null); @@ -272,16 +274,18 @@ function ImagePickerPopoverComponentNo images found.

) ) : ( - - - - - - - - - - + +
+ + + + + + + + +
+ )} )} 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..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 @@ -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 {isSearching ? ( - - - - - - + +
+ + + + +
+ ) : ( <>{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..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 @@ -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 ? ( - - - - - - + +
+ + + + +
+ ) : ( <> {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..d91216de523 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 = ( - - - - - + +
+ + + +
+ ); return cycleId ? ( @@ -370,8 +372,10 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active ) : ( - - - + +
+ +
+ ); }); diff --git a/apps/web/core/components/cycles/active-cycle/productivity.tsx b/apps/web/core/components/cycles/active-cycle/productivity.tsx index c3ebdfcbe8f..0e901a82b76 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 ) : ( - - - + +
+ +
+ ); }); diff --git a/apps/web/core/components/cycles/active-cycle/progress.tsx b/apps/web/core/components/cycles/active-cycle/progress.tsx index d5d402c4ac2..63a558c22e7 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: )} ) : ( - - - + +
+ +
+ ); }); diff --git a/apps/web/core/components/cycles/analytics-sidebar/root.tsx b/apps/web/core/components/cycles/analytics-sidebar/root.tsx index 7c84e4daeac..c2f8b881233 100644 --- a/apps/web/core/components/cycles/analytics-sidebar/root.tsx +++ b/apps/web/core/components/cycles/analytics-sidebar/root.tsx @@ -4,10 +4,11 @@ * See the LICENSE file for details. */ +import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton"; +import { useTranslation } from "@plane/i18n"; 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"; @@ -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,17 +36,19 @@ export const CycleDetailsSidebar = observer(function CycleDetailsSidebar(props: if (!cycleDetails) return ( - -
- - + +
+
+ + +
+
+ + + +
-
- - - -
- + ); 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..e0ca95b9d95 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 /> ) : ( - - - + +
+ +
+ )}
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..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 @@ -5,7 +5,8 @@ */ // plane imports -import { Loader } from "@plane/ui"; +import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton"; +import { useTranslation } from "@plane/i18n"; import { cn } from "@plane/utils"; type Props = { @@ -13,27 +14,30 @@ type Props = { }; export function DescriptionInputLoader(props: Props) { + const { t } = useTranslation(); const { className } = props; return ( - - -
- - + +
+ +
+ + +
+
+ + +
+ +
+ +
+
+ + +
-
- - -
- -
- -
-
- - -
- + ); } diff --git a/apps/web/core/components/estimates/loader-screen.tsx b/apps/web/core/components/estimates/loader-screen.tsx index d858df1d971..e5c678ce537 100644 --- a/apps/web/core/components/estimates/loader-screen.tsx +++ b/apps/web/core/components/estimates/loader-screen.tsx @@ -4,15 +4,18 @@ * See the LICENSE file for details. */ -import { Loader } from "@plane/ui"; - +import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton"; +import { useTranslation } from "@plane/i18n"; export function EstimateLoaderScreen() { + const { t } = useTranslation(); return ( - - - - - - + +
+ + + + +
+ ); } 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..6d8a10bda6e 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,10 @@ import type { RefObject } from "react"; 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"; -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"; @@ -38,6 +39,7 @@ type Props = { }; export const IssueGanttSidebar = observer(function IssueGanttSidebar(props: Props) { + const { t } = useTranslation(); const { blockUpdateHandler, blockIds, @@ -122,12 +124,14 @@ export const IssueGanttSidebar = observer(function IssueGanttSidebar(props: Prop )} ) : ( - - - - - - + +
+ + + + +
+ )}
); 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..15aace75538 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,10 @@ 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"; -import { Loader } from "@plane/ui"; // components // hooks import { useTimeLineChart } from "@/hooks/use-timeline-chart"; @@ -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,12 +54,14 @@ export const ModuleGanttSidebar = observer(function ModuleGanttSidebar(props: Pr )) ) : ( - - - - - - + +
+ + + + +
+ )} ); diff --git a/apps/web/core/components/global/product-updates/changelog.tsx b/apps/web/core/components/global/product-updates/changelog.tsx index cfddb2af4f2..01d1753fe12 100644 --- a/apps/web/core/components/global/product-updates/changelog.tsx +++ b/apps/web/core/components/global/product-updates/changelog.tsx @@ -4,14 +4,16 @@ * See the LICENSE file for details. */ +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 -import { Loader } from "@plane/ui"; import { ProductUpdatesFallback } from "@/components/global/product-updates/fallback"; import { useInstance } from "@/hooks/store/use-instance"; export const ProductUpdatesChangelog = observer(function ProductUpdatesChangelog() { + const { t } = useTranslation(); // refs const isLoadingRef = useRef(true); // states @@ -74,9 +76,11 @@ export const ProductUpdatesChangelog = observer(function ProductUpdatesChangelog return (
{isLoading && ( - - - + +
+ +
+ )} {/* eslint-disable-next-line react/iframe-missing-sandbox oxlint-disable-next-line jsx_a11y/iframe-has-title */}