diff --git a/packages/features/flags/pages/flag-listing-view.tsx b/packages/features/flags/pages/flag-listing-view.tsx
index 0ba196bd48..a320a1f03f 100644
--- a/packages/features/flags/pages/flag-listing-view.tsx
+++ b/packages/features/flags/pages/flag-listing-view.tsx
@@ -1,17 +1,27 @@
 import { Suspense } from "react";
 
 import NoSSR from "@calcom/core/components/NoSSR";
-import { Meta } from "@calcom/ui";
-import { Loader } from "@calcom/ui/components/icon";
+import { Meta, SkeletonText, SkeletonContainer } from "@calcom/ui";
 
 import { FlagAdminList } from "../components/FlagAdminList";
 
+const SkeletonLoader = () => {
+  return (
+    <SkeletonContainer>
+      <div className="divide-subtle mt-6 mb-8 space-y-6">
+        <SkeletonText className="h-8 w-full" />
+        <SkeletonText className="h-8 w-full" />
+      </div>
+    </SkeletonContainer>
+  );
+};
+
 export const FlagListingView = () => {
   return (
     <>
       <Meta title="Feature Flags" description="Here you can toggle your Cal.com instance features." />
       <NoSSR>
-        <Suspense fallback={<Loader />}>
+        <Suspense fallback={<SkeletonLoader />}>
           <FlagAdminList />
         </Suspense>
       </NoSSR>