mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

Fixes theme flickering on booking & availability select page (#771)

Browse source
This commit is contained in:
Alex van Andel 2021-09-24 23:11:30 +01:00 committed by GitHub
parent 727793af02
commit 515c548acd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 37 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
components/booking/pages/AvailabilityPage.tsx
View file

@ -29,7 +29,7 @@ dayjs.extend(customParseFormat);
const AvailabilityPage = ({ profile, eventType, workingHours }: AvailabilityPageProps) => { const AvailabilityPage = ({ profile, eventType, workingHours }: AvailabilityPageProps) => {
const router = useRouter(); const router = useRouter();
const { rescheduleUid } = router.query; const { rescheduleUid } = router.query;
const themeLoaded = useTheme(profile.theme); const { isReady } = useTheme(profile.theme);
const selectedDate = useMemo(() => { const selectedDate = useMemo(() => {
const dateString = asStringOrNull(router.query.date); const dateString = asStringOrNull(router.query.date);
@ -83,7 +83,6 @@ const AvailabilityPage = ({ profile, eventType, workingHours }: AvailabilityPage
}; };
return ( return (
themeLoaded && (
<> <>
<HeadSeo <HeadSeo
title={`${rescheduleUid ? "Reschedule" : ""} ${eventType.title} | ${profile.name}`} title={`${rescheduleUid ? "Reschedule" : ""} ${eventType.title} | ${profile.name}`}
@ -97,6 +96,7 @@ const AvailabilityPage = ({ profile, eventType, workingHours }: AvailabilityPage
"mx-auto my-0 md:my-24 transition-max-width ease-in-out duration-500 " + "mx-auto my-0 md:my-24 transition-max-width ease-in-out duration-500 " +
(selectedDate ? "max-w-5xl" : "max-w-3xl") (selectedDate ? "max-w-5xl" : "max-w-3xl")
}> }>
{isReady && (
<div className="bg-white border-gray-200 rounded-sm sm:dark:border-gray-600 dark:bg-gray-900 md:border"> <div className="bg-white border-gray-200 rounded-sm sm:dark:border-gray-600 dark:bg-gray-900 md:border">
{/* mobile: details */} {/* mobile: details */}
<div className="block p-4 sm:p-8 md:hidden"> <div className="block p-4 sm:p-8 md:hidden">
@ -214,11 +214,11 @@ const AvailabilityPage = ({ profile, eventType, workingHours }: AvailabilityPage
)} )}
</div> </div>
</div> </div>
)}
{(!eventType.users[0] || !isBrandingHidden(eventType.users[0])) && <PoweredByCalendso />} {(!eventType.users[0] || !isBrandingHidden(eventType.users[0])) && <PoweredByCalendso />}
</main> </main>
</div> </div>
</> </>
)
); );
function TimezoneDropdown() { function TimezoneDropdown() {

10
components/booking/pages/BookingPage.tsx
View file

@ -38,7 +38,7 @@ type BookingPageProps = BookPageProps | TeamBookingPageProps;
const BookingPage = (props: BookingPageProps) => { const BookingPage = (props: BookingPageProps) => {
const router = useRouter(); const router = useRouter();
const { rescheduleUid } = router.query; const { rescheduleUid } = router.query;
const themeLoaded = useTheme(props.profile.theme); const { isReady } = useTheme(props.profile.theme);
const date = asStringOrNull(router.query.date); const date = asStringOrNull(router.query.date);
const timeFormat = asStringOrNull(router.query.clock) === "24h" ? "H:mm" : "h:mma"; const timeFormat = asStringOrNull(router.query.clock) === "24h" ? "H:mm" : "h:mma";
@ -175,17 +175,17 @@ const BookingPage = (props: BookingPageProps) => {
const bookingHandler = useCallback(_bookingHandler, []); const bookingHandler = useCallback(_bookingHandler, []);
return ( return (
themeLoaded && (
<div> <div>
<Head> <Head>
<title> <title>
{rescheduleUid ? "Reschedule" : "Confirm"} your {props.eventType.title} with {props.profile.name}{" "} {rescheduleUid ? "Reschedule" : "Confirm"} your {props.eventType.title} with {props.profile.name} |
| Cal.com Cal.com
</title> </title>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<main className="max-w-3xl mx-auto my-0 sm:my-24"> <main className="max-w-3xl mx-auto my-0 sm:my-24">
{isReady && (
<div className="dark:bg-neutral-900 bg-white overflow-hidden border border-gray-200 dark:border-0 sm:rounded-sm"> <div className="dark:bg-neutral-900 bg-white overflow-hidden border border-gray-200 dark:border-0 sm:rounded-sm">
<div className="sm:flex px-4 py-5 sm:p-4"> <div className="sm:flex px-4 py-5 sm:p-4">
<div className="sm:w-1/2 sm:border-r sm:dark:border-black"> <div className="sm:w-1/2 sm:border-r sm:dark:border-black">
@ -459,9 +459,9 @@ const BookingPage = (props: BookingPageProps) => {
</div> </div>
</div> </div>
</div> </div>
)}
</main> </main>
</div> </div>
)
); );
}; };

5
pages/success.tsx
View file

@ -67,7 +67,7 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
const needsConfirmation = props.eventType.requiresConfirmation && reschedule != "true"; const needsConfirmation = props.eventType.requiresConfirmation && reschedule != "true";
return ( return (
isReady && ( (isReady && (
<div className="bg-neutral-50 dark:bg-neutral-900 h-screen"> <div className="bg-neutral-50 dark:bg-neutral-900 h-screen">
<HeadSeo <HeadSeo
title={`Booking ${needsConfirmation ? "Submitted" : "Confirmed"}`} title={`Booking ${needsConfirmation ? "Submitted" : "Confirmed"}`}
@ -235,7 +235,8 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
</div> </div>
</main> </main>
</div> </div>
) )) ||
null
); );
} }