Skip to content

Commit 38012d1

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

10 files changed

Lines changed: 72 additions & 76 deletions

File tree

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

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -107,22 +107,24 @@ export const IssueDetailsPage = observer(function IssueDetailsPage({ params }: R
107107

108108
if (issueLoader) {
109109
return (
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%" />
110+
<div className="flex h-full gap-5 p-5">
111+
<Skeleton aria-label="Loading work item details">
112+
<div className="flex w-full gap-5">
113+
<div className="basis-2/3 space-y-2">
114+
<SkeletonItem blockSize="30px" inlineSize="40%" />
115+
<SkeletonItem blockSize="15px" inlineSize="60%" />
116+
<SkeletonItem blockSize="15px" inlineSize="60%" />
117+
<SkeletonItem blockSize="15px" inlineSize="40%" />
118+
</div>
119+
<div className="basis-1/3 space-y-3">
120+
<SkeletonItem blockSize="30px" />
121+
<SkeletonItem blockSize="30px" />
122+
<SkeletonItem blockSize="30px" />
123+
<SkeletonItem blockSize="30px" />
124+
</div>
117125
</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>
124-
</div>
125-
</Skeleton>
126+
</Skeleton>
127+
</div>
126128
);
127129
}
128130

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

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -51,22 +51,24 @@ function ArchivedIssueDetailsPage({ params }: Route.ComponentProps) {
5151
<>
5252
<PageHead title={pageTitle} />
5353
{issueLoader ? (
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%" />
54+
<div className="flex h-full gap-5 p-5">
55+
<Skeleton aria-label="Loading work item details">
56+
<div className="flex w-full gap-5">
57+
<div className="basis-2/3 space-y-2">
58+
<SkeletonItem blockSize="30px" inlineSize="40%" />
59+
<SkeletonItem blockSize="15px" inlineSize="60%" />
60+
<SkeletonItem blockSize="15px" inlineSize="60%" />
61+
<SkeletonItem blockSize="15px" inlineSize="40%" />
62+
</div>
63+
<div className="basis-1/3 space-y-3">
64+
<SkeletonItem blockSize="30px" />
65+
<SkeletonItem blockSize="30px" />
66+
<SkeletonItem blockSize="30px" />
67+
<SkeletonItem blockSize="30px" />
68+
</div>
6169
</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>
68-
</div>
69-
</Skeleton>
70+
</Skeleton>
71+
</div>
7072
) : (
7173
<>
7274
<Banner

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,13 @@ import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
99
export function ProjectInsightsLoader() {
1010
return (
1111
<div className="flex h-[200px] gap-1">
12-
<Skeleton aria-label="Loading chart">
13-
<div className="h-full w-full">
14-
<SkeletonItem blockSize="100%" />
15-
</div>
16-
</Skeleton>
12+
<div className="h-[200px] w-full">
13+
<Skeleton aria-label="Loading chart">
14+
<div className="h-full w-full">
15+
<SkeletonItem blockSize="100%" inlineSize="100%" />
16+
</div>
17+
</Skeleton>
18+
</div>
1719
<div className="flex h-full w-full flex-col gap-1">
1820
<Skeleton aria-label="Loading chart">
1921
<div className="h-12 w-full">

‎apps/web/core/components/home/widgets/loaders/home-loader.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ export function HomeLoader() {
1717
<div className="mb-4">
1818
<SkeletonItem blockSize="20px" inlineSize="100px" />
1919
</div>
20-
<div className="flex h-[110px] w-full items-center justify-center gap-2 rounded-sm text-placeholder">
21-
<SkeletonItem blockSize="100%" />
20+
<div className="h-[110px] w-full rounded-sm">
21+
<SkeletonItem blockSize="100%" inlineSize="100%" />
2222
</div>
2323
</div>
2424
</Skeleton>

‎apps/web/core/components/home/widgets/loaders/quick-links.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66

77
import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
88
import { range } from "lodash-es";
9-
// ui
109

1110
export function QuickLinksWidgetLoader() {
1211
return (

‎apps/web/core/components/home/widgets/loaders/recent-activity.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66

77
import { Skeleton, SkeletonItem } from "@makeplane/propel/components/skeleton";
88
import { range } from "lodash-es";
9-
// ui
109

1110
export function RecentActivityWidgetLoader() {
1211
return (

‎apps/web/core/components/pages/loaders/page-content-loader.tsx‎

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ export function PageContentLoader(props: Props) {
1717

1818
return (
1919
<div className={cn("relative flex size-full flex-col", className)}>
20-
{/* header */}
21-
<div className="relative flex h-12 w-full flex-shrink-0 items-center divide-x divide-subtle border-b border-subtle">
22-
<Skeleton aria-label="Loading page content">
20+
<Skeleton aria-label="Loading page content">
21+
{/* header */}
22+
<div className="relative flex h-12 w-full flex-shrink-0 items-center divide-x divide-subtle border-b border-subtle">
2323
<div className="relative flex items-center gap-1 pr-2">
2424
<SkeletonItem blockSize="26px" inlineSize="26px" />
2525
<SkeletonItem blockSize="26px" inlineSize="26px" />
@@ -29,32 +29,24 @@ export function PageContentLoader(props: Props) {
2929
<SkeletonItem blockSize="26px" inlineSize="26px" />
3030
<SkeletonItem blockSize="26px" inlineSize="26px" />
3131
</div>
32-
</Skeleton>
33-
<Skeleton aria-label="Loading page content">
3432
<div className="relative flex items-center gap-1 px-2">
3533
<SkeletonItem blockSize="26px" inlineSize="26px" />
3634
<SkeletonItem blockSize="26px" inlineSize="26px" />
3735
</div>
38-
</Skeleton>
39-
<Skeleton aria-label="Loading page content">
4036
<div className="relative flex items-center gap-1 px-2">
4137
<SkeletonItem blockSize="26px" inlineSize="26px" />
4238
<SkeletonItem blockSize="26px" inlineSize="26px" />
4339
</div>
44-
</Skeleton>
45-
<Skeleton aria-label="Loading page content">
4640
<div className="relative flex items-center gap-1 pl-2">
4741
<SkeletonItem blockSize="26px" inlineSize="26px" />
4842
<SkeletonItem blockSize="26px" inlineSize="26px" />
4943
</div>
50-
</Skeleton>
51-
</div>
44+
</div>
5245

53-
{/* content */}
54-
<div className="relative flex size-full overflow-hidden pt-[64px]">
55-
{/* editor loader */}
56-
<div className="size-full py-5">
57-
<Skeleton aria-label="Loading page content">
46+
{/* content */}
47+
<div className="relative flex size-full overflow-hidden pt-[64px]">
48+
{/* editor loader */}
49+
<div className="size-full py-5">
5850
<div className="relative space-y-4">
5951
<SkeletonItem blockSize="36px" inlineSize="50%" />
6052
<div className="space-y-2">
@@ -91,9 +83,9 @@ export function PageContentLoader(props: Props) {
9183
</div>
9284
</div>
9385
</div>
94-
</Skeleton>
86+
</div>
9587
</div>
96-
</div>
88+
</Skeleton>
9789
</div>
9890
);
9991
}

‎apps/web/core/components/pages/loaders/page-loader.tsx‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,33 +9,31 @@ import { range } from "lodash-es";
99

1010
export function PageLoader() {
1111
return (
12-
<div className="relative flex h-full w-full flex-col">
13-
<div className="border-b border-subtle px-3 py-3">
14-
<Skeleton aria-label="Loading page">
12+
<Skeleton aria-label="Loading page">
13+
<div className="relative flex h-full w-full flex-col">
14+
<div className="border-b border-subtle px-3 py-3">
1515
<div className="relative flex items-center gap-2">
1616
<SkeletonItem blockSize="30px" inlineSize="200px" />
1717
<div className="relative ml-auto flex items-center gap-2">
1818
<SkeletonItem blockSize="30px" inlineSize="100px" />
1919
<SkeletonItem blockSize="30px" inlineSize="100px" />
2020
</div>
2121
</div>
22-
</Skeleton>
23-
</div>
24-
<div>
25-
{range(10).map((i) => (
26-
<Skeleton aria-label="Loading page" key={i}>
27-
<div className="relative flex items-center gap-2 border-b border-subtle p-3 py-4">
28-
<SkeletonItem blockSize="22px" inlineSize={`${250 + 10 * Math.floor(Math.random() * 10)}px`} />
22+
</div>
23+
<div>
24+
{range(10).map((i) => (
25+
<div key={i} className="relative flex items-center gap-2 border-b border-subtle p-3 py-4">
26+
<SkeletonItem blockSize="22px" inlineSize={`${250 + 10 * (i % 10)}px`} />
2927
<div className="relative ml-auto flex items-center gap-2">
3028
<SkeletonItem blockSize="22px" inlineSize="60px" />
3129
<SkeletonItem blockSize="22px" inlineSize="22px" />
3230
<SkeletonItem blockSize="22px" inlineSize="22px" />
3331
<SkeletonItem blockSize="22px" inlineSize="22px" />
3432
</div>
3533
</div>
36-
</Skeleton>
37-
))}
34+
))}
35+
</div>
3836
</div>
39-
</div>
37+
</Skeleton>
4038
);
4139
}

‎apps/web/core/components/project/form-loader.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ export function ProjectDetailsFormLoader() {
1111
<>
1212
<div className="relative mt-6 h-44 w-full">
1313
<Skeleton aria-label="Loading project form">
14-
<SkeletonItem inlineSize="46px" />
14+
<div className="h-full w-full">
15+
<SkeletonItem blockSize="100%" inlineSize="100%" />
16+
</div>
1517
</Skeleton>
1618
<div className="absolute bottom-4 flex w-full items-end justify-between gap-3 px-4">
1719
<div className="flex flex-grow gap-3 truncate">
@@ -39,7 +41,7 @@ export function ProjectDetailsFormLoader() {
3941
<h4 className="text-13">Description</h4>
4042
<Skeleton aria-label="Loading project form">
4143
<div className="w-full">
42-
<SkeletonItem blockSize="102px" inlineSize="full" />
44+
<SkeletonItem blockSize="102px" inlineSize="100%" />
4345
</div>
4446
</Skeleton>
4547
</div>

‎apps/web/core/components/stickies/layout/stickies-infinite.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,14 +51,14 @@ export const StickiesInfinite = observer(function StickiesInfinite() {
5151
hasNextPage &&
5252
workspaceStickies?.length >= STICKIES_PER_PAGE && (
5353
<div
54-
className={cn("box-border flex min-h-[300px] w-full p-2")}
54+
className={cn("box-border flex min-h-75 w-full p-2")}
5555
ref={setElementRef}
5656
id="intersection-element"
5757
>
58-
<div className="flex min-h-[300px] w-full rounded-sm">
58+
<div className="min-h-75 w-full rounded-sm">
5959
<Skeleton aria-label="Loading more stickies">
60-
<div className="h-full w-full">
61-
<SkeletonItem blockSize="100%" />
60+
<div className="h-75 w-full">
61+
<SkeletonItem blockSize="100%" inlineSize="100%" />
6262
</div>
6363
</Skeleton>
6464
</div>

0 commit comments

Comments
 (0)