From cd049348bc870f8c86b93dc8007049ca35ab8abe Mon Sep 17 00:00:00 2001
From: Khairul Hidayat <khai@rul.sh>
Date: Sat, 13 Jan 2024 23:21:32 +0000
Subject: [PATCH] feat: update lazy img loader

---
 src/components/ui/LazyImage.tsx                     | 8 ++++----
 src/pages/artworks/{viewSheet.tsx => ViewSheet.tsx} | 8 ++++----
 src/pages/artworks/page.tsx                         | 2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)
 rename src/pages/artworks/{viewSheet.tsx => ViewSheet.tsx} (91%)

diff --git a/src/components/ui/LazyImage.tsx b/src/components/ui/LazyImage.tsx
index 6a6e65f..817c85a 100644
--- a/src/components/ui/LazyImage.tsx
+++ b/src/components/ui/LazyImage.tsx
@@ -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",
diff --git a/src/pages/artworks/viewSheet.tsx b/src/pages/artworks/ViewSheet.tsx
similarity index 91%
rename from src/pages/artworks/viewSheet.tsx
rename to src/pages/artworks/ViewSheet.tsx
index 92e8945..2535b93 100644
--- a/src/pages/artworks/viewSheet.tsx
+++ b/src/pages/artworks/ViewSheet.tsx
@@ -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>
diff --git a/src/pages/artworks/page.tsx b/src/pages/artworks/page.tsx
index d66657d..1baa5a1 100644
--- a/src/pages/artworks/page.tsx
+++ b/src/pages/artworks/page.tsx
@@ -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";