(({
videoUrl,
cardId,
isActive,
- onCardClick
+ onCardClick,
+ priority = false
}) => {
return (
(({
fill
className="object-cover rounded-[var(--radius-2xl)]"
sizes="(max-width: 640px) 33vw, (max-width: 1024px) 20vw, 16vw"
- loading="lazy"
+ loading={priority ? "eager" : "lazy"}
+ priority={priority}
unoptimized
referrerPolicy="no-referrer"
onError={(e) => {
diff --git a/components/search/VideoGrid.tsx b/components/search/VideoGrid.tsx
index 3df511e..49a053f 100644
--- a/components/search/VideoGrid.tsx
+++ b/components/search/VideoGrid.tsx
@@ -89,7 +89,7 @@ export const VideoGrid = memo(function VideoGrid({ videos, className = '' }: Vid
contentVisibility: 'auto',
}}
>
- {visibleItems.map(({ video, videoUrl, cardId }) => {
+ {visibleItems.map(({ video, videoUrl, cardId }, index) => {
const isActive = activeCardId === cardId;
return (
@@ -100,6 +100,7 @@ export const VideoGrid = memo(function VideoGrid({ videos, className = '' }: Vid
cardId={cardId}
isActive={isActive}
onCardClick={handleCardClick}
+ priority={index < 10}
/>
);
})}