Skip to content

Commit

Permalink
feat: use lazy loading/unloading for images
Browse files Browse the repository at this point in the history
  • Loading branch information
sehnryr committed Nov 9, 2024
1 parent c05145c commit f8853b9
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 17 deletions.
1 change: 1 addition & 0 deletions deno.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
"react-dom": "npm:[email protected]",
"react-icons": "npm:[email protected]",
"react-infinite-scroll-hook": "npm:[email protected]",
"react-intersection-observer": "npm:[email protected]",
"react-router-dom": "npm:[email protected]",
"tailwindcss": "npm:[email protected]",
"vite": "npm:[email protected]",
Expand Down
10 changes: 10 additions & 0 deletions deno.lock

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

44 changes: 27 additions & 17 deletions src/pages/Browse/ExtensionBrowse.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { forwardRef, useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
import useInfiniteScroll from "react-infinite-scroll-hook";
import { useInView } from "react-intersection-observer";

import { Extension } from "../../types/extension.ts";
import { Manga } from "../../types/manga.ts";
Expand Down Expand Up @@ -108,20 +109,29 @@ const GridItem = forwardRef<React.ComponentRef<"li">, GridItemProps>(

const MangaItem = (
{ manga, extensionId }: { manga: Manga; extensionId: string },
) => (
<>
<Link
to={{ pathname: `/browse/${extensionId}/${manga.id}` }}
state={manga}
>
<img
src={manga.coverUrl}
alt={manga.title}
className="aspect-[2/3] rounded-md object-cover"
/>
<p className="mx-1 mt-1 line-clamp-2 text-sm font-bold">
{manga.title}
</p>
</Link>
</>
);
) => {
const { ref, inView } = useInView();

return (
<>
<Link
ref={ref}
to={{ pathname: `/browse/${extensionId}/${manga.id}` }}
state={manga}
>
<div className="w-full aspect-[2/3]">
{inView && (
<img
src={manga.coverUrl}
alt={manga.title}
className="h-full rounded-md object-cover"
/>
)}
</div>
<p className="mx-1 mt-1 line-clamp-2 text-sm font-bold">
{manga.title}
</p>
</Link>
</>
);
};

0 comments on commit f8853b9

Please sign in to comment.