feat: add lazy loading to content-card image

hikka-io · May 27, 2024 · 875df03 · 875df03
1 parent 215c6a7
commit 875df03
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git 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
@@ -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
@@ -26,7 +26,7 @@ const UserCover: FC<Props> = ({ username }) => {
                 className="relative size-full object-cover"
                 alt="cover"
                 fill
-                priority
+                loading="lazy"
             />
         </div>
     );