From 642270ee910b5db01f3ac4f814b41877be510ce8 Mon Sep 17 00:00:00 2001
From: Izan Gil <66965250+SrIzan10@users.noreply.github.com>
Date: Tue, 11 Nov 2025 21:51:02 +0100
Subject: [PATCH] fix: implement lazy loading through another way

---
 apps/web/src/components/app/Sidebar/Sidebar.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/app/Sidebar/Sidebar.tsx b/apps/web/src/components/app/Sidebar/Sidebar.tsx
index cbc9fcf..abee560 100644
--- a/apps/web/src/components/app/Sidebar/Sidebar.tsx
+++ b/apps/web/src/components/app/Sidebar/Sidebar.tsx
@@ -18,6 +18,7 @@ import { StreamInfoResponse, useStreams } from '@/lib/providers/StreamInfoProvid
 import { useRouter } from 'next/navigation';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useAllChannels } from '@/lib/hooks/useUserList';
+import Image from 'next/image';
 
 export default function Sidebar({ ...props }: React.ComponentProps<typeof UISidebar>) {
   const { channels: stream, isLoading } = useAllChannels(5000);
@@ -83,7 +84,17 @@ function StreamerItem({ streamer }: { streamer: StreamInfoResponse[0] }) {
       }}>
         <div className="relative">
           <Avatar className="h-9 w-9">
-            <AvatarImage src={streamer.channel.pfpUrl} alt={streamer.username} loading='lazy' />
+            <AvatarImage src={streamer.channel.pfpUrl} alt={streamer.username} asChild>
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={streamer.channel.pfpUrl}
+                alt={streamer.username}
+                width={36}
+                height={36}
+                className="rounded-full"
+                loading="lazy"
+              />
+            </AvatarImage>
             <AvatarFallback>{streamer.username}</AvatarFallback>
           </Avatar>
           {streamer.isLive && (