fix: use correct skeleton loader (#20197)

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

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