Lazy loads phone input (#1566)

components/booking/pages/BookingPage.tsx

@@ -7,6 +7,7 @@ import {
 } from "@heroicons/react/solid";
 import { EventTypeCustomInputType } from "@prisma/client";
 import dayjs from "dayjs";
+import dynamic from "next/dynamic";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { useEffect, useMemo, useState } from "react";
@@ -32,11 +33,13 @@ import CustomBranding from "@components/CustomBranding";
 import { EmailInput, Form } from "@components/form/fields";
 import AvatarGroup from "@components/ui/AvatarGroup";
 import { Button } from "@components/ui/Button";
-import PhoneInput from "@components/ui/form/PhoneInput";
 
 import { BookPageProps } from "../../../pages/[user]/book";
 import { TeamBookingPageProps } from "../../../pages/team/[slug]/book";
 
+/** These are like 40kb that not every user needs */
+const PhoneInput = dynamic(() => import("@components/ui/form/PhoneInput"));
+
 type BookingPageProps = BookPageProps | TeamBookingPageProps;
 
 const BookingPage = (props: BookingPageProps) => {

components/ui/form/PhoneInput.tsx

@@ -1,10 +1,11 @@
 import React from "react";
-import { default as BasePhoneInput, PhoneInputProps } from "react-phone-number-input";
+import BasePhoneInput, { Props as PhoneInputProps } from "react-phone-number-input";
 import "react-phone-number-input/style.css";
 
 import classNames from "@lib/classNames";
+import { Optional } from "@lib/types/utils";
 
-export const PhoneInput = (props: PhoneInputProps) => (
+export const PhoneInput = (props: Optional<PhoneInputProps, "onChange">) => (
   <BasePhoneInput
     {...props}
     className={classNames(

lib/types/utils.ts

@@ -1,3 +1,7 @@
+/** Makes selected props from a record non optional  */
 export type Ensure<T, K extends keyof T> = Omit<T, K> & {
   [EK in K]-?: NonNullable<T[EK]>;
 };
+
+/** Makes selected props from a record optional  */
+export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;