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 ( + + + + ); +} + function SkeletonItem() { return (
  • 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 = (props) => { group={activeEventTypeGroup} bookerUrl={activeEventTypeGroup.bookerUrl} readOnly={activeEventTypeGroup.metadata.readOnly} + isPending={query.isPending} /> )}
    @@ -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 ; + return group.teamId ? ( ) : !group.profile.eventTypesLockedByOrg ? ( @@ -1570,7 +1575,7 @@ const InfiniteScrollMain = ({ } if (!eventTypeGroups || !profiles || status === "pending") { - return ; + return ; } const tabs = eventTypeGroups.map((item) => ({