maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Hariom Balhara 2022-07-15 11:17:37 +05:30 committed by GitHub
parent 75b817531e
commit 55152141ee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/web/components/Shell.tsx
View File

@ -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 />

4
apps/web/pages/_app.tsx
View File

@ -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} />

2
apps/web/pages/_document.tsx
View File

@ -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" />

2
packages/app-store/ee/routing_forms/components/RoutingNavBar.tsx
View File

@ -22,7 +22,7 @@ export default function RoutingNavBar({
];
return (
<div className="mb-4">
<NavTabs tabs={tabs} linkProps={{ shallow: true }} />
<NavTabs tabs={tabs} />
</div>
);
}

1
turbo.json
View File

@ -3,6 +3,7 @@
"baseBranch": "origin/main",
"pipeline": {
"@calcom/prisma#build": {
"cache": false,
"dependsOn": ["post-install", "db-deploy"],
"outputs": []
},