From 515c548acdcb2b64cb58dfa8be4f5a97307ca1e8 Mon Sep 17 00:00:00 2001 From: Alex van Andel Date: Fri, 24 Sep 2021 23:11:30 +0100 Subject: [PATCH] Fixes theme flickering on booking & availability select page (#771) --- components/booking/pages/AvailabilityPage.tsx | 40 +++++++++---------- components/booking/pages/BookingPage.tsx | 28 ++++++------- pages/success.tsx | 5 ++- 3 files changed, 37 insertions(+), 36 deletions(-) diff --git a/components/booking/pages/AvailabilityPage.tsx b/components/booking/pages/AvailabilityPage.tsx index 56abfdb7..2e681109 100644 --- a/components/booking/pages/AvailabilityPage.tsx +++ b/components/booking/pages/AvailabilityPage.tsx @@ -29,7 +29,7 @@ dayjs.extend(customParseFormat); const AvailabilityPage = ({ profile, eventType, workingHours }: AvailabilityPageProps) => { const router = useRouter(); const { rescheduleUid } = router.query; - const themeLoaded = useTheme(profile.theme); + const { isReady } = useTheme(profile.theme); const selectedDate = useMemo(() => { const dateString = asStringOrNull(router.query.date); @@ -83,20 +83,20 @@ const AvailabilityPage = ({ profile, eventType, workingHours }: AvailabilityPage }; return ( - themeLoaded && ( - <> - -
-
+ <> + +
+
+ {isReady && (
{/* mobile: details */}
@@ -214,11 +214,11 @@ const AvailabilityPage = ({ profile, eventType, workingHours }: AvailabilityPage )}
- {(!eventType.users[0] || !isBrandingHidden(eventType.users[0])) && } -
-
- - ) + )} + {(!eventType.users[0] || !isBrandingHidden(eventType.users[0])) && } +
+
+ ); function TimezoneDropdown() { diff --git a/components/booking/pages/BookingPage.tsx b/components/booking/pages/BookingPage.tsx index 9ee787c2..c78c5d7d 100644 --- a/components/booking/pages/BookingPage.tsx +++ b/components/booking/pages/BookingPage.tsx @@ -38,7 +38,7 @@ type BookingPageProps = BookPageProps | TeamBookingPageProps; const BookingPage = (props: BookingPageProps) => { const router = useRouter(); const { rescheduleUid } = router.query; - const themeLoaded = useTheme(props.profile.theme); + const { isReady } = useTheme(props.profile.theme); const date = asStringOrNull(router.query.date); const timeFormat = asStringOrNull(router.query.clock) === "24h" ? "H:mm" : "h:mma"; @@ -175,17 +175,17 @@ const BookingPage = (props: BookingPageProps) => { const bookingHandler = useCallback(_bookingHandler, []); return ( - themeLoaded && ( -
- - - {rescheduleUid ? "Reschedule" : "Confirm"} your {props.eventType.title} with {props.profile.name}{" "} - | Cal.com - - - +
+ + + {rescheduleUid ? "Reschedule" : "Confirm"} your {props.eventType.title} with {props.profile.name} | + Cal.com + + + -
+
+ {isReady && (
@@ -459,9 +459,9 @@ const BookingPage = (props: BookingPageProps) => {
-
-
- ) + )} + +
); }; diff --git a/pages/success.tsx b/pages/success.tsx index 98f44263..307f33c4 100644 --- a/pages/success.tsx +++ b/pages/success.tsx @@ -67,7 +67,7 @@ export default function Success(props: inferSSRProps) const needsConfirmation = props.eventType.requiresConfirmation && reschedule != "true"; return ( - isReady && ( + (isReady && (
)
- ) + )) || + null ); }