khairul169/furina.id
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update lazy img loader

Browse Source
This commit is contained in:
Khairul Hidayat 2024-01-13 23:21:32 +00:00
parent 032285e2e7
commit cd049348bc
3 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/ui/LazyImage.tsx
View File

@ -23,9 +23,9 @@ const LazyImage = ({
<div className={cn("relative", containerClassName)}>
<div
className={cn(
"absolute inset-0 bg-no-repeat bg-cover blur-md z-0 transition-all duration-500",
placeholderClassName,
isLoaded ? "brightness-75" : ""
"absolute inset-0 bg-no-repeat bg-cover blur-md z-0",
// isLoaded ? "brightness-75" : "",
placeholderClassName
)}
style={{ backgroundImage: `url('${lazySrc}')` }}
></div>
@ -35,7 +35,7 @@ const LazyImage = ({
<img
src={src}
loading="lazy"
onLoad={() => setTimeout(() => setLoaded(true), 50)}
onLoad={() => setTimeout(() => setLoaded(true), 200)}
className={cn(
"transition-all duration-500 relative z-[1]",
isLoaded ? "opacity-100" : "opacity-0",

8
src/pages/artworks/viewSheet.tsx → src/pages/artworks/ViewSheet.tsx
View File

@ -41,12 +41,12 @@ const ViewSheet = ({ id: viewId, isOpen, onClose }: Props) => {
className="md:rounded-t-none h-[90vh] md:h-screen"
>
{isLoading ? (
<div className="min-h-[320px] flex flex-col items-center justify-center text-center">
<div className="h-full flex flex-col items-center justify-center text-center">
<img src={loadingIllust} className="h-40 animate-bounce" />
<p className="mt-2">Please wait a moment...</p>
</div>
) : isError || !data ? (
<div className="min-h-[320px] flex flex-col items-center justify-center text-center">
<div className="h-full flex flex-col items-center justify-center text-center">
<h1 className="text-2xl">An error occured.</h1>
<p className="mt-2">Cannot load item</p>
</div>
@ -71,7 +71,7 @@ const ViewSheet = ({ id: viewId, isOpen, onClose }: Props) => {
</a>
</div>
<div className="md:w-1/3 border-t md:border-t-0 py-4 md:pt-0 px-4 lg:px-8 overflow-y-auto">
<div className="md:w-1/3 border-t md:border-t-0 py-4 pt-8 md:pt-0 px-4 lg:px-8 overflow-y-auto md:relative z-10">
<Button className="flex pl-2 mb-6" onClick={onClose}>
<ChevronLeft /> Back
</Button>
@ -104,7 +104,7 @@ const ViewSheet = ({ id: viewId, isOpen, onClose }: Props) => {
{data.artistName}
</a>
.<br />
Let me know if this artwork needs to be removed by emailing{" "}
Let me know if this artwork needs to be removed to{" "}
<a href="mailto:khai@rul.sh" className="link">
khai@rul.sh
</a>

2
src/pages/artworks/page.tsx
View File

@ -2,7 +2,7 @@ import { Howl } from "howler";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import playIcon from "@/assets/icons/play-outline.svg";
import openingSfx from "@/assets/audio/VO_JA_Furina_Opening_Treasure_Chest_02.ogg";
import ViewSheet from "./viewSheet";
import ViewSheet from "./ViewSheet";
import PageMetadata from "@/components/containers/PageMetadata";
import ArtworkListing from "./ArtworkListing";
import { useCallback } from "react";