fix: use LazyImage component to replace default img tags

DesterLib · Jul 26, 2024 · 0535aeb · 0535aeb
1 parent 0ac9139
commit 0535aeb
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 48 deletions.
diff --git a/src/lib/components/logic/LazyImage.tsx b/src/lib/components/logic/LazyImage.tsx
@@ -29,7 +29,7 @@ const LazyImage = ({ src, alt, className = "" }: LazyImageProps) => {
           }}
           animate={imageLoading ? "hide" : "show"}
           onLoad={imageLoaded}
-          className="object-cover h-full w-full group-hover:opacity-50 transition-opacity"
+          className="object-cover h-full w-full"
           src={src}
           alt={alt}
         />

diff --git a/src/lib/components/ui/Cards/CollectionCard.tsx b/src/lib/components/ui/Cards/CollectionCard.tsx
@@ -1,9 +1,11 @@
+import LazyImage from "../../logic/LazyImage";
+
 const CollectionCard = ({ item }: any) => {
   return (
     <div className="w-full space-y-2 group hover:cursor-pointer gradient-border relative aspect-video rounded-2xl overflow-hidden">
       <img className="h-full w-full rounded-b-2xl" src={item.backdrop} alt="" />
       <div className="absolute bottom-0 left-0 right-0 h-20 py-6 w-full overflow-hidden flex justify-center items-center bg-black/60 backdrop-blur-lg">
-        <img
+        <LazyImage
           className="object-contain group-hover:scale-110 transition-transform w-2/3 h-full brightness-0 invert"
           src={item.logo}
           alt=""

diff --git a/src/lib/components/ui/Cards/ContentCard.tsx b/src/lib/components/ui/Cards/ContentCard.tsx
@@ -5,15 +5,11 @@ import Chip from "../Chip";
 import { Link } from "react-router-dom";
 import { useState, useEffect } from "react";
 import { APP_PATHS } from "../../../../config/config";
+import LazyImage from "../../logic/LazyImage";
 
 const ContentCard = ({ item, type = "movie" }: any) => {
   const [isHover, setIsHover] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
-  const [imageLoading, setImageLoading] = useState(true);
-
-  const imageLoaded = () => {
-    setImageLoading(false);
-  };
 
   return (
     <Link to={`/${type}/${item.id}`}>
@@ -27,25 +23,7 @@ const ContentCard = ({ item, type = "movie" }: any) => {
         }`}
       >
         <div className="rounded-2xl aspect-video overflow-hidden relative bg-zinc-700">
-          <motion.img
-            initial={{ opacity: 0 }}
-            variants={{
-              show: {
-                opacity: 1,
-                transition: {
-                  delay: 0.4,
-                },
-              },
-              hide: {
-                opacity: 0,
-              },
-            }}
-            animate={imageLoading ? "hide" : "show"}
-            onLoad={imageLoaded}
-            className="object-cover h-full w-full group-hover:opacity-50 transition-opacity"
-            src={`${APP_PATHS.image}${item.backdrop_path}`}
-            alt=""
-          />
+          <LazyImage src={`${APP_PATHS.image}${item.backdrop_path}`} alt="" />
           {type === "tv" && item.number_of_seasons !== 0 && (
             <Chip className="absolute top-2 left-2">
               {item.number_of_seasons}{" "}

diff --git a/src/lib/components/ui/Cards/LibraryCard.tsx b/src/lib/components/ui/Cards/LibraryCard.tsx
@@ -5,15 +5,11 @@ import Chip from "../Chip";
 import { Link } from "react-router-dom";
 import { useState, useEffect } from "react";
 import { APP_PATHS } from "../../../../config/config";
+import LazyImage from "../../logic/LazyImage";
 
 const LibraryCard = ({ item, type = "movie", menuArgs }: any) => {
   const [isHover, setIsHover] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
-  const [imageLoading, setImageLoading] = useState(true);
-
-  const imageLoaded = () => {
-    setImageLoading(false);
-  };
 
   return (
     <Link to={`/${type}/${item.id}`}>
@@ -27,21 +23,7 @@ const LibraryCard = ({ item, type = "movie", menuArgs }: any) => {
         }`}
       >
         <div className="rounded-2xl aspect-[9/12] overflow-hidden relative bg-zinc-700">
-          <motion.img
-            initial={{ opacity: 0 }}
-            variants={{
-              show: {
-                opacity: 1,
-                transition: {
-                  delay: 0.4,
-                },
-              },
-              hide: {
-                opacity: 0,
-              },
-            }}
-            animate={imageLoading ? "hide" : "show"}
-            onLoad={imageLoaded}
+          <LazyImage
             className="object-cover h-full w-full group-hover:opacity-50 transition-opacity"
             src={`${APP_PATHS.image}${item.poster_path}`}
             alt=""

diff --git a/ts/tmp/tv.json b/ts/tmp/tv.json
@@ -2382,8 +2382,8 @@
     "status": "Ended",
     "tagline": "What is the cost of lies?",
     "type": "Miniseries",
-    "vote_average": 8.672,
-    "vote_count": 6087
+    "vote_average": 8.673,
+    "vote_count": 6090
   },
   {
     "adult": false,