fix: use correct skeleton loader (#20197)

Co-authored-by: Tushar Bhatt <95581504+TusharBhatt1@users.noreply.github.com>

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) => ({

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">