From 9de63b88341277df4d88157728647443d784d9ff Mon Sep 17 00:00:00 2001
From: "bottlenote-app[bot]"
 <289617182+bottlenote-app[bot]@users.noreply.github.com>
Date: Thu, 9 Jul 2026 08:08:00 +0900
Subject: [PATCH] fix: delay base image skeleton display

---
 src/components/ui/Display/BaseImage.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/Display/BaseImage.tsx b/src/components/ui/Display/BaseImage.tsx
index 97f23aac..fe6c17af 100644
--- a/src/components/ui/Display/BaseImage.tsx
+++ b/src/components/ui/Display/BaseImage.tsx
@@ -1,9 +1,11 @@
 'use client';
 
-import { Component, useState, type ReactNode } from 'react';
+import { Component, useEffect, useState, type ReactNode } from 'react';
 import Image from 'next/image';
 import Fallback from 'public/bottle.svg';
 
+const SKELETON_DELAY_MS = 100;
+
 class ImageErrorBoundary extends Component<
   { fallback: ReactNode; children: ReactNode },
   { hasError: boolean }
@@ -51,6 +53,22 @@ const BaseImage = ({
 }: Props) => {
   const [imgSrc, setImgSrc] = useState(src || Fallback);
   const [isLoading, setIsLoading] = useState(true);
+  const [showSkeleton, setShowSkeleton] = useState(false);
+
+  useEffect(() => {
+    if (!isLoading) {
+      setShowSkeleton(false);
+      return;
+    }
+
+    const timer = window.setTimeout(() => {
+      setShowSkeleton(true);
+    }, SKELETON_DELAY_MS);
+
+    return () => {
+      window.clearTimeout(timer);
+    };
+  }, [isLoading]);
 
   const handleError = () => {
     setImgSrc(Fallback);
@@ -86,7 +104,7 @@ const BaseImage = ({
           />
         }
       >
-        {isLoading && (
+        {showSkeleton && (
           <div className="absolute inset-0 bg-gray-200 animate-pulse" />
         )}
         <Image