rankings page: rotate avatar while page is loading

Author: maslianok

app/by/[rankingType]/components/link-with-stop-propagation.tsx

@@ -3,14 +3,22 @@
 import Link from 'next/link';
 import { FC, ReactNode } from 'react';
 
+import { cn } from '@/lib/utils';
+
 type LinkWithStopPropagationProps = {
   children: ReactNode;
   href: string;
+  className?: string;
 };
 
-export const LinkWithStopPropagation: FC<LinkWithStopPropagationProps> = ({ children, href }) => {
+export const LinkWithStopPropagation: FC<LinkWithStopPropagationProps> = ({ children, href, className }) => {
   return (
-    <Link href={href} onClick={(event) => event.stopPropagation()} prefetch={false}>
+    <Link
+      href={href}
+      onClick={(event) => event.stopPropagation()}
+      prefetch={false}
+      className={cn('flex items-center gap-2', className)}
+    >
       {children}
     </Link>
   );

app/by/[rankingType]/components/profile-avatar.tsx

@@ -0,0 +1,27 @@
+'use client';
+import { AvatarFallback } from '@radix-ui/react-avatar';
+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;
+};
+
+export const ProfileAvatar: FC<ProfileAvatarProps> = ({ url, initials }) => {
+  const { pending } = useLinkStatus();
+
+  if (!url) {
+    return null;
+  }
+
+  return (
+    <Avatar>
+      <AvatarImage src={url} className={cn('rounded-full', { 'animate-spin': pending })} width={36} height={36} />
+      <AvatarFallback>{initials}</AvatarFallback>
+    </Avatar>
+  );
+};

app/by/[rankingType]/page.tsx

@@ -1,6 +1,5 @@
 import { Page } from '@/components/page/page';
 import { RankDelta } from '@/components/rank-delta/rank-delta';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import {
   Pagination,
   PaginationContent,
@@ -15,6 +14,7 @@ import { getInitials } from '@/utils/get-initials';
 
 import { ClickableRow } from './components/clickale-row';
 import { LinkWithStopPropagation } from './components/link-with-stop-propagation';
+import { ProfileAvatar } from './components/profile-avatar';
 
 const ITEMS_PER_PAGE = 100;
 
@@ -93,14 +93,11 @@ export default async function GlobalRanking({
                     <RankDelta current={item[rankPropName]} previous={item[`${rankPropName}M`]} />
                   </div>
                 </TableCell>
-                <TableCell className="flex items-center gap-2">
-                  {!!user?.avatarUrl && (
-                    <Avatar>
-                      <AvatarImage src={user.avatarUrl} className="rounded-full" width={36} height={36} />
-                      <AvatarFallback>{getInitials(user?.login)}</AvatarFallback>
-                    </Avatar>
-                  )}
-                  <LinkWithStopPropagation href={`/profile/${user?.login}`}>{user?.login}</LinkWithStopPropagation>
+                <TableCell>
+                  <LinkWithStopPropagation href={`/profile/${user?.login}`}>
+                    <ProfileAvatar url={user?.avatarUrl} initials={getInitials(user?.login)} />
+                    {user?.login}
+                  </LinkWithStopPropagation>
                 </TableCell>
                 <TableCell className="hidden sm:table-cell break-all whitespace-normal">{user?.location}</TableCell>
                 <TableCell className="text-right">{user?.[rankPropName]?.toLocaleString('en-US')}</TableCell>

next.config.ts

@@ -13,16 +13,16 @@ const nextConfig: NextConfig = {
   async rewrites() {
     return [
       {
-        source: "/ingest/static/:path*",
-        destination: "https://eu-assets.i.posthog.com/static/:path*",
+        source: '/ingest/static/:path*',
+        destination: 'https://eu-assets.i.posthog.com/static/:path*',
       },
       {
-        source: "/ingest/:path*",
-        destination: "https://eu.i.posthog.com/:path*",
+        source: '/ingest/:path*',
+        destination: 'https://eu.i.posthog.com/:path*',
       },
       {
-        source: "/ingest/decide",
-        destination: "https://eu.i.posthog.com/decide",
+        source: '/ingest/decide',
+        destination: 'https://eu.i.posthog.com/decide',
       },
     ];
   },