Routing Forms - Avoid Flicker, Fix preload of Cal Font (#3368)
* Fix flicker due to Shell on Routing Form pages. Fix font preload(unrealted to routing forms) * Update _app.tsx Co-authored-by: Omar López <zomars@me.com>pull/3364/head
parent
75b817531e
commit
55152141ee
|
@ -39,7 +39,6 @@ import ErrorBoundary from "@lib/ErrorBoundary";
|
|||
import classNames from "@lib/classNames";
|
||||
import { shouldShowOnboarding } from "@lib/getting-started";
|
||||
import useMeQuery from "@lib/hooks/useMeQuery";
|
||||
import useTheme from "@lib/hooks/useTheme";
|
||||
import { trpc } from "@lib/trpc";
|
||||
|
||||
import CustomBranding from "@components/CustomBranding";
|
||||
|
@ -461,7 +460,6 @@ type LayoutProps = {
|
|||
export default function Shell(props: LayoutProps) {
|
||||
const { loading, session } = useRedirectToLoginIfUnauthenticated(props.isPublic);
|
||||
const { isRedirectingToOnboarding } = useRedirectToOnboardingIfNeeded();
|
||||
const { isReady, Theme } = useTheme("light");
|
||||
|
||||
const query = useMeQuery();
|
||||
const user = query.data;
|
||||
|
@ -469,7 +467,7 @@ export default function Shell(props: LayoutProps) {
|
|||
const i18n = useViewerI18n();
|
||||
const { status } = useSession();
|
||||
|
||||
const isLoading = isRedirectingToOnboarding || loading || !isReady;
|
||||
const isLoading = isRedirectingToOnboarding || loading;
|
||||
|
||||
// Don't show any content till translations are loaded.
|
||||
// As they are cached infintely, this status would be loading just once for the app's lifetime until refresh
|
||||
|
@ -485,7 +483,6 @@ export default function Shell(props: LayoutProps) {
|
|||
|
||||
return (
|
||||
<KBarRoot>
|
||||
<Theme />
|
||||
<CustomBranding lightVal={user?.brandColor} darkVal={user?.darkBrandColor} />
|
||||
<MemoizedLayout plan={user?.plan} status={status} {...props} isLoading={isLoading} />
|
||||
<KBarContent />
|
||||
|
|
|
@ -8,6 +8,7 @@ import LicenseRequired from "@ee/components/LicenseRequired";
|
|||
|
||||
import AppProviders, { AppProps } from "@lib/app-providers";
|
||||
import { seoConfig } from "@lib/config/next-seo.config";
|
||||
import useTheme from "@lib/hooks/useTheme";
|
||||
|
||||
import I18nLanguageHandler from "@components/I18nLanguageHandler";
|
||||
|
||||
|
@ -27,6 +28,8 @@ import "../styles/globals.css";
|
|||
function MyApp(props: AppProps) {
|
||||
const { Component, pageProps, err, router } = props;
|
||||
let pageStatus = "200";
|
||||
const { Theme } = useTheme("light");
|
||||
|
||||
if (router.pathname === "/404") {
|
||||
pageStatus = "404";
|
||||
} else if (router.pathname === "/500") {
|
||||
|
@ -42,6 +45,7 @@ function MyApp(props: AppProps) {
|
|||
<script dangerouslySetInnerHTML={{ __html: `window.CalComPageStatus = '${pageStatus}'` }} />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
|
||||
</Head>
|
||||
<Theme />
|
||||
{Component.requiresLicense ? (
|
||||
<LicenseRequired>
|
||||
<Component {...pageProps} err={err} />
|
||||
|
|
|
@ -15,7 +15,7 @@ class MyDocument extends Document<Props> {
|
|||
return (
|
||||
<Html lang={locale} dir={dir}>
|
||||
<Head>
|
||||
<link rel="preload" href="/cal.ttf" as="font" type="font/ttf" />
|
||||
<link rel="preload" href="/cal.ttf" as="font" type="font/ttf" crossOrigin="anonymous" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
||||
|
|
|
@ -22,7 +22,7 @@ export default function RoutingNavBar({
|
|||
];
|
||||
return (
|
||||
<div className="mb-4">
|
||||
<NavTabs tabs={tabs} linkProps={{ shallow: true }} />
|
||||
<NavTabs tabs={tabs} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
"baseBranch": "origin/main",
|
||||
"pipeline": {
|
||||
"@calcom/prisma#build": {
|
||||
"cache": false,
|
||||
"dependsOn": ["post-install", "db-deploy"],
|
||||
"outputs": []
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue