update

src/App.jsx

@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react';
+import { Sun, Moon } from 'lucide-react';
 import Timeline from './components/Timeline';
 import PhotoDetail from './components/PhotoDetail';
 import Admin from './components/Admin';
 import { fetchPhotos } from './data/photos';
-import { Settings, Sun, Moon } from 'lucide-react';
 
 function App() {
   const [view, setView] = useState(() => {
@@ -37,7 +37,11 @@ function App() {
   };
 
   useEffect(() => {
-    loadPhotos();
+    const fetchAndSet = async () => {
+      const data = await fetchPhotos();
+      setPhotos(data);
+    };
+    fetchAndSet();
   }, [view]);
 
   // Handle browser back/forward

src/components/PhotoDetail.jsx

@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { X, Camera, Aperture, Clock, Gauge, ArrowLeft, MapPin } from 'lucide-react';
 
 const PhotoDetail = ({ photo, onClose }) => {
-    const [loaded, setLoaded] = useState(false);
+    // Removed unused loaded state
     const [isFullScreen, setIsFullScreen] = useState(false);
     const [showTitle, setShowTitle] = useState(false);
 
@@ -14,14 +14,7 @@ const PhotoDetail = ({ photo, onClose }) => {
         }
     };
 
-    useEffect(() => {
-        setLoaded(true);
-        // Disable scroll on body when modal is open
-        document.body.style.overflow = 'hidden';
-        return () => {
-            document.body.style.overflow = 'auto';
-        };
-    }, []);
+    // Removed effect that set loaded state and handled body scroll
 
     if (!photo) return null;
 
@@ -36,7 +29,7 @@ const PhotoDetail = ({ photo, onClose }) => {
             zIndex: 100,
             display: 'flex',
             flexDirection: 'column',
-            opacity: loaded ? 1 : 0,
+            opacity: 1,
             transition: 'opacity 0.3s ease',
             overflowY: 'auto'
         }}