Sreejit-Sengupto · Sreejit-Sengupto · Sep 18, 2025 · Sep 15, 2025
diff --git a/.prettierignore b/.prettierignore
@@ -40,4 +40,5 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-.gitignore
+.gitignore
+.github
diff --git a/src/app/(authenticated)/workplace/page.tsx b/src/app/(authenticated)/workplace/page.tsx
@@ -4,15 +4,17 @@ import FeatureFlagCard from "@/components/application/workplace/feature-flag-car
 import MetricCard from "@/components/application/workplace/metric-cards";
 import QuickAction from "@/components/application/workplace/quick-action";
 import RecentActivity from "@/components/application/workplace/recent-activity";
+import FeatureFlagsSkeleton from "@/components/application/workplace/skeletons/feature-flags-skeleton";
+import MetricCardSkeleton from "@/components/application/workplace/skeletons/metric-cards-skeleton";
+import RecentActivitySkeleton from "@/components/application/workplace/skeletons/recent-activity-skeleton";
 import { useUserFlagQuery } from "@/lib/tanstack/hooks/feature-flag";
 import { useGetMetrics } from "@/lib/tanstack/hooks/metrics";
 import { useRecentActivity } from "@/lib/tanstack/hooks/recent-activity";
 import {
     Flag,
     ArrowRight,
-    Loader2,
-    ChartColumn,
     ChartBarIncreasing,
+    ChartColumn,
 } from "lucide-react";
 import Link from "next/link";
 
@@ -27,7 +29,7 @@ const Workplace = () => {
             <div className="col-span-3 flex flex-col justify-start items-center gap-4">
                 <div className="w-full hidden lg:flex flex-col lg:flex-row justify-between items-center gap-2">
                     {metricsLoading ? (
-                        <Loader2 className="animate-spin" />
+                        <MetricCardSkeleton />
                     ) : metrics ? (
                         Object.entries(metrics.data).map(([key, data]) => (
                             <MetricCard
@@ -54,7 +56,7 @@ const Workplace = () => {
                         Feature Flags
                     </h1>
                     {isLoading ? (
-                        <Loader2 className="animate-spin" />
+                        <FeatureFlagsSkeleton />
                     ) : featureFlags && featureFlags.data.length === 0 ? (
                         <EmptyState
                             icon={<Flag size={32} />}
@@ -93,7 +95,7 @@ const Workplace = () => {
 
                 <div className="w-full flex lg:hidden flex-col lg:flex-row justify-between items-center gap-2 mb-12">
                     {metricsLoading ? (
-                        <Loader2 className="animate-spin" />
+                        <MetricCardSkeleton />
                     ) : metrics ? (
                         Object.entries(metrics.data).map(([key, data]) => (
                             <MetricCard
@@ -127,7 +129,7 @@ const Workplace = () => {
                     </h1>
                     <div className="flex flex-col justify-start items-center w-full gap-2 max-h-[60dvh] overflow-y-auto">
                         {activityLoading ? (
-                            <Loader2 className="animate-spin" />
+                            <RecentActivitySkeleton />
                         ) : recentActivity && recentActivity.data.length > 0 ? (
                             recentActivity.data.map((item, index) => (
                                 <RecentActivity

diff --git a/src/components/application/feature-flags/flag-list.tsx b/src/components/application/feature-flags/flag-list.tsx
@@ -1,10 +1,10 @@
 "use client";
 import { useUserFlagQuery } from "@/lib/tanstack/hooks/feature-flag";
-import { Loader2 } from "lucide-react";
 import { useSearchParams } from "next/navigation";
 import React from "react";
 import FeatureFlagCard from "../workplace/feature-flag-card";
 import PaginationBar from "../pagination-bar";
+import FeatureFlagsSkeleton from "../workplace/skeletons/feature-flags-skeleton";
 
 const FlagList = () => {
     const searchParams = useSearchParams();
@@ -16,7 +16,7 @@ const FlagList = () => {
     return (
         <div className="w-full">
             {isLoading ? (
-                <Loader2 className="animate-spin" />
+                <FeatureFlagsSkeleton />
             ) : (
                 featureFlags &&
                 featureFlags.data.map((flag, index) => {

diff --git a/src/components/application/settings/api-key/all-keys.tsx b/src/components/application/settings/api-key/all-keys.tsx
@@ -17,6 +17,7 @@ import {
     useQueryAPIKeys,
     useRevokeAPIKey,
 } from "@/lib/tanstack/hooks/api-key";
+import APIKeysSkeleton from "../skeletons/api-keys-skeleton";
 
 export function AllKeys() {
     const { data: apiKeys, isLoading } = useQueryAPIKeys();
@@ -40,7 +41,7 @@ export function AllKeys() {
     };
 
     return isLoading ? (
-        <Loader2 className="animate-spin" />
+        <APIKeysSkeleton />
     ) : apiKeys && apiKeys.data.length <= 0 ? (
         <EmptyState
             icon={<KeyIcon size={32} />}

diff --git a/src/components/application/settings/enviroment/index.tsx b/src/components/application/settings/enviroment/index.tsx
@@ -15,6 +15,7 @@ import {
     useAddEnvUrlMutation,
     useGetEnvQuery,
 } from "@/lib/tanstack/hooks/flag-env";
+import EnvironmentSkeleton from "../skeletons/environment-skeleton";
 import { Loader2 } from "lucide-react";
 
 const Environment = () => {
@@ -69,7 +70,7 @@ const Environment = () => {
             </CardHeader>
             <CardContent>
                 {isLoading && !envUrls ? (
-                    <Loader2 className="animate-spin" />
+                    <EnvironmentSkeleton />
                 ) : (
                     <div className="flex flex-col justify-center items-center gap-8 w-full">
                         <div className="w-full">

diff --git a/src/components/application/settings/skeletons/api-keys-skeleton.tsx b/src/components/application/settings/skeletons/api-keys-skeleton.tsx
@@ -0,0 +1,55 @@
+import {
+    Table,
+    TableBody,
+    TableCaption,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table";
+import { Skeleton } from "@/components/ui/skeleton";
+
+const APIKeysSkeleton = () => {
+    return (
+        <Table>
+            <TableCaption>Loading API Keys...</TableCaption>
+            <TableHeader>
+                <TableRow>
+                    <TableHead>
+                        <Skeleton className="h-6 w-24" />
+                    </TableHead>
+                    <TableHead>
+                        <Skeleton className="h-6 w-24" />
+                    </TableHead>
+                    <TableHead>
+                        <Skeleton className="h-6 w-24" />
+                    </TableHead>
+                    <TableHead className="text-right">
+                        <Skeleton className="h-6 w-24 ml-auto" />
+                    </TableHead>
+                </TableRow>
+            </TableHeader>
+            <TableBody>
+                {[...Array(3)].map((_, index) => (
+                    <TableRow key={index}>
+                        <TableCell>
+                            <Skeleton className="h-5 w-32" />
+                        </TableCell>
+                        <TableCell>
+                            <Skeleton className="h-5 w-40" />
+                        </TableCell>
+                        <TableCell>
+                            <Skeleton className="h-5 w-24" />
+                        </TableCell>
+                        <TableCell className="text-right flex justify-end items-center gap-1">
+                            <Skeleton className="h-10 w-20" />
+                            <Skeleton className="h-10 w-20" />
+                        </TableCell>
+                    </TableRow>
+                ))}
+            </TableBody>
+        </Table>
+    );
+};
+
+export default APIKeysSkeleton;
diff --git a/src/components/application/settings/skeletons/environment-skeleton.tsx b/src/components/application/settings/skeletons/environment-skeleton.tsx
@@ -0,0 +1,37 @@
+import {
+    Card,
+    CardContent,
+    CardFooter,
+    CardHeader,
+} from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+const EnvironmentSkeleton = () => {
+    return (
+        <Card>
+            <CardHeader>
+                <Skeleton className="h-8 w-1/2" />
+                <Skeleton className="h-5 w-full mt-2" />
+            </CardHeader>
+            <CardContent className="flex flex-col justify-center items-center gap-8 w-full">
+                <div className="w-full">
+                    <Skeleton className="h-5 w-24 mb-2" />
+                    <Skeleton className="h-10 w-full" />
+                </div>
+                <div className="w-full">
+                    <Skeleton className="h-5 w-24 mb-2" />
+                    <Skeleton className="h-10 w-full" />
+                </div>
+                <div className="w-full">
+                    <Skeleton className="h-5 w-24 mb-2" />
+                    <Skeleton className="h-10 w-full" />
+                </div>
+            </CardContent>
+            <CardFooter className="flex justify-end">
+                <Skeleton className="h-10 w-24" />
+            </CardFooter>
+        </Card>
+    );
+};
+
+export default EnvironmentSkeleton;
diff --git a/src/components/application/workplace/skeletons/feature-flags-skeleton.tsx b/src/components/application/workplace/skeletons/feature-flags-skeleton.tsx
@@ -0,0 +1,71 @@
+import {
+    Card,
+    CardContent,
+    CardFooter,
+    CardHeader,
+} from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+
+const FeatureFlagCardSkeleton = ({
+    roundTop,
+    roundBottom,
+}: {
+    roundTop: boolean;
+    roundBottom: boolean;
+}) => {
+    return (
+        <Card
+            className={cn(
+                "w-full rounded-none",
+                roundTop && "rounded-t-2xl",
+                roundBottom && "rounded-b-2xl",
+            )}
+        >
+            <CardHeader>
+                <div className="flex justify-between items-center">
+                    <div className="flex flex-col lg:flex-row justify-center items-start lg:items-center gap-2">
+                        <Skeleton className="h-8 w-40" />
+                        <Skeleton className="h-6 w-20 lg:hidden" />
+                        <Skeleton className="h-6 w-24" />
+                        <Skeleton className="h-6 w-20 hidden lg:block" />
+                    </div>
+                    <Skeleton className="h-6 w-12" />
+                </div>
+                <Skeleton className="h-5 w-full mt-2" />
+            </CardHeader>
+            <CardContent className="grid grid-cols-2 lg:flex justify-start items-center gap-1 lg:gap-2">
+                <Skeleton className="h-8 w-24" />
+                <Skeleton className="h-8 w-24" />
+                <Skeleton className="h-8 w-32" />
+                <Skeleton className="h-8 w-28" />
+            </CardContent>
+            <CardFooter className="flex justify-between items-center">
+                <div className="w-full flex flex-col justify-center items-start gap-2">
+                    <div className="w-[80%] lg:w-[60%] flex justify-between items-center">
+                        <Skeleton className="h-5 w-32" />
+                        <Skeleton className="h-5 w-10" />
+                    </div>
+                    <Skeleton className="h-2 w-[80%] lg:w-[60%]" />
+                </div>
+                <Skeleton className="h-6 w-6" />
+            </CardFooter>
+        </Card>
+    );
+};
+
+const FeatureFlagsSkeleton = () => {
+    return (
+        <div className="w-full flex flex-col">
+            {[...Array(3)].map((_, index) => (
+                <FeatureFlagCardSkeleton
+                    key={index}
+                    roundTop={index === 0}
+                    roundBottom={index === 2}
+                />
+            ))}
+        </div>
+    );
+};
+
+export default FeatureFlagsSkeleton;
diff --git a/src/components/application/workplace/skeletons/metric-cards-skeleton.tsx b/src/components/application/workplace/skeletons/metric-cards-skeleton.tsx
@@ -0,0 +1,32 @@
+import {
+    Card,
+    CardContent,
+    CardFooter,
+    CardHeader,
+} from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+const MetricCardSkeleton = () => {
+    return (
+        <>
+            {[...Array(4)].map((_, index) => (
+                <Card
+                    key={index}
+                    className="w-full h-full border border-dashed border-gray-700 bg-primary-foreground"
+                >
+                    <CardHeader>
+                        <Skeleton className="h-6 w-3/4" />
+                    </CardHeader>
+                    <CardContent>
+                        <Skeleton className="h-8 w-1/2" />
+                    </CardContent>
+                    <CardFooter>
+                        <Skeleton className="h-6 w-1/4" />
+                    </CardFooter>
+                </Card>
+            ))}
+        </>
+    );
+};
+
+export default MetricCardSkeleton;
diff --git a/src/components/application/workplace/skeletons/recent-activity-skeleton.tsx b/src/components/application/workplace/skeletons/recent-activity-skeleton.tsx
@@ -0,0 +1,20 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+const RecentActivitySkeleton = () => {
+    return (
+        <div className="w-full flex flex-col gap-2">
+            {[...Array(5)].map((_, index) => (
+                <div
+                    key={index}
+                    className="w-full bg-background p-5 rounded-2xl"
+                >
+                    <Skeleton className="h-6 w-3/4 mb-2" />
+                    <Skeleton className="h-4 w-1/2 mb-4" />
+                    <Skeleton className="h-4 w-1/4 ml-auto" />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default RecentActivitySkeleton;