Skip to content

Commit

Permalink
style: add opacity animation on loading images + skeleton
Browse files Browse the repository at this point in the history
  • Loading branch information
sehnryr committed Nov 9, 2024
1 parent 9613389 commit 3c227ad
Showing 1 changed file with 13 additions and 4 deletions.
17 changes: 13 additions & 4 deletions src/pages/Browse/ExtensionBrowse.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -110,8 +110,14 @@ const GridItem = forwardRef<React.ComponentRef<"li">, GridItemProps>(
const MangaItem = (
{ manga, extensionId }: { manga: Manga; extensionId: string },
) => {
const { ref, inView } = useInView();
const [src, setSrc] = useState<string | null>(null);
const [loading, setLoading] = useState<boolean>(true);

const { ref, inView } = useInView({
onChange: (inView) => {
if (inView) setLoading(true);
},
});

const compressBlob = async (src: string, size: number) =>
await new Promise<string>((resolve) => {
Expand Down Expand Up @@ -164,12 +170,15 @@ const MangaItem = (
to={{ pathname: `/browse/${extensionId}/${manga.id}` }}
state={manga}
>
<div className="w-full aspect-[2/3]">
{inView && src && (
<div className="w-full aspect-[2/3] skeleton rounded-md">
{inView && (
<img
src={src}
alt={manga.title}
className="w-full h-full rounded-md object-cover"
onLoad={() => setLoading(false)}
className={`w-full h-full object-cover rounded-md transition-opacity duration-300 ${
loading ? "opacity-0" : "opacity-1"
}`}
/>
)}
</div>
Expand Down

0 comments on commit 3c227ad

Please sign in to comment.