Skip to content

Commit 65fd265

Browse files
Sreejit-SenguptoSreejit-Sengupto
authored
Merge pull request #14 from Sreejit-Sengupto/feat/skeletons
add skeletons
2 parents 0dfc507 + e56249a commit 65fd265

File tree

9 files changed

+229
-10
lines changed

9 files changed

+229
-10
lines changed

‎src/app/(authenticated)/workplace/page.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,17 @@ import FeatureFlagCard from "@/components/application/workplace/feature-flag-car
44
import MetricCard from "@/components/application/workplace/metric-cards";
55
import QuickAction from "@/components/application/workplace/quick-action";
66
import RecentActivity from "@/components/application/workplace/recent-activity";
7+
import FeatureFlagsSkeleton from "@/components/application/workplace/skeletons/feature-flags-skeleton";
8+
import MetricCardSkeleton from "@/components/application/workplace/skeletons/metric-cards-skeleton";
9+
import RecentActivitySkeleton from "@/components/application/workplace/skeletons/recent-activity-skeleton";
710
import { useUserFlagQuery } from "@/lib/tanstack/hooks/feature-flag";
811
import { useGetMetrics } from "@/lib/tanstack/hooks/metrics";
912
import { useRecentActivity } from "@/lib/tanstack/hooks/recent-activity";
1013
import {
1114
Flag,
1215
ArrowRight,
13-
Loader2,
14-
ChartColumn,
1516
ChartBarIncreasing,
17+
ChartColumn,
1618
} from "lucide-react";
1719
import Link from "next/link";
1820

@@ -27,7 +29,7 @@ const Workplace = () => {
2729
<div className="col-span-3 flex flex-col justify-start items-center gap-4">
2830
<div className="w-full hidden lg:flex flex-col lg:flex-row justify-between items-center gap-2">
2931
{metricsLoading ? (
30-
<Loader2 className="animate-spin" />
32+
<MetricCardSkeleton />
3133
) : metrics ? (
3234
Object.entries(metrics.data).map(([key, data]) => (
3335
<MetricCard
@@ -54,7 +56,7 @@ const Workplace = () => {
5456
Feature Flags
5557
</h1>
5658
{isLoading ? (
57-
<Loader2 className="animate-spin" />
59+
<FeatureFlagsSkeleton />
5860
) : featureFlags && featureFlags.data.length === 0 ? (
5961
<EmptyState
6062
icon={<Flag size={32} />}
@@ -93,7 +95,7 @@ const Workplace = () => {
9395

9496
<div className="w-full flex lg:hidden flex-col lg:flex-row justify-between items-center gap-2 mb-12">
9597
{metricsLoading ? (
96-
<Loader2 className="animate-spin" />
98+
<MetricCardSkeleton />
9799
) : metrics ? (
98100
Object.entries(metrics.data).map(([key, data]) => (
99101
<MetricCard
@@ -127,7 +129,7 @@ const Workplace = () => {
127129
</h1>
128130
<div className="flex flex-col justify-start items-center w-full gap-2 max-h-[60dvh] overflow-y-auto">
129131
{activityLoading ? (
130-
<Loader2 className="animate-spin" />
132+
<RecentActivitySkeleton />
131133
) : recentActivity && recentActivity.data.length > 0 ? (
132134
recentActivity.data.map((item, index) => (
133135
<RecentActivity

‎src/components/application/feature-flags/flag-list.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
"use client";
22
import { useUserFlagQuery } from "@/lib/tanstack/hooks/feature-flag";
3-
import { Loader2 } from "lucide-react";
43
import { useSearchParams } from "next/navigation";
54
import React from "react";
65
import FeatureFlagCard from "../workplace/feature-flag-card";
76
import PaginationBar from "../pagination-bar";
7+
import FeatureFlagsSkeleton from "../workplace/skeletons/feature-flags-skeleton";
88

99
const FlagList = () => {
1010
const searchParams = useSearchParams();
@@ -16,7 +16,7 @@ const FlagList = () => {
1616
return (
1717
<div className="w-full">
1818
{isLoading ? (
19-
<Loader2 className="animate-spin" />
19+
<FeatureFlagsSkeleton />
2020
) : (
2121
featureFlags &&
2222
featureFlags.data.map((flag, index) => {

‎src/components/application/settings/api-key/all-keys.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
useQueryAPIKeys,
1818
useRevokeAPIKey,
1919
} from "@/lib/tanstack/hooks/api-key";
20+
import APIKeysSkeleton from "../skeletons/api-keys-skeleton";
2021

2122
export function AllKeys() {
2223
const { data: apiKeys, isLoading } = useQueryAPIKeys();
@@ -40,7 +41,7 @@ export function AllKeys() {
4041
};
4142

4243
return isLoading ? (
43-
<Loader2 className="animate-spin" />
44+
<APIKeysSkeleton />
4445
) : apiKeys && apiKeys.data.length <= 0 ? (
4546
<EmptyState
4647
icon={<KeyIcon size={32} />}

‎src/components/application/settings/enviroment/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
useAddEnvUrlMutation,
1616
useGetEnvQuery,
1717
} from "@/lib/tanstack/hooks/flag-env";
18+
import EnvironmentSkeleton from "../skeletons/environment-skeleton";
1819
import { Loader2 } from "lucide-react";
1920

2021
const Environment = () => {
@@ -69,7 +70,7 @@ const Environment = () => {
6970
</CardHeader>
7071
<CardContent>
7172
{isLoading && !envUrls ? (
72-
<Loader2 className="animate-spin" />
73+
<EnvironmentSkeleton />
7374
) : (
7475
<div className="flex flex-col justify-center items-center gap-8 w-full">
7576
<div className="w-full">

‎src/components/application/settings/skeletons/api-keys-skeleton.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import {
2+
Table,
3+
TableBody,
4+
TableCaption,
5+
TableCell,
6+
TableHead,
7+
TableHeader,
8+
TableRow,
9+
} from "@/components/ui/table";
10+
import { Skeleton } from "@/components/ui/skeleton";
11+
12+
const APIKeysSkeleton = () => {
13+
return (
14+
<Table>
15+
<TableCaption>Loading API Keys...</TableCaption>
16+
<TableHeader>
17+
<TableRow>
18+
<TableHead>
19+
<Skeleton className="h-6 w-24" />
20+
</TableHead>
21+
<TableHead>
22+
<Skeleton className="h-6 w-24" />
23+
</TableHead>
24+
<TableHead>
25+
<Skeleton className="h-6 w-24" />
26+
</TableHead>
27+
<TableHead className="text-right">
28+
<Skeleton className="h-6 w-24 ml-auto" />
29+
</TableHead>
30+
</TableRow>
31+
</TableHeader>
32+
<TableBody>
33+
{[...Array(3)].map((_, index) => (
34+
<TableRow key={index}>
35+
<TableCell>
36+
<Skeleton className="h-5 w-32" />
37+
</TableCell>
38+
<TableCell>
39+
<Skeleton className="h-5 w-40" />
40+
</TableCell>
41+
<TableCell>
42+
<Skeleton className="h-5 w-24" />
43+
</TableCell>
44+
<TableCell className="text-right flex justify-end items-center gap-1">
45+
<Skeleton className="h-10 w-20" />
46+
<Skeleton className="h-10 w-20" />
47+
</TableCell>
48+
</TableRow>
49+
))}
50+
</TableBody>
51+
</Table>
52+
);
53+
};
54+
55+
export default APIKeysSkeleton;

‎src/components/application/settings/skeletons/environment-skeleton.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import {
2+
Card,
3+
CardContent,
4+
CardFooter,
5+
CardHeader,
6+
} from "@/components/ui/card";
7+
import { Skeleton } from "@/components/ui/skeleton";
8+
9+
const EnvironmentSkeleton = () => {
10+
return (
11+
<Card>
12+
<CardHeader>
13+
<Skeleton className="h-8 w-1/2" />
14+
<Skeleton className="h-5 w-full mt-2" />
15+
</CardHeader>
16+
<CardContent className="flex flex-col justify-center items-center gap-8 w-full">
17+
<div className="w-full">
18+
<Skeleton className="h-5 w-24 mb-2" />
19+
<Skeleton className="h-10 w-full" />
20+
</div>
21+
<div className="w-full">
22+
<Skeleton className="h-5 w-24 mb-2" />
23+
<Skeleton className="h-10 w-full" />
24+
</div>
25+
<div className="w-full">
26+
<Skeleton className="h-5 w-24 mb-2" />
27+
<Skeleton className="h-10 w-full" />
28+
</div>
29+
</CardContent>
30+
<CardFooter className="flex justify-end">
31+
<Skeleton className="h-10 w-24" />
32+
</CardFooter>
33+
</Card>
34+
);
35+
};
36+
37+
export default EnvironmentSkeleton;

‎src/components/application/workplace/skeletons/feature-flags-skeleton.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import {
2+
Card,
3+
CardContent,
4+
CardFooter,
5+
CardHeader,
6+
} from "@/components/ui/card";
7+
import { Skeleton } from "@/components/ui/skeleton";
8+
import { cn } from "@/lib/utils";
9+
10+
const FeatureFlagCardSkeleton = ({
11+
roundTop,
12+
roundBottom,
13+
}: {
14+
roundTop: boolean;
15+
roundBottom: boolean;
16+
}) => {
17+
return (
18+
<Card
19+
className={cn(
20+
"w-full rounded-none",
21+
roundTop && "rounded-t-2xl",
22+
roundBottom && "rounded-b-2xl",
23+
)}
24+
>
25+
<CardHeader>
26+
<div className="flex justify-between items-center">
27+
<div className="flex flex-col lg:flex-row justify-center items-start lg:items-center gap-2">
28+
<Skeleton className="h-8 w-40" />
29+
<Skeleton className="h-6 w-20 lg:hidden" />
30+
<Skeleton className="h-6 w-24" />
31+
<Skeleton className="h-6 w-20 hidden lg:block" />
32+
</div>
33+
<Skeleton className="h-6 w-12" />
34+
</div>
35+
<Skeleton className="h-5 w-full mt-2" />
36+
</CardHeader>
37+
<CardContent className="grid grid-cols-2 lg:flex justify-start items-center gap-1 lg:gap-2">
38+
<Skeleton className="h-8 w-24" />
39+
<Skeleton className="h-8 w-24" />
40+
<Skeleton className="h-8 w-32" />
41+
<Skeleton className="h-8 w-28" />
42+
</CardContent>
43+
<CardFooter className="flex justify-between items-center">
44+
<div className="w-full flex flex-col justify-center items-start gap-2">
45+
<div className="w-[80%] lg:w-[60%] flex justify-between items-center">
46+
<Skeleton className="h-5 w-32" />
47+
<Skeleton className="h-5 w-10" />
48+
</div>
49+
<Skeleton className="h-2 w-[80%] lg:w-[60%]" />
50+
</div>
51+
<Skeleton className="h-6 w-6" />
52+
</CardFooter>
53+
</Card>
54+
);
55+
};
56+
57+
const FeatureFlagsSkeleton = () => {
58+
return (
59+
<div className="w-full flex flex-col">
60+
{[...Array(3)].map((_, index) => (
61+
<FeatureFlagCardSkeleton
62+
key={index}
63+
roundTop={index === 0}
64+
roundBottom={index === 2}
65+
/>
66+
))}
67+
</div>
68+
);
69+
};
70+
71+
export default FeatureFlagsSkeleton;

‎src/components/application/workplace/skeletons/metric-cards-skeleton.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import {
2+
Card,
3+
CardContent,
4+
CardFooter,
5+
CardHeader,
6+
} from "@/components/ui/card";
7+
import { Skeleton } from "@/components/ui/skeleton";
8+
9+
const MetricCardSkeleton = () => {
10+
return (
11+
<>
12+
{[...Array(4)].map((_, index) => (
13+
<Card
14+
key={index}
15+
className="w-full h-full border border-dashed border-gray-700 bg-primary-foreground"
16+
>
17+
<CardHeader>
18+
<Skeleton className="h-6 w-3/4" />
19+
</CardHeader>
20+
<CardContent>
21+
<Skeleton className="h-8 w-1/2" />
22+
</CardContent>
23+
<CardFooter>
24+
<Skeleton className="h-6 w-1/4" />
25+
</CardFooter>
26+
</Card>
27+
))}
28+
</>
29+
);
30+
};
31+
32+
export default MetricCardSkeleton;

‎src/components/application/workplace/skeletons/recent-activity-skeleton.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Skeleton } from "@/components/ui/skeleton";
2+
3+
const RecentActivitySkeleton = () => {
4+
return (
5+
<div className="w-full flex flex-col gap-2">
6+
{[...Array(5)].map((_, index) => (
7+
<div
8+
key={index}
9+
className="w-full bg-background p-5 rounded-2xl"
10+
>
11+
<Skeleton className="h-6 w-3/4 mb-2" />
12+
<Skeleton className="h-4 w-1/2 mb-4" />
13+
<Skeleton className="h-4 w-1/4 ml-auto" />
14+
</div>
15+
))}
16+
</div>
17+
);
18+
};
19+
20+
export default RecentActivitySkeleton;

0 commit comments

Comments
 (0)