optimize avatars loading

maslianok · maslianok · commit 1ce75f073045 · 2025-09-03T23:06:31.000+02:00
diff --git a/app/components/insight-text.tsx b/app/components/insight-text.tsx
@@ -16,7 +16,11 @@ const InsightText: React.FC<InsightTextProps> = ({ insight }) => {
     if (segment.type === SegmentType.Mention) {
       const githubHandle = entities?.mentions[segment.entityKey!]?.handles?.github;
       return (
-        <Link key={segment.text} href={`/profile/${githubHandle}`} className="text-foreground hover:text-foreground/80">
+        <Link
+          key={`${segment.type}-${segment.entityKey}`}
+          href={`/profile/${githubHandle}`}
+          className="text-foreground hover:text-foreground/80"
+        >
           {segment.text}
         </Link>
       );
@@ -25,7 +29,11 @@ const InsightText: React.FC<InsightTextProps> = ({ insight }) => {
     if (segment.type === SegmentType.Link) {
       const link = entities?.links[segment.entityKey!]?.url;
       return (
-        <Link key={segment.text} href={link} className="text-foreground hover:text-foreground/80">
+        <Link
+          key={`${segment.type}-${segment.entityKey}`}
+          href={link}
+          className="text-foreground hover:text-foreground/80"
+        >
           {segment.text}
         </Link>
       );
diff --git a/app/components/messenger-integration-section.tsx b/app/components/messenger-integration-section.tsx
@@ -1,5 +1,4 @@
-import { FaWhatsapp } from 'react-icons/fa';
-import { FaTelegramPlane } from 'react-icons/fa';
+import { FaWhatsapp, FaTelegramPlane } from 'react-icons/fa';
 
 import { Button } from '@/components/ui/button';
 
diff --git a/app/languages/[country]/[orderBy]/[page]/components/language-card.tsx b/app/languages/[country]/[orderBy]/[page]/components/language-card.tsx
@@ -60,7 +60,7 @@ export const LanguageCard: FC<LanguageCardProps> = ({ data, country }) => {
             <UserCard
               login={topUser?.login}
               avatarUrl={topUser?.avatarUrl}
-              avatarClassName="size-5"
+              size={20}
               className="font-semibold text-sm"
             />
           }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -23,6 +23,9 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: LayoutProps<'/'>) {
   return (
     <html lang="en" suppressHydrationWarning>
+      <head>
+        <link rel="preconnect" href="https://avatars.githubusercontent.com" crossOrigin="anonymous" />
+      </head>
       <body
         className="antialiased"
         style={{ ...inter.style, fontFamily: `'Twemoji Country Flags', ${inter.style.fontFamily}` }}
diff --git a/app/profile/[login]/components/layout-left-column.tsx b/app/profile/[login]/components/layout-left-column.tsx
@@ -4,7 +4,6 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { FC, ReactNode } from 'react';
 
-import { Avatar, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { cn } from '@/lib/utils';
@@ -30,6 +29,8 @@ type LayoutLeftColumnProps = Readonly<{
   className?: string;
 }>;
 
+const AVATAR_SIZE = 288;
+
 export const LayoutLeftColumn: FC<LayoutLeftColumnProps> = ({ user, children, className }) => {
   const showContact = !!user?.email || !!user?.websiteUrl || !!user?.socialAccounts?.nodes?.length;
 
@@ -42,9 +43,15 @@ export const LayoutLeftColumn: FC<LayoutLeftColumnProps> = ({ user, children, cl
       <LeftColumnContainer>
         <AvatarAndNameContainer>
           <AvatarContainer>
-            <Avatar className="w-full h-full rounded-full" asChild>
-              <AvatarImage src={user.avatarUrl!} />
-            </Avatar>
+            <Image
+              src={`${user.avatarUrl}`}
+              alt={`${user.login} avatar`}
+              className="rounded-full w-full h-full"
+              width={AVATAR_SIZE}
+              height={AVATAR_SIZE}
+              loading="eager"
+              fetchPriority="high"
+            />
           </AvatarContainer>
           <NameContainer>
             <h1 className="font-semibold text-2xl" translate="no">
diff --git a/components/country-card/components/country-card-stat.tsx b/components/country-card/components/country-card-stat.tsx
@@ -35,7 +35,7 @@ export const CountryCardStat: FC<CountryCardStatProps> = ({ Icon, value, label,
         <div className="flex flex-col gap-1 text-xs items-center max-w-full overflow-hidden">
           <span>{topUserLabel}</span>
           <div className="font-semibold max-w-full">
-            <UserCard login={topUser?.login} avatarUrl={topUser?.avatarUrl} avatarClassName="size-5" />
+            <UserCard login={topUser?.login} avatarUrl={topUser?.avatarUrl} size={20} />
           </div>
         </div>
       )}
diff --git a/components/signin-button/signin-button.tsx b/components/signin-button/signin-button.tsx
@@ -1,15 +1,15 @@
 'use client';
-import { Avatar, AvatarFallback, AvatarImage } from '@radix-ui/react-avatar';
 import { LogIn } from 'lucide-react';
+import Image from 'next/image';
 import Link from 'next/link';
 import { signIn, signOut, useSession } from 'next-auth/react';
 
-import { getInitials } from '@/utils/get-initials';
-
 import { Button } from '../ui/button';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../ui/dialog';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui/dropdown-menu';
 
+const AVATAR_SIZE = 32;
+
 export default function SigninButton() {
   const { data: session } = useSession();
 
@@ -18,10 +18,15 @@ export default function SigninButton() {
       {session ? (
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Avatar className="cursor-pointer">
-              <AvatarImage src={session.user.image!} className="rounded-full" width={32} height={32} />
-              <AvatarFallback>{getInitials(session.user.name!)}</AvatarFallback>
-            </Avatar>
+            <Image
+              src={`${session.user.image}&s=${AVATAR_SIZE * 2}`}
+              alt={`${session.user.name} avatar`}
+              className="rounded-full"
+              width={AVATAR_SIZE}
+              height={AVATAR_SIZE}
+              loading="lazy"
+              decoding="async"
+            />
           </DropdownMenuTrigger>
           <DropdownMenuContent>
             <DropdownMenuItem asChild>
diff --git a/components/theme-provider/theme-provider.tsx b/components/theme-provider/theme-provider.tsx
@@ -3,6 +3,6 @@
 import { ThemeProvider as NextThemesProvider } from 'next-themes';
 import { ComponentProps } from 'react';
 
-export function ThemeProvider({ children, ...props }: ComponentProps<typeof NextThemesProvider>) {
+export function ThemeProvider({ children, ...props }: Readonly<ComponentProps<typeof NextThemesProvider>>) {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 }
diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx
diff --git a/components/user-card/components/profile-avatar.tsx b/components/user-card/components/profile-avatar.tsx
@@ -1,28 +1,35 @@
 'use client';
-import { AvatarFallback } from '@radix-ui/react-avatar';
+import Image from 'next/image';
 import { useLinkStatus } from 'next/link';
 import { FC } from 'react';
 
-import { Avatar, AvatarImage } from '@/components/ui/avatar';
 import { cn } from '@/lib/utils';
 
 type ProfileAvatarProps = {
   url?: string | null;
-  initials?: string | null;
-  className?: string;
+  login?: string;
+  size?: number;
 };
 
-export const ProfileAvatar: FC<ProfileAvatarProps> = ({ url, initials, className }) => {
+export const ProfileAvatar: FC<ProfileAvatarProps> = ({ url, login, size = 32 }) => {
   const { pending } = useLinkStatus();
 
   if (!url) {
     return null;
   }
 
+  // for retina displays
+  const sourceSize = size * 2;
+
   return (
-    <Avatar className={className}>
-      <AvatarImage src={url} className={cn('rounded-full', { 'animate-spin': pending })} />
-      <AvatarFallback className="flex items-center justify-center">{initials}</AvatarFallback>
-    </Avatar>
+    <Image
+      src={`${url}&s=${sourceSize}`}
+      alt={`${login} avatar`}
+      className={cn('rounded-full', { 'animate-spin': pending })}
+      width={size}
+      height={size}
+      loading="lazy"
+      decoding="async"
+    />
   );
 };
diff --git a/components/user-card/user-card.tsx b/components/user-card/user-card.tsx
@@ -1,19 +1,17 @@
 import { FC } from 'react';
 
-import { getInitials } from '@/utils/get-initials';
-
 import { LinkWithStopPropagation } from './components/link-with-stop-propagation';
 import { ProfileAvatar } from './components/profile-avatar';
 import { UserCardProps } from './user-card.types';
 
-export const UserCard: FC<UserCardProps> = ({ login, avatarUrl, avatarClassName, className }) => {
+export const UserCard: FC<UserCardProps> = ({ login, avatarUrl, size, className }) => {
   if (!login) {
     return null;
   }
 
   return (
     <LinkWithStopPropagation href={`/profile/${login}`} className={className}>
-      <ProfileAvatar url={avatarUrl} initials={getInitials(login)} className={avatarClassName} />
+      <ProfileAvatar url={avatarUrl} login={login} size={size} />
       <span translate="no">{login}</span>
     </LinkWithStopPropagation>
   );
diff --git a/components/user-card/user-card.types.tsx b/components/user-card/user-card.types.tsx
@@ -1,6 +1,6 @@
 export type UserCardProps = {
   login?: string;
   avatarUrl?: string | null;
-  avatarClassName?: string;
+  size?: number;
   className?: string;
 };
diff --git a/next.config.ts b/next.config.ts
@@ -11,12 +11,9 @@ const nextConfig: NextConfig = {
     cacheLife: isDev ? { hours: { stale: 0, revalidate: 1, expire: 1 } } : undefined,
   },
   images: {
-    remotePatterns: [
-      {
-        protocol: 'https',
-        hostname: 'avatars.githubusercontent.com',
-      },
-    ],
+    remotePatterns: [{ protocol: 'https', hostname: 'avatars.githubusercontent.com' }],
+    imageSizes: [16, 20, 24, 32, 40],
+    minimumCacheTTL: 60 * 60 * 24,
   },
   async rewrites() {
     return [
diff --git a/package.json b/package.json
@@ -15,6 +15,18 @@
     "figma:icons": "tsc lib/figma/download-icons.ts --outDir dist && dotenv -e .env.local node dist/download-icons.js && pnpm run icons",
     "indexnow": "dotenv -e .env.local -- tsx lib/indexnow/indexnow-submit.ts"
   },
+  "browserslist": {
+    "production": [
+      "supports es6-module",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
   "dependencies": {
     "@auth/mongodb-adapter": "^3.10.0",
     "@hookform/resolvers": "^5.2.0",
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
-    "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "ES2022"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,

Original file line number	Diff line number	Diff line change
`@@ -60,7 +60,7 @@ export const LanguageCard: FC<LanguageCardProps> = ({ data, country }) => {`
`60`	`60`	`<UserCard`
`61`	`61`	`login={topUser?.login}`
`62`	`62`	`avatarUrl={topUser?.avatarUrl}`
`63`		`- avatarClassName="size-5"`
	`63`	`+ size={20}`
`64`	`64`	`className="font-semibold text-sm"`
`65`	`65`	`/>`
`66`	`66`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,6 @@`
`3`	`3`	`import { ThemeProvider as NextThemesProvider } from 'next-themes';`
`4`	`4`	`import { ComponentProps } from 'react';`
`5`	`5`
`6`		`-export function ThemeProvider({ children, ...props }: ComponentProps<typeof NextThemesProvider>) {`
	`6`	`+export function ThemeProvider({ children, ...props }: Readonly<ComponentProps<typeof NextThemesProvider>>) {`
`7`	`7`	`return <NextThemesProvider {...props}>{children}</NextThemesProvider>;`
`8`	`8`	`}`