From ce0c8347fb12edeff8acc549791d31561a01fdf4 Mon Sep 17 00:00:00 2001
From: Hariom Balhara <hariombalhara@gmail.com>
Date: Sat, 5 Mar 2022 20:58:24 +0530
Subject: [PATCH] [Perf Improvement] Booking Page score should be in green now
 (#2057)

* 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>
---
 apps/web/components/ui/AvatarSSR.tsx | 6 +++++-
 apps/web/pages/[user].tsx            | 4 +++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/web/components/ui/AvatarSSR.tsx b/apps/web/components/ui/AvatarSSR.tsx
index 1516d51d..ec2e32d6 100644
--- a/apps/web/components/ui/AvatarSSR.tsx
+++ b/apps/web/components/ui/AvatarSSR.tsx
@@ -1,7 +1,6 @@
 import { User } from "@prisma/client";
 
 import classNames from "@lib/classNames";
-import { defaultAvatarSrc } from "@lib/profile";
 
 export type AvatarProps = {
   user: Pick<User, "name" | "username" | "avatar"> & { emailMd5?: string };
@@ -11,6 +10,11 @@ export type AvatarProps = {
   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.
 // FIXME: title support is missing
 export function AvatarSSR(props: AvatarProps) {
diff --git a/apps/web/pages/[user].tsx b/apps/web/pages/[user].tsx
index 44cbd125..c012fb31 100644
--- a/apps/web/pages/[user].tsx
+++ b/apps/web/pages/[user].tsx
@@ -1,6 +1,5 @@
 import { ArrowRightIcon } from "@heroicons/react/outline";
 import { BadgeCheckIcon } from "@heroicons/react/solid";
-import crypto from "crypto";
 import { GetServerSidePropsContext } from "next";
 import dynamic from "next/dynamic";
 import Link from "next/link";
@@ -66,7 +65,9 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
                   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">
                   <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
+                    prefetch={false}
                     href={{
                       pathname: `/${user.username}/${type.slug}`,
                       query,
@@ -121,6 +122,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
 
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
   const ssr = await ssrInit(context);
+  const crypto = require("crypto");
 
   const username = (context.query.user as string).toLowerCase();
   const dataFetchStart = Date.now();