Skip to content

Commit bc19ff6

Browse files
codingwolf-atcodingwolf-at
committed
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.
1 parent da1a7ab commit bc19ff6

75 files changed

Lines changed: 955 additions & 754 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ import { observer } from "mobx-react";
99
import { useTheme } from "next-themes";
1010
import useSWR from "swr";
1111
// plane imports
12+
import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
1213
import { useTranslation } from "@plane/i18n";
1314
import type { TIssue } from "@plane/types";
1415
import { EIssueServiceType } from "@plane/types";
15-
import { Loader } from "@plane/ui";
1616
// assets
1717
import emptyIssueDark from "@/app/assets/empty-state/search/issues-dark.webp?url";
1818
import emptyIssueLight from "@/app/assets/empty-state/search/issues-light.webp?url";
@@ -107,20 +107,22 @@ export const IssueDetailsPage = observer(function IssueDetailsPage({ params }: R
107107

108108
if (issueLoader) {
109109
return (
110-
<Loader className="flex h-full gap-5 p-5">
111-
<div className="basis-2/3 space-y-2">
112-
<Loader.Item height="30px" width="40%" />
113-
<Loader.Item height="15px" width="60%" />
114-
<Loader.Item height="15px" width="60%" />
115-
<Loader.Item height="15px" width="40%" />
110+
<Skeleton aria-label="Loading work item details">
111+
<div className="flex h-full gap-5 p-5">
112+
<div className="basis-2/3 space-y-2">
113+
<SkeletonItem blockSize="30px" inlineSize="40%" />
114+
<SkeletonItem blockSize="15px" inlineSize="60%" />
115+
<SkeletonItem blockSize="15px" inlineSize="60%" />
116+
<SkeletonItem blockSize="15px" inlineSize="40%" />
117+
</div>
118+
<div className="basis-1/3 space-y-3">
119+
<SkeletonItem blockSize="30px" />
120+
<SkeletonItem blockSize="30px" />
121+
<SkeletonItem blockSize="30px" />
122+
<SkeletonItem blockSize="30px" />
123+
</div>
116124
</div>
117-
<div className="basis-1/3 space-y-3">
118-
<Loader.Item height="30px" />
119-
<Loader.Item height="30px" />
120-
<Loader.Item height="30px" />
121-
<Loader.Item height="30px" />
122-
</div>
123-
</Loader>
125+
</Skeleton>
124126
);
125127
}
126128

‎apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import useSWR from "swr";
1111
import { Banner } from "@plane/propel/banner";
1212
import { Button } from "@plane/propel/button";
1313
import { ArchiveOutline } from "@makeplane/propel/icons";
14-
import { Loader } from "@plane/ui";
14+
import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
1515
// components
1616
import { PageHead } from "@/components/core/page-title";
1717
import { IssueDetailRoot } from "@/components/issues/issue-detail";
@@ -51,20 +51,22 @@ function ArchivedIssueDetailsPage({ params }: Route.ComponentProps) {
5151
<>
5252
<PageHead title={pageTitle} />
5353
{issueLoader ? (
54-
<Loader className="flex h-full gap-5 p-5">
55-
<div className="basis-2/3 space-y-2">
56-
<Loader.Item height="30px" width="40%" />
57-
<Loader.Item height="15px" width="60%" />
58-
<Loader.Item height="15px" width="60%" />
59-
<Loader.Item height="15px" width="40%" />
60-
</div>
61-
<div className="basis-1/3 space-y-3">
62-
<Loader.Item height="30px" />
63-
<Loader.Item height="30px" />
64-
<Loader.Item height="30px" />
65-
<Loader.Item height="30px" />
54+
<Skeleton aria-label="Loading work item details">
55+
<div className="flex h-full gap-5 p-5">
56+
<div className="basis-2/3 space-y-2">
57+
<SkeletonItem blockSize="30px" inlineSize="40%" />
58+
<SkeletonItem blockSize="15px" inlineSize="60%" />
59+
<SkeletonItem blockSize="15px" inlineSize="60%" />
60+
<SkeletonItem blockSize="15px" inlineSize="40%" />
61+
</div>
62+
<div className="basis-1/3 space-y-3">
63+
<SkeletonItem blockSize="30px" />
64+
<SkeletonItem blockSize="30px" />
65+
<SkeletonItem blockSize="30px" />
66+
<SkeletonItem blockSize="30px" />
67+
</div>
6668
</div>
67-
</Loader>
69+
</Skeleton>
6870
) : (
6971
<>
7072
<Banner

‎apps/web/core/components/analytics/insight-card.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66

77
// plane package imports
88
import React from "react";
9+
import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
910
import type { IAnalyticsResponseFields } from "@plane/types";
10-
import { Loader } from "@plane/ui";
1111

1212
export type InsightCardProps = {
1313
data?: IAnalyticsResponseFields;
@@ -27,7 +27,9 @@ function InsightCard(props: InsightCardProps) {
2727
<div className="text-20 font-bold text-primary">{count}</div>
2828
</div>
2929
) : (
30-
<Loader.Item height="50px" width="100%" />
30+
<Skeleton aria-label="Loading insight">
31+
<SkeletonItem blockSize="50px" />
32+
</Skeleton>
3133
)}
3234
</div>
3335
);

‎apps/web/core/components/analytics/insight-table/loader.tsx‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66

77
import * as React from "react";
88
import type { ColumnDef } from "@tanstack/react-table";
9+
import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
910
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@plane/propel/table";
10-
import { Loader } from "@plane/ui";
1111

1212
interface TableSkeletonProps {
1313
columns: ColumnDef<any>[];
@@ -16,27 +16,29 @@ interface TableSkeletonProps {
1616

1717
export function TableLoader({ columns, rows }: TableSkeletonProps) {
1818
return (
19-
<Table>
20-
<TableHeader>
21-
<TableRow>
22-
{columns.map((column, index) => (
23-
<TableHead key={column.header?.toString() ?? index}>
24-
{typeof column.header === "string" ? column.header : ""}
25-
</TableHead>
26-
))}
27-
</TableRow>
28-
</TableHeader>
29-
<TableBody>
30-
{Array.from({ length: rows }).map((_, rowIndex) => (
31-
<TableRow key={rowIndex}>
32-
{columns.map((_, colIndex) => (
33-
<TableCell key={colIndex}>
34-
<Loader.Item height="20px" width="100%" />
35-
</TableCell>
19+
<Skeleton aria-label="Loading table">
20+
<Table>
21+
<TableHeader>
22+
<TableRow>
23+
{columns.map((column, index) => (
24+
<TableHead key={column.header?.toString() ?? index}>
25+
{typeof column.header === "string" ? column.header : ""}
26+
</TableHead>
3627
))}
3728
</TableRow>
38-
))}
39-
</TableBody>
40-
</Table>
29+
</TableHeader>
30+
<TableBody>
31+
{Array.from({ length: rows }).map((_, rowIndex) => (
32+
<TableRow key={rowIndex}>
33+
{columns.map((_, colIndex) => (
34+
<TableCell key={colIndex}>
35+
<SkeletonItem blockSize="20px" />
36+
</TableCell>
37+
))}
38+
</TableRow>
39+
))}
40+
</TableBody>
41+
</Table>
42+
</Skeleton>
4143
);
4244
}

‎apps/web/core/components/analytics/loaders.tsx‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,38 @@
44
* See the LICENSE file for details.
55
*/
66

7-
import { Loader } from "@plane/ui";
7+
import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
88

99
export function ProjectInsightsLoader() {
1010
return (
1111
<div className="flex h-[200px] gap-1">
12-
<Loader className="h-full w-full">
13-
<Loader.Item height="100%" width="100%" />
14-
</Loader>
12+
<Skeleton aria-label="Loading chart">
13+
<div className="h-full w-full">
14+
<SkeletonItem blockSize="100%" />
15+
</div>
16+
</Skeleton>
1517
<div className="flex h-full w-full flex-col gap-1">
16-
<Loader className="h-12 w-full">
17-
<Loader.Item height="100%" width="100%" />
18-
</Loader>
19-
<Loader className="h-full w-full">
20-
<Loader.Item height="100%" width="100%" />
21-
</Loader>
18+
<Skeleton aria-label="Loading chart">
19+
<div className="h-12 w-full">
20+
<SkeletonItem blockSize="100%" />
21+
</div>
22+
</Skeleton>
23+
<Skeleton aria-label="Loading chart">
24+
<div className="h-full w-full">
25+
<SkeletonItem blockSize="100%" />
26+
</div>
27+
</Skeleton>
2228
</div>
2329
</div>
2430
);
2531
}
2632

2733
export function ChartLoader() {
2834
return (
29-
<Loader className="h-[350px] w-full">
30-
<Loader.Item height="100%" width="100%" />
31-
</Loader>
35+
<Skeleton aria-label="Loading chart">
36+
<div className="h-[350px] w-full">
37+
<SkeletonItem blockSize="100%" />
38+
</div>
39+
</Skeleton>
3240
);
3341
}

‎apps/web/core/components/analytics/overview/active-projects.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ import { observer } from "mobx-react";
99
import { useParams } from "next/navigation";
1010
import useSWR from "swr";
1111
// plane package imports
12+
import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
1213
import { useTranslation } from "@plane/i18n";
13-
import { Loader } from "@plane/ui";
1414
// plane web hooks
1515
import { useAnalytics } from "@/hooks/store/use-analytics";
1616
import { useProject } from "@/hooks/store/use-project";
@@ -39,8 +39,15 @@ const ActiveProjects = observer(function ActiveProjects() {
3939
className="md:col-span-2"
4040
>
4141
<div className="flex h-[350px] flex-col gap-4 overflow-auto">
42-
{isProjectAnalyticsCountLoading &&
43-
Array.from({ length: 5 }).map((_, index) => <Loader.Item key={index} height="40px" width="100%" />)}
42+
{isProjectAnalyticsCountLoading && (
43+
<Skeleton aria-label="Loading active projects">
44+
<div className="flex flex-col gap-4">
45+
{Array.from({ length: 5 }).map((_, index) => (
46+
<SkeletonItem key={index} blockSize="40px" />
47+
))}
48+
</div>
49+
</Skeleton>
50+
)}
4451
{!isProjectAnalyticsCountLoading &&
4552
projectAnalyticsCount?.map((project) => <ActiveProjectItem key={project.id} project={project} />)}
4653
</div>

‎apps/web/core/components/automation/auto-archive-automation.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ import { PROJECT_AUTOMATION_MONTHS, EUserPermissions, EUserPermissionsLevel } fr
1313
import { useTranslation } from "@plane/i18n";
1414
import type { IProject } from "@plane/types";
1515
import { Switch } from "@makeplane/propel/components/switch";
16-
import { CustomSelect, Loader } from "@plane/ui";
16+
import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
17+
import { CustomSelect } from "@plane/ui";
1718
// component
1819
import { SelectMonthModal } from "@/components/automation";
1920
import { SettingsControlItem } from "@/components/settings/control-item";
@@ -125,9 +126,11 @@ export const AutoArchiveAutomation = observer(function AutoArchiveAutomation(pro
125126
</div>
126127
)
127128
) : (
128-
<Loader className="ml-13">
129-
<Loader.Item height="50px" />
130-
</Loader>
129+
<Skeleton aria-label="Loading auto-archive settings">
130+
<div className="ml-13">
131+
<SkeletonItem blockSize="50px" />
132+
</div>
133+
</Skeleton>
131134
)}
132135
</div>
133136
</>

‎apps/web/core/components/automation/auto-close-automation.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ import { useTranslation } from "@plane/i18n";
1414
import { StateGroupIcon } from "@plane/propel/icons";
1515
import type { IProject } from "@plane/types";
1616
import { Switch } from "@makeplane/propel/components/switch";
17-
import { CustomSelect, CustomSearchSelect, Loader } from "@plane/ui";
17+
import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
18+
import { CustomSelect, CustomSearchSelect } from "@plane/ui";
1819
import { SelectMonthModal } from "@/components/automation";
1920
import { SettingsControlItem } from "@/components/settings/control-item";
2021
// hooks
@@ -188,9 +189,11 @@ export const AutoCloseAutomation = observer(function AutoCloseAutomation(props:
188189
</div>
189190
)
190191
) : (
191-
<Loader className="ml-13">
192-
<Loader.Item height="50px" />
193-
</Loader>
192+
<Skeleton aria-label="Loading auto-close settings">
193+
<div className="ml-13">
194+
<SkeletonItem blockSize="50px" />
195+
</div>
196+
</Skeleton>
194197
)}
195198
</div>
196199
</>

‎apps/web/core/components/base-layouts/gantt/sidebar.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@
77
import type { RefObject } from "react";
88
import { useState } from "react";
99
import { observer } from "mobx-react";
10+
import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
1011
import type { IBaseLayoutsBaseItem, IBlockUpdateData } from "@plane/types";
11-
import { Loader, Row } from "@plane/ui";
12+
import { Row } from "@plane/ui";
1213
import { cn } from "@plane/utils";
1314
import RenderIfVisible from "@/components/core/render-if-visible-HOC";
1415
import { BLOCK_HEIGHT } from "@/components/gantt-chart/constants";
@@ -143,12 +144,14 @@ export const BaseGanttSidebar = observer(function BaseGanttSidebar<T extends IBa
143144
)}
144145
</>
145146
) : (
146-
<Loader className="space-y-3 pr-2">
147-
<Loader.Item height="34px" />
148-
<Loader.Item height="34px" />
149-
<Loader.Item height="34px" />
150-
<Loader.Item height="34px" />
151-
</Loader>
147+
<Skeleton aria-label="Loading sidebar">
148+
<div className="space-y-3 pr-2">
149+
<SkeletonItem blockSize="34px" />
150+
<SkeletonItem blockSize="34px" />
151+
<SkeletonItem blockSize="34px" />
152+
<SkeletonItem blockSize="34px" />
153+
</div>
154+
</Skeleton>
152155
)}
153156
</div>
154157
);

‎apps/web/core/components/common/filters/created-by.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { sortBy } from "lodash-es";
99
import { observer } from "mobx-react";
1010
// ui
1111
import { Avatar } from "@makeplane/propel/components/avatar";
12-
import { Loader } from "@plane/ui";
12+
import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
1313
// components
1414
import { getFileURL } from "@plane/utils";
1515
import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -103,11 +103,13 @@ export const FilterCreatedBy = observer(function FilterCreatedBy(props: Props) {
103103
<p className="text-11 text-placeholder italic">No matches found</p>
104104
)
105105
) : (
106-
<Loader className="space-y-2">
107-
<Loader.Item height="20px" />
108-
<Loader.Item height="20px" />
109-
<Loader.Item height="20px" />
110-
</Loader>
106+
<Skeleton aria-label="Loading created-by options">
107+
<div className="space-y-2">
108+
<SkeletonItem blockSize="20px" />
109+
<SkeletonItem blockSize="20px" />
110+
<SkeletonItem blockSize="20px" />
111+
</div>
112+
</Skeleton>
111113
)}
112114
</div>
113115
)}

0 commit comments

Comments
 (0)