From 3ab735ba9c265826c65b3030450f839ba97b9c3f Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Wed, 7 Aug 2024 15:13:14 +0530
Subject: [PATCH] fix: display skeleton loader (#16114)

* fix: display loader

* fix: updated skelton loader
---
 apps/web/components/eventtype/SkeletonLoader.tsx     | 12 ++++++++++++
 .../event-types/views/event-types-listing-view.tsx   |  9 +++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/apps/web/components/eventtype/SkeletonLoader.tsx b/apps/web/components/eventtype/SkeletonLoader.tsx
index 73fda98a78..fd7d92f582 100644
--- a/apps/web/components/eventtype/SkeletonLoader.tsx
+++ b/apps/web/components/eventtype/SkeletonLoader.tsx
@@ -22,6 +22,18 @@ function SkeletonLoader() {
 
 export default SkeletonLoader;
 
+export function InfiniteSkeletonLoader() {
+  return (
+    <SkeletonContainer>
+      <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">
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 8d2fa94c5b..e4f455d30f 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
@@ -64,7 +64,7 @@ import type { AppProps } from "@lib/app-providers";
 import { useInViewObserver } from "@lib/hooks/useInViewObserver";
 import useMeQuery from "@lib/hooks/useMeQuery";
 
-import SkeletonLoader from "@components/eventtype/SkeletonLoader";
+import SkeletonLoader, { InfiniteSkeletonLoader } from "@components/eventtype/SkeletonLoader";
 
 type GetUserEventGroupsResponse = RouterOutputs["viewer"]["eventTypes"]["getUserEventGroups"];
 type GetEventTypesFromGroupsResponse = RouterOutputs["viewer"]["eventTypes"]["getEventTypesFromGroup"];
@@ -105,6 +105,7 @@ interface InfiniteEventTypeListProps {
   bookerUrl: string | null;
   pages: { nextCursor: number | undefined; eventTypes: InfiniteEventType[] }[] | undefined;
   lockedByOrg?: boolean;
+  isPending?: boolean;
 }
 
 interface EventTypeListProps {
@@ -186,6 +187,7 @@ const InfiniteMobileTeamsTab: FC<InfiniteMobileTeamsTabProps> = (props) => {
           group={activeEventTypeGroup}
           bookerUrl={activeEventTypeGroup.bookerUrl}
           readOnly={activeEventTypeGroup.metadata.readOnly}
+          isPending={query.isPending}
         />
       )}
       <div className="text-default p-4 text-center" ref={buttonInView.ref}>
@@ -785,6 +787,7 @@ export const InfiniteEventTypeList = ({
   pages,
   bookerUrl,
   lockedByOrg,
+  isPending,
 }: InfiniteEventTypeListProps): JSX.Element => {
   const { t } = useLocale();
   const router = useRouter();
@@ -965,6 +968,8 @@ export const InfiniteEventTypeList = ({
   }, []);
 
   if (!pages?.[0]?.eventTypes?.length) {
+    if (isPending) return <InfiniteSkeletonLoader />;
+
     return group.teamId ? (
       <EmptyEventTypeList group={group} />
     ) : !group.profile.eventTypesLockedByOrg ? (
@@ -1570,7 +1575,7 @@ const InfiniteScrollMain = ({
   }
 
   if (!eventTypeGroups || !profiles || status === "pending") {
-    return <SkeletonLoader />;
+    return <InfiniteSkeletonLoader />;
   }
 
   const tabs = eventTypeGroups.map((item) => ({