From f42d33b9a1c73fed556bbece852df121eed6e67b Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 16 Mar 2025 10:58:43 +0000
Subject: [PATCH] Improve avatar loading performance

The avatar image in the header was loading slowly. This commit aims to improve the loading performance of the avatar image.
---
 src/components/Header.tsx | 52 ++++++++++++++++++++++++++++++++-------
 1 file changed, 43 insertions(+), 9 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 6273a0d..64636e3 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,21 +1,54 @@
 
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Bell } from 'lucide-react';
 import { useAuth } from '@/contexts/auth';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Skeleton } from '@/components/ui/skeleton';
 
 const Header: React.FC = () => {
-  const {
-    user
-  } = useAuth();
+  const { user } = useAuth();
   const userName = user?.user_metadata?.username || '익명';
-  
-  return <header className="py-8">
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const [imageError, setImageError] = useState(false);
+
+  // 이미지 프리로딩 처리
+  useEffect(() => {
+    const preloadImage = new Image();
+    preloadImage.src = '/zellyy.png';
+    
+    preloadImage.onload = () => {
+      setImageLoaded(true);
+    };
+    
+    preloadImage.onerror = () => {
+      console.error('아바타 이미지 로드 실패');
+      setImageError(true);
+    };
+  }, []);
+
+  return (
+    <header className="py-8">
       <div className="flex justify-between items-center">
         <div className="flex items-center">
           <Avatar className="h-12 w-12 mr-3">
-            <AvatarImage src="/zellyy.png" alt="Zellyy" />
-            <AvatarFallback>ZY</AvatarFallback>
+            {!imageLoaded && !imageError ? (
+              <div className="h-full w-full flex items-center justify-center">
+                <Skeleton className="h-full w-full rounded-full" />
+              </div>
+            ) : (
+              <>
+                <AvatarImage 
+                  src="/zellyy.png" 
+                  alt="Zellyy" 
+                  className={imageLoaded ? 'opacity-100' : 'opacity-0'}
+                  onLoad={() => setImageLoaded(true)}
+                  onError={() => setImageError(true)}
+                />
+                {(imageError || !imageLoaded) && (
+                  <AvatarFallback delayMs={100}>ZY</AvatarFallback>
+                )}
+              </>
+            )}
           </Avatar>
           <div>
             <h1 className="text-2xl font-bold neuro-text">
@@ -28,7 +61,8 @@ const Header: React.FC = () => {
           <Bell size={20} className="text-gray-600" />
         </button>
       </div>
-    </header>;
+    </header>
+  );
 };
 
 export default Header;