Fix leaderboard sticky image loading issue

src/components/AddressAvatar.tsx

@@ -5,7 +5,7 @@ import { getIpfsContentUrl } from '@/utils/ipfs'
 import { getUserProfileLink } from '@/utils/links'
 import { decodeProfileSource } from '@/utils/profile'
 import dynamic from 'next/dynamic'
-import Image from 'next/image'
+import Image, { ImageProps } from 'next/image'
 import {
   ComponentProps,
   ComponentPropsWithoutRef,
@@ -31,11 +31,18 @@ export type AddressAvatarProps = ComponentProps<'div'> & {
   address: string
   asLink?: boolean
   forceProfileSource?: ForceProfileSource
+  loading?: ImageProps['loading']
 }
 
 const AddressAvatar = forwardRef<HTMLDivElement, AddressAvatarProps>(
   function AddressAvatar(
-    { address, forceProfileSource, asLink, ...props }: AddressAvatarProps,
+    {
+      address,
+      forceProfileSource,
+      asLink,
+      loading,
+      ...props
+    }: AddressAvatarProps,
     ref
   ) {
     const backgroundColor = useRandomColor(address)
@@ -114,6 +121,7 @@ const AddressAvatar = forwardRef<HTMLDivElement, AddressAvatarProps>(
           >
             <div className='relative h-full w-full'>
               <Image
+                loading={loading}
                 width={500}
                 height={500}
                 className={cx(

src/modules/telegram/StatsPage/LeaderboardTable.tsx

@@ -12,7 +12,7 @@ import {
 import { LeaderboardDataPeriod } from '@/services/datahub/leaderboard/types'
 import { useMyMainAddress } from '@/stores/my-account'
 import { cx, mutedTextColorStyles } from '@/utils/class-names'
-import Image from 'next/image'
+import Image, { ImageProps } from 'next/image'
 import { useMemo } from 'react'
 
 const TABLE_LIMIT = 100
@@ -82,6 +82,7 @@ const LeaderboardTable = ({ period }: LeaderboardTableProps) => {
           rank: userStats.rank!,
           'user-role': (
             <UserPreview
+              loading='eager'
               address={userStats.address}
               desc={<UserReward reward={userStats.reward} />}
             />
@@ -163,10 +164,18 @@ type UserPreviewProps = {
   desc?: React.ReactNode
 }
 
-export const UserPreview = ({ address, desc }: UserPreviewProps) => {
+export const UserPreview = ({
+  address,
+  desc,
+  loading,
+}: UserPreviewProps & { loading?: ImageProps['loading'] }) => {
   return (
     <div className='flex items-center gap-2'>
-      <AddressAvatar address={address} className='h-[38px] w-[38px]' />
+      <AddressAvatar
+        address={address}
+        className='h-[38px] w-[38px]'
+        loading={loading}
+      />
       <div className='flex flex-col gap-2'>
         <Name
           address={address}