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

[Perf Improvement] Booking Page score should be in green now (#2057)

Browse source 
* Avoid crypto to land in the browser

* Avoid prefetching as it has Crypto code bundled in AvatarGroup

* Use md5 directly if avatar not available

Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
This commit is contained in:
Hariom Balhara 2022-03-05 20:58:24 +05:30 committed by GitHub
parent 91b732ff1c
commit ce0c8347fb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
apps/web/components/ui/AvatarSSR.tsx
View file

@ -1,7 +1,6 @@
import { User } from "@prisma/client"; import { User } from "@prisma/client";
import classNames from "@lib/classNames"; import classNames from "@lib/classNames";
import { defaultAvatarSrc } from "@lib/profile";
export type AvatarProps = { export type AvatarProps = {
user: Pick<User, "name" | "username" | "avatar"> & { emailMd5?: string }; user: Pick<User, "name" | "username" | "avatar"> & { emailMd5?: string };
@ -11,6 +10,11 @@ export type AvatarProps = {
alt: string; alt: string;
}; };
// defaultAvatarSrc from profile.tsx can't be used as it imports crypto
function defaultAvatarSrc({ md5 }) {
return `https://www.gravatar.com/avatar/${md5}?s=160&d=identicon&r=PG`;
}
// An SSR Supported version of Avatar component. // An SSR Supported version of Avatar component.
// FIXME: title support is missing // FIXME: title support is missing
export function AvatarSSR(props: AvatarProps) { export function AvatarSSR(props: AvatarProps) {

4
apps/web/pages/[user].tsx
View file

@ -1,6 +1,5 @@
import { ArrowRightIcon } from "@heroicons/react/outline"; import { ArrowRightIcon } from "@heroicons/react/outline";
import { BadgeCheckIcon } from "@heroicons/react/solid"; import { BadgeCheckIcon } from "@heroicons/react/solid";
import crypto from "crypto";
import { GetServerSidePropsContext } from "next"; import { GetServerSidePropsContext } from "next";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import Link from "next/link"; import Link from "next/link";
@ -66,7 +65,9 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
style={{ display: "flex" }} style={{ display: "flex" }}
className="group hover:border-brand relative rounded-sm border border-neutral-200 bg-white hover:bg-gray-50 dark:border-0 dark:bg-neutral-900 dark:hover:border-neutral-600"> className="group hover:border-brand relative rounded-sm border border-neutral-200 bg-white hover:bg-gray-50 dark:border-0 dark:bg-neutral-900 dark:hover:border-neutral-600">
<ArrowRightIcon className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" /> <ArrowRightIcon className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
{/* Don't prefetch till the time we drop the amount of javascript in [user][type] page which is impacting score for [user] page */}
<Link <Link
prefetch={false}
href={{ href={{
pathname: `/${user.username}/${type.slug}`, pathname: `/${user.username}/${type.slug}`,
query, query,
@ -121,6 +122,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
export const getServerSideProps = async (context: GetServerSidePropsContext) => { export const getServerSideProps = async (context: GetServerSidePropsContext) => {
const ssr = await ssrInit(context); const ssr = await ssrInit(context);
const crypto = require("crypto");
const username = (context.query.user as string).toLowerCase(); const username = (context.query.user as string).toLowerCase();
const dataFetchStart = Date.now(); const dataFetchStart = Date.now();