Skip to content

refactor: migrate web Loader to @makeplane/propel Skeleton #9766

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
codingwolf-at wants to merge 4 commits into
base: preview
Choose a base branch
from
Draft

refactor: migrate web Loader to @makeplane/propel Skeleton #9766

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bc19ff6
refactor: replace Loader components with Skeleton for loading states
codingwolf-at Sep 4, 2026
38012d1
refactor: enhance loading states with Skeleton components
codingwolf-at Sep 4, 2026
da0fe81
feat(i18n): add loading states translations for multiple languages
codingwolf-at Sep 4, 2026
5d9c8c7
refactor: update loading states to use localized aria-labels
codingwolf-at Sep 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 19 additions & 15 deletions apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -107,20 +107,24 @@ 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%" />
</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>
<div className="flex h-full gap-5 p-5">
<Skeleton ariaLabel={t("aria_labels.loading.work_item_details")}>
<div className="flex w-full gap-5">
Comment thread
codingwolf-at marked this conversation as resolved.
<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>
</Skeleton>
</div>
);
}

Expand Down
36 changes: 21 additions & 15 deletions ...ojects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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();
Expand Down Expand Up @@ -51,20 +53,24 @@ 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" />
</div>
</Loader>
<div className="flex h-full gap-5 p-5">
<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%" />
<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>
</Skeleton>
</div>
) : (
<>
<Banner
Expand Down
8 changes: 6 additions & 2 deletions apps/web/core/components/analytics/insight-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@

// 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";
import { Loader } from "@plane/ui";

export type InsightCardProps = {
data?: IAnalyticsResponseFields;
Expand All @@ -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;

Expand All @@ -27,7 +29,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={t("aria_labels.loading.insight")}>
<SkeletonItem blockSize="50px" />
</Skeleton>
)}
</div>
);
Expand Down
46 changes: 25 additions & 21 deletions apps/web/core/components/analytics/insight-table/loader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,37 +6,41 @@

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<any>[];
rows: number;
}

export function TableLoader({ columns, rows }: TableSkeletonProps) {
const { t } = useTranslation();
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={t("aria_labels.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>
);
}
39 changes: 26 additions & 13 deletions apps/web/core/components/analytics/loaders.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<div className="flex h-[200px] gap-1">
<Loader className="h-full w-full">
<Loader.Item height="100%" width="100%" />
</Loader>
<div className="h-[200px] w-full">
<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">
<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={t("aria_labels.loading.chart")}>
<div className="h-12 w-full">
<SkeletonItem blockSize="100%" />
</div>
</Skeleton>
<Skeleton aria-label={t("aria_labels.loading.chart")}>
<div className="h-full w-full">
<SkeletonItem blockSize="100%" />
</div>
</Skeleton>
</div>
</div>
);
}

export function ChartLoader() {
const { t } = useTranslation();
return (
<Loader className="h-[350px] w-full">
<Loader.Item height="100%" width="100%" />
</Loader>
<Skeleton aria-label={t("aria_labels.loading.chart")}>
<div className="h-[350px] w-full">
<SkeletonItem blockSize="100%" />
</div>
</Skeleton>
);
}
13 changes: 10 additions & 3 deletions apps/web/core/components/analytics/overview/active-projects.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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={t("aria_labels.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>
Expand Down
11 changes: 7 additions & 4 deletions apps/web/core/components/automation/auto-archive-automation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -125,9 +126,11 @@ export const AutoArchiveAutomation = observer(function AutoArchiveAutomation(pro
</div>
)
) : (
<Loader className="ml-13">
<Loader.Item height="50px" />
</Loader>
<Skeleton aria-label={t("aria_labels.loading.auto_archive_settings")}>
<div className="ml-13">
<SkeletonItem blockSize="50px" />
</div>
</Skeleton>
)}
</div>
</>
Expand Down
11 changes: 7 additions & 4 deletions apps/web/core/components/automation/auto-close-automation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -188,9 +189,11 @@ export const AutoCloseAutomation = observer(function AutoCloseAutomation(props:
</div>
)
) : (
<Loader className="ml-13">
<Loader.Item height="50px" />
</Loader>
<Skeleton aria-label={t("aria_labels.loading.auto_close_settings")}>
<div className="ml-13">
<SkeletonItem blockSize="50px" />
</div>
</Skeleton>
)}
</div>
</>
Expand Down
19 changes: 12 additions & 7 deletions apps/web/core/components/base-layouts/gantt/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -31,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,
Expand Down Expand Up @@ -143,12 +146,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={t("aria_labels.loading.sidebar")}>
Comment thread
codingwolf-at marked this conversation as resolved.
<div className="space-y-3 pr-2">
<SkeletonItem blockSize="34px" />
<SkeletonItem blockSize="34px" />
<SkeletonItem blockSize="34px" />
<SkeletonItem blockSize="34px" />
</div>
</Skeleton>
)}
</div>
);
Expand Down
Loading
Loading