From 875df036bd4999ae366455a6953e0336df802870 Mon Sep 17 00:00:00 2001
From: olexh <typicaladmsky@gmail.com>
Date: Mon, 27 May 2024 22:13:48 +0300
Subject: [PATCH] feat: add lazy loading to content-card image

---
 components/content-card/content-card.tsx | 4 +++-
 components/ui/image.tsx                  | 9 +++++----
 components/user-cover.tsx                | 2 +-
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/components/content-card/content-card.tsx b/components/content-card/content-card.tsx
index d0c7aa6c..8db10f6b 100644
--- a/components/content-card/content-card.tsx
+++ b/components/content-card/content-card.tsx
@@ -128,7 +128,9 @@ const Content = memo(
                                                 posterClassName,
                                             )}
                                             alt="Poster"
-                                            {...posterProps}
+                                            {...(posterProps
+                                                ? posterProps
+                                                : { loading: 'lazy' })}
                                         />
                                     ) : (
                                         poster
diff --git a/components/ui/image.tsx b/components/ui/image.tsx
index 5748a8e4..1e1ad03b 100644
--- a/components/ui/image.tsx
+++ b/components/ui/image.tsx
@@ -1,8 +1,9 @@
 'use client';
 
-import clsx from 'clsx';
 import NextImage, { ImageProps } from 'next/image';
-import React, { Ref, forwardRef, useState } from 'react';
+import { Ref, forwardRef, useState } from 'react';
+
+import { cn } from '@/utils/utils';
 
 interface Props extends ImageProps {
     transitionDisabled?: boolean;
@@ -17,8 +18,8 @@ const Component = (
     return (
         <NextImage
             ref={ref}
-            className={clsx(
-                loaded ? 'opacity-1' : 'opacity-0',
+            className={cn(
+                loaded ? 'opacity-100' : 'opacity-0',
                 !transitionDisabled && '!transition',
                 className,
             )}
diff --git a/components/user-cover.tsx b/components/user-cover.tsx
index 0436bcaa..163b73a7 100644
--- a/components/user-cover.tsx
+++ b/components/user-cover.tsx
@@ -26,7 +26,7 @@ const UserCover: FC<Props> = ({ username }) => {
                 className="relative size-full object-cover"
                 alt="cover"
                 fill
-                priority
+                loading="lazy"
             />
         </div>
     );