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("relative", containerClassName)}>
<div <div
className={cn( className={cn(
"absolute inset-0 bg-no-repeat bg-cover blur-md z-0 transition-all duration-500", "absolute inset-0 bg-no-repeat bg-cover blur-md z-0",
placeholderClassName, // isLoaded ? "brightness-75" : "",
isLoaded ? "brightness-75" : "" placeholderClassName
)} )}
style={{ backgroundImage: `url('${lazySrc}')` }} style={{ backgroundImage: `url('${lazySrc}')` }}
></div> ></div>
@ -35,7 +35,7 @@ const LazyImage = ({
<img <img
src={src} src={src}
loading="lazy" loading="lazy"
onLoad={() => setTimeout(() => setLoaded(true), 50)} onLoad={() => setTimeout(() => setLoaded(true), 200)}
className={cn( className={cn(
"transition-all duration-500 relative z-[1]", "transition-all duration-500 relative z-[1]",
isLoaded ? "opacity-100" : "opacity-0", 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" className="md:rounded-t-none h-[90vh] md:h-screen"
> >
{isLoading ? ( {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" /> <img src={loadingIllust} className="h-40 animate-bounce" />
<p className="mt-2">Please wait a moment...</p> <p className="mt-2">Please wait a moment...</p>
</div> </div>
) : isError || !data ? ( ) : 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> <h1 className="text-2xl">An error occured.</h1>
<p className="mt-2">Cannot load item</p> <p className="mt-2">Cannot load item</p>
</div> </div>
@ -71,7 +71,7 @@ const ViewSheet = ({ id: viewId, isOpen, onClose }: Props) => {
</a> </a>
</div> </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}> <Button className="flex pl-2 mb-6" onClick={onClose}>
<ChevronLeft /> Back <ChevronLeft /> Back
</Button> </Button>
@ -104,7 +104,7 @@ const ViewSheet = ({ id: viewId, isOpen, onClose }: Props) => {
{data.artistName} {data.artistName}
</a> </a>
.<br /> .<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"> <a href="mailto:khai@rul.sh" className="link">
khai@rul.sh khai@rul.sh
</a> </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 { useLocation, useNavigate, useParams } from "react-router-dom";
import playIcon from "@/assets/icons/play-outline.svg"; import playIcon from "@/assets/icons/play-outline.svg";
import openingSfx from "@/assets/audio/VO_JA_Furina_Opening_Treasure_Chest_02.ogg"; 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 PageMetadata from "@/components/containers/PageMetadata";
import ArtworkListing from "./ArtworkListing"; import ArtworkListing from "./ArtworkListing";
import { useCallback } from "react"; import { useCallback } from "react";