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

Fix/theme flicker (#1758)

Browse source 
* Avoid Theme Flicker. Render Server Side

* Add back isReady implementation

* Use shorter syntax for Tag

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Omar López <zomars@me.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
This commit is contained in:
hariombalhara 2022-02-10 16:37:14 +05:30 committed by GitHub
parent 5d0ba3dafc
commit 516ade0af5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 36 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -35,7 +35,7 @@ type Props = AvailabilityTeamPageProps | AvailabilityPageProps;
const AvailabilityPage = ({ profile, eventType, workingHours }: Props) => { const AvailabilityPage = ({ profile, eventType, workingHours }: Props) => {
const router = useRouter(); const router = useRouter();
const { rescheduleUid } = router.query; const { rescheduleUid } = router.query;
const { isReady } = useTheme(profile.theme); const { isReady, Theme } = useTheme(profile.theme);
const { t } = useLocale(); const { t } = useLocale();
const { contracts } = useContracts(); const { contracts } = useContracts();
@ -99,6 +99,7 @@ const AvailabilityPage = ({ profile, eventType, workingHours }: Props) => {
return ( return (
<> <>
<Theme />
<HeadSeo <HeadSeo
title={`${rescheduleUid ? t("reschedule") : ""} ${eventType.title} | ${profile.name}`} title={`${rescheduleUid ? t("reschedule") : ""} ${eventType.title} | ${profile.name}`}
description={`${rescheduleUid ? t("reschedule") : ""} ${eventType.title}`} description={`${rescheduleUid ? t("reschedule") : ""} ${eventType.title}`}

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

@ -115,7 +115,7 @@ const BookingPage = (props: BookingPageProps) => {
}); });
const rescheduleUid = router.query.rescheduleUid as string; const rescheduleUid = router.query.rescheduleUid as string;
const { isReady } = useTheme(props.profile.theme); const { isReady, Theme } = 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";
@ -275,6 +275,7 @@ const BookingPage = (props: BookingPageProps) => {
return ( return (
<div> <div>
<Theme />
<Head> <Head>
<title> <title>
{rescheduleUid {rescheduleUid

3
ee/components/stripe/PaymentPage.tsx
View file

@ -23,7 +23,7 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
const { t } = useLocale(); const { t } = useLocale();
const [is24h, setIs24h] = useState(false); const [is24h, setIs24h] = useState(false);
const [date, setDate] = useState(dayjs.utc(props.booking.startTime)); const [date, setDate] = useState(dayjs.utc(props.booking.startTime));
const { isReady } = useTheme(props.profile.theme); const { isReady, Theme } = useTheme(props.profile.theme);
useEffect(() => { useEffect(() => {
setDate(date.tz(localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess())); setDate(date.tz(localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess()));
@ -34,6 +34,7 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
return isReady ? ( return isReady ? (
<div className="h-screen bg-neutral-50 dark:bg-neutral-900"> <div className="h-screen bg-neutral-50 dark:bg-neutral-900">
<Theme />
<Head> <Head>
<title> <title>
{t("payment")} | {eventName} | Cal.com {t("payment")} | {eventName} | Cal.com

36
lib/hooks/useTheme.tsx
View file

@ -1,24 +1,36 @@
import { useLayoutEffect, useState } from "react"; import Head from "next/head";
import { useEffect, useState } from "react";
import { Maybe } from "@trpc/server"; import { Maybe } from "@trpc/server";
// makes sure the ui doesn't flash // makes sure the ui doesn't flash
export default function useTheme(theme?: Maybe<string>) { export default function useTheme(theme?: Maybe<string>) {
const [isReady, setIsReady] = useState(false); const [isReady, setIsReady] = useState(false);
useEffect(() => {
useLayoutEffect(() => {
if (!theme && window.matchMedia("(prefers-color-scheme: dark)").matches) {
document.documentElement.classList.add("dark");
} else if (!theme) {
/** Uncovered case */
} else {
document.documentElement.classList.add(theme);
}
setIsReady(true); setIsReady(true);
}, [theme]); }, []);
function Theme() {
const themeString = theme ? `"${theme}"` : null;
return (
<Head>
<script
dangerouslySetInnerHTML={{
__html: `(function (theme) {
if (!theme && window.matchMedia("(prefers-color-scheme: dark)").matches) {
document.documentElement.classList.add("dark");
} else if (!theme) {
/** Uncovered case */
} else {
document.documentElement.classList.add(theme);
}
})(${themeString})`,
}}></script>
</Head>
);
}
return { return {
isReady, isReady,
Theme,
}; };
} }

3
pages/[user].tsx
View file

@ -26,7 +26,7 @@ interface EvtsToVerify {
} }
export default function User(props: inferSSRProps<typeof getServerSideProps>) { export default function User(props: inferSSRProps<typeof getServerSideProps>) {
const { isReady } = useTheme(props.user.theme); const { isReady, Theme } = useTheme(props.user.theme);
const { user, eventTypes } = props; const { user, eventTypes } = props;
const { t } = useLocale(); const { t } = useLocale();
const router = useRouter(); const router = useRouter();
@ -38,6 +38,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
return ( return (
<> <>
<Theme />
<HeadSeo <HeadSeo
title={nameOrUsername} title={nameOrUsername}
description={(user.bio as string) || ""} description={(user.bio as string) || ""}

3
pages/success.tsx
View file

@ -37,7 +37,7 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
const [is24h, setIs24h] = useState(false); const [is24h, setIs24h] = useState(false);
const [date, setDate] = useState(dayjs.utc(asStringOrThrow(router.query.date))); const [date, setDate] = useState(dayjs.utc(asStringOrThrow(router.query.date)));
const { isReady } = useTheme(props.profile.theme); const { isReady, Theme } = useTheme(props.profile.theme);
useEffect(() => { useEffect(() => {
setDate(date.tz(localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess())); setDate(date.tz(localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess()));
@ -90,6 +90,7 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
return ( return (
(isReady && ( (isReady && (
<div className="h-screen bg-neutral-100 dark:bg-neutral-900" data-testid="success-page"> <div className="h-screen bg-neutral-100 dark:bg-neutral-900" data-testid="success-page">
<Theme />
<HeadSeo <HeadSeo
title={needsConfirmation ? t("booking_submitted") : t("booking_confirmed")} title={needsConfirmation ? t("booking_submitted") : t("booking_confirmed")}
description={needsConfirmation ? t("booking_submitted") : t("booking_confirmed")} description={needsConfirmation ? t("booking_submitted") : t("booking_confirmed")}

3
pages/team/[slug].tsx
View file

@ -23,7 +23,7 @@ import Text from "@components/ui/Text";
export type TeamPageProps = inferSSRProps<typeof getServerSideProps>; export type TeamPageProps = inferSSRProps<typeof getServerSideProps>;
function TeamPage({ team }: TeamPageProps) { function TeamPage({ team }: TeamPageProps) {
const { isReady } = useTheme(); const { isReady, Theme } = useTheme();
const showMembers = useToggleQuery("members"); const showMembers = useToggleQuery("members");
const { t } = useLocale(); const { t } = useLocale();
@ -63,6 +63,7 @@ function TeamPage({ team }: TeamPageProps) {
return ( return (
isReady && ( isReady && (
<div> <div>
<Theme />
<HeadSeo title={teamName} description={teamName} /> <HeadSeo title={teamName} description={teamName} />
<div className="px-4 pt-24 pb-12"> <div className="px-4 pt-24 pb-12">
<div className="mx-auto mb-8 max-w-96 text-center"> <div className="mx-auto mb-8 max-w-96 text-center">