From 3b1cca2505cbf2294e8164532ebed6da734b002a Mon Sep 17 00:00:00 2001 From: Nafees Nazik <84864519+G3root@users.noreply.github.com> Date: Thu, 29 Jun 2023 01:13:44 +0530 Subject: [PATCH] perf: improve event types single page loading speed (#9792) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Omar López --- .../eventtype/ManagedEventDialog.tsx | 52 ++++++++++ apps/web/pages/event-types/[type]/index.tsx | 96 ++++++++++--------- 2 files changed, 102 insertions(+), 46 deletions(-) create mode 100644 apps/web/components/eventtype/ManagedEventDialog.tsx diff --git a/apps/web/components/eventtype/ManagedEventDialog.tsx b/apps/web/components/eventtype/ManagedEventDialog.tsx new file mode 100644 index 0000000000..614ba4a200 --- /dev/null +++ b/apps/web/components/eventtype/ManagedEventDialog.tsx @@ -0,0 +1,52 @@ +import { Trans } from "next-i18next"; + +import type { ChildrenEventType } from "@calcom/features/eventtypes/components/ChildrenEventTypeSelect"; +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import { ConfirmationDialogContent, Dialog } from "@calcom/ui"; + +interface ManagedEventDialogProps { + slugExistsChildrenDialogOpen: ChildrenEventType[]; + slug: string; + onOpenChange: () => void; + isLoading: boolean; + onConfirm: (e: { preventDefault: () => void }) => void; +} + +export default function ManagedEventDialog(props: ManagedEventDialogProps) { + const { t } = useLocale(); + const { slugExistsChildrenDialogOpen, slug, onOpenChange, isLoading, onConfirm } = props; + + return ( + 0} onOpenChange={onOpenChange}> + +

+ ch.owner.name) + .slice(0, -1) + .join(", ")} ${ + slugExistsChildrenDialogOpen.length > 1 ? t("and") : "" + } ${slugExistsChildrenDialogOpen.map((ch) => ch.owner.name).slice(-1)}`, + slug, + }} + count={slugExistsChildrenDialogOpen.length} + /> +

{" "} +

{t("managed_event_dialog_clarification")}

+ + + ); +} diff --git a/apps/web/pages/event-types/[type]/index.tsx b/apps/web/pages/event-types/[type]/index.tsx index 0c463d032a..ef9189a40d 100644 --- a/apps/web/pages/event-types/[type]/index.tsx +++ b/apps/web/pages/event-types/[type]/index.tsx @@ -2,7 +2,7 @@ import { useAutoAnimate } from "@formkit/auto-animate/react"; import { zodResolver } from "@hookform/resolvers/zod"; import type { GetServerSidePropsContext } from "next"; -import { Trans } from "next-i18next"; +import dynamic from "next/dynamic"; import { useEffect, useMemo, useState } from "react"; import { useForm } from "react-hook-form"; import { z } from "zod"; @@ -29,27 +29,54 @@ import { eventTypeBookingFields } from "@calcom/prisma/zod-utils"; import type { RouterOutputs } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react"; import type { IntervalLimit, RecurringEvent } from "@calcom/types/Calendar"; -import { ConfirmationDialogContent, Dialog, Form, showToast } from "@calcom/ui"; +import { Form, showToast } from "@calcom/ui"; import { asStringOrThrow } from "@lib/asStringOrNull"; import type { inferSSRProps } from "@lib/types/inferSSRProps"; import PageWrapper from "@components/PageWrapper"; -// These can't really be moved into calcom/ui due to the fact they use infered getserverside props typings -import { EventAdvancedTab } from "@components/eventtype/EventAdvancedTab"; -import { EventAppsTab } from "@components/eventtype/EventAppsTab"; import type { AvailabilityOption } from "@components/eventtype/EventAvailabilityTab"; -import { EventAvailabilityTab } from "@components/eventtype/EventAvailabilityTab"; -import { EventLimitsTab } from "@components/eventtype/EventLimitsTab"; -import { EventRecurringTab } from "@components/eventtype/EventRecurringTab"; -import { EventSetupTab } from "@components/eventtype/EventSetupTab"; -import { EventTeamTab } from "@components/eventtype/EventTeamTab"; import { EventTypeSingleLayout } from "@components/eventtype/EventTypeSingleLayout"; -import { EventWebhooksTab } from "@components/eventtype/EventWebhooksTab"; -import EventWorkflowsTab from "@components/eventtype/EventWorkfowsTab"; import { ssrInit } from "@server/lib/ssr"; +// These can't really be moved into calcom/ui due to the fact they use infered getserverside props typings; +const EventSetupTab = dynamic(() => + import("@components/eventtype/EventSetupTab").then((mod) => mod.EventSetupTab) +); + +const EventAvailabilityTab = dynamic(() => + import("@components/eventtype/EventAvailabilityTab").then((mod) => mod.EventAvailabilityTab) +); + +const EventTeamTab = dynamic(() => + import("@components/eventtype/EventTeamTab").then((mod) => mod.EventTeamTab) +); + +const EventLimitsTab = dynamic(() => + import("@components/eventtype/EventLimitsTab").then((mod) => mod.EventLimitsTab) +); + +const EventAdvancedTab = dynamic(() => + import("@components/eventtype/EventAdvancedTab").then((mod) => mod.EventAdvancedTab) +); + +const EventRecurringTab = dynamic(() => + import("@components/eventtype/EventRecurringTab").then((mod) => mod.EventRecurringTab) +); + +const EventAppsTab = dynamic(() => + import("@components/eventtype/EventAppsTab").then((mod) => mod.EventAppsTab) +); + +const EventWorkflowsTab = dynamic(() => import("@components/eventtype/EventWorkfowsTab")); + +const EventWebhooksTab = dynamic(() => + import("@components/eventtype/EventWebhooksTab").then((mod) => mod.EventWebhooksTab) +); + +const ManagedEventTypeDialog = dynamic(() => import("@components/eventtype/ManagedEventDialog")); + export type FormValues = { title: string; eventTitle: string; @@ -472,46 +499,23 @@ const EventTypePage = (props: EventTypeSetupProps) => {
{tabMap[tabName]}
- 0} - onOpenChange={() => { - setSlugExistsChildrenDialogOpen([]); - }}> - { + setSlugExistsChildrenDialogOpen([]); + }} + slug={slug} onConfirm={(e: { preventDefault: () => void }) => { e.preventDefault(); handleSubmit(formMethods.getValues()); telemetry.event(telemetryEventTypes.slugReplacementAction); setSlugExistsChildrenDialogOpen([]); - }}> -

- ch.owner.name) - .slice(0, -1) - .join(", ")} ${ - slugExistsChildrenDialogOpen.length > 1 ? t("and") : "" - } ${slugExistsChildrenDialogOpen.map((ch) => ch.owner.name).slice(-1)}`, - slug, - }} - count={slugExistsChildrenDialogOpen.length} - /> -

{" "} -

{t("managed_event_dialog_clarification")}

- - + }} + /> + )} ); };