From a4a05878ef5db2d0a0d4afd26ae7bfdf4ef873ce Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Wed, 19 Mar 2025 13:37:22 +0530
Subject: [PATCH] fix: use correct skeleton loader (#20197)

Co-authored-by: Tushar Bhatt <95581504+TusharBhatt1@users.noreply.github.com>
---
 .../views/event-types-listing-view.tsx        |  7 ++-
 .../eventtypes/components/SkeletonLoader.tsx  | 44 +++++++++++++++++++
 2 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/apps/web/modules/event-types/views/event-types-listing-view.tsx b/apps/web/modules/event-types/views/event-types-listing-view.tsx
index 152d1be6e2..314c7f1e60 100644
--- a/apps/web/modules/event-types/views/event-types-listing-view.tsx
+++ b/apps/web/modules/event-types/views/event-types-listing-view.tsx
@@ -14,7 +14,10 @@ import { EventTypeEmbedButton, EventTypeEmbedDialog } from "@calcom/features/emb
 import { EventTypeDescription } from "@calcom/features/eventtypes/components";
 import CreateEventTypeDialog from "@calcom/features/eventtypes/components/CreateEventTypeDialog";
 import { DuplicateDialog } from "@calcom/features/eventtypes/components/DuplicateDialog";
-import { InfiniteSkeletonLoader } from "@calcom/features/eventtypes/components/SkeletonLoader";
+import {
+  InfiniteSkeletonLoader,
+  EventTypesSkeletonLoader,
+} from "@calcom/features/eventtypes/components/SkeletonLoader";
 import { getTeamsFiltersFromQuery } from "@calcom/features/filters/lib/getTeamsFiltersFromQuery";
 import { parseEventTypeColor } from "@calcom/lib";
 import { APP_NAME, WEBSITE_URL } from "@calcom/lib/constants";
@@ -911,7 +914,7 @@ const InfiniteScrollMain = ({
   }
 
   if (!eventTypeGroups || !profiles || status === "pending") {
-    return <InfiniteSkeletonLoader />;
+    return <EventTypesSkeletonLoader />;
   }
 
   const tabs = eventTypeGroups.map((item) => ({
diff --git a/packages/features/eventtypes/components/SkeletonLoader.tsx b/packages/features/eventtypes/components/SkeletonLoader.tsx
index fd7d92f582..b50c73130d 100644
--- a/packages/features/eventtypes/components/SkeletonLoader.tsx
+++ b/packages/features/eventtypes/components/SkeletonLoader.tsx
@@ -34,6 +34,50 @@ export function InfiniteSkeletonLoader() {
   );
 }
 
+export function TabsSkeletonLoader() {
+  return (
+    <div className="mb-4 max-w-full lg:mb-5">
+      <nav className="no-scrollbar flex space-x-0.5 overflow-x-scroll rounded-md">
+        <div className="bg-subtle inline-flex h-fit items-center justify-center whitespace-nowrap rounded-md p-2">
+          <SkeletonAvatar className="mb-1 mr-1 h-4 w-4 rounded-full" />
+          <SkeletonText className="h-4 w-16" />
+        </div>
+        <div className="inline-flex h-fit items-center justify-center whitespace-nowrap rounded-md p-2">
+          <SkeletonAvatar className="mb-1 mr-1 h-4 w-4 rounded-full" />
+          <SkeletonText className="h-4 w-16" />
+        </div>
+      </nav>
+    </div>
+  );
+}
+
+export function SearchSkeletonLoader() {
+  return (
+    <div className="max-w-64 mb-4">
+      <div className="bg-default border-default flex h-8 items-center gap-1 rounded-[10px] border px-3 py-2">
+        <div className="flex items-center justify-center">
+          <Icon name="search" className="text-subtle h-4 w-4" />
+        </div>
+        <SkeletonText className="max-w-56 h-4 w-full" />
+      </div>
+    </div>
+  );
+}
+
+export function EventTypesSkeletonLoader() {
+  return (
+    <SkeletonContainer>
+      <TabsSkeletonLoader />
+      <SearchSkeletonLoader />
+      <ul className="border-subtle bg-default divide-subtle divide-y rounded-md border sm:mx-0 sm:overflow-hidden">
+        <SkeletonItem />
+        <SkeletonItem />
+        <SkeletonItem />
+      </ul>
+    </SkeletonContainer>
+  );
+}
+
 function SkeletonItem() {
   return (
     <li className="group flex w-full items-center justify-between px-4 py-4 sm:px-6">