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 & { 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) { 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"> + {/* Don't prefetch till the time we drop the amount of javascript in [user][type] page which is impacting score for [user] page */} ) { 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();