From df25b179d7f296bed164b567897887c8c93c577b Mon Sep 17 00:00:00 2001
From: Nafees Nazik <84864519+G3root@users.noreply.github.com>
Date: Thu, 1 Jun 2023 17:47:11 +0530
Subject: [PATCH] fix: use skeleton loader (#9264)

---
 .../features/flags/pages/flag-listing-view.tsx   | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

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>