Add lazy loading

Author: Tibowl

components/Icon.tsx

@@ -4,20 +4,20 @@ import { SmallChar } from "../utils/types"
 import { elements, getStarColor, image, urlify, weapons } from "../utils/utils"
 import FormattedLink from "./FormattedLink"
 
-export default function Icon({ icon, className }: { icon: { name: string, icon?: string }, className?: string }) {
+export default function Icon({ icon, className, loading = "lazy" }: { icon: { name: string, icon?: string }, className?: string, loading?: "eager" | "lazy" }) {
   const src = icon.icon ?? "img/unknown.png"
 
   if (src.startsWith("img"))
     // eslint-disable-next-line @next/next/no-img-element
-    return <img alt={icon.name} src={"/" + src} className={className} width={256} height={256} onError={(e) => (e.target as HTMLImageElement).src = "/img/unknown.png"} loading="eager" />
+    return <img alt={icon.name} loading={loading} src={"/" + src} className={className} width={256} height={256} onError={(e) => (e.target as HTMLImageElement).src = "/img/unknown.png"} />
 
-  return <Image alt={icon.name} src={src} className={className} width={256} height={256} onError={(e) => (e.target as HTMLImageElement).src = "/img/unknown.png"} loading="eager" />
+  return <Image alt={icon.name} loading={loading} src={src} className={className} width={256} height={256} onError={(e) => (e.target as HTMLImageElement).src = "/img/unknown.png"} />
 }
 
-export function IconName({ name, type, urltype }: { name: string, type: string, urltype: string }) {
+export function IconName({ name, type, urltype, loading = "lazy" }: { name: string, type: string, urltype: string, loading: "eager" | "lazy" }) {
   return <FormattedLink href={`/${urltype}/${urlify(name, false)}`} className="flex flex-row align-middle items-center">
     <div className="pr-1 w-12 h-12 md:h-16 md:w-16">
-      <img src={image(type, name)} alt={name} width={256} height={256} />
+      <img src={image(type, name)} loading={loading} alt={name} width={256} height={256} />
     </div>
     <div className="font-semibold md:text-xl">{name}</div>
   </FormattedLink>

pages/materials/index.tsx

@@ -138,12 +138,12 @@ export default function Materials(props: Props & { location: string }) {
           .filter(m => starFilter == 0 || starFilter == (m.stars ?? 1))
           .filter(m => categoryFilter.some(e => m.category?.includes(e)) || m.category == undefined)
           .filter(m => typeFilter.some(e => m.type?.includes(e)) || m.type == undefined)
-          .map(mat => {
+          .map((mat, i) => {
             const color = getStarColor(mat.stars ?? 1)
 
-            return <FormattedLink key={mat.name} prefetch={false} location={props.location} href={`/materials/${urlify(mat.name, false)}`} className="bg-slate-300 dark:bg-slate-800 w-24 sm:w-28 lg:w-32 m-1 relative rounded-xl transition-all duration-100 hover:outline outline-slate-800 dark:outline-slate-300 text-bold text-sm" >
+            return <FormattedLink key={mat.name} prefetch={i < 21} location={props.location} href={`/materials/${urlify(mat.name, false)}`} className="bg-slate-300 dark:bg-slate-800 w-24 sm:w-28 lg:w-32 m-1 relative rounded-xl transition-all duration-100 hover:outline outline-slate-800 dark:outline-slate-300 text-bold text-sm" >
               <div className={`${color} rounded-t-xl h-24 sm:h-28 lg:h-32`}>
-                <Icon icon={mat} className="rounded-t-xl m-0 p-0" />
+                <Icon icon={mat} loading={i < 21 ? "eager" : "lazy"} className="rounded-t-xl m-0 p-0" />
               </div>
               <div
                 className={`flex justify-center items-center m-0 px-1 duration-200 md:text-base ${mat.name.length > 27 ? "text-xs md:text-xs" : mat.name.length > 20 ? "text-sm md:text-sm" : ""}`}