refactor: Simplify LazyImage component by removing unnecessary state and optimizing IntersectionObserver usage; enhance test setup with improved window.location mock

This commit is contained in:
defiQUG
2025-10-05 09:43:55 -07:00
parent 0b81bcb4f5
commit f64fdb561e
2 changed files with 18 additions and 10 deletions

View File

@@ -23,7 +23,6 @@ export function LazyImage({
...props
}: LazyImageProps) {
const [isLoaded, setIsLoaded] = useState(false)
const [isInView, setIsInView] = useState(priority)
const [error, setError] = useState(false)
const imgRef = useRef<HTMLImageElement>(null)
const [imageSrc, setImageSrc] = useState(priority ? src : placeholder)
@@ -35,14 +34,12 @@ export function LazyImage({
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
setIsInView(true)
setImageSrc(src)
observer.disconnect()
}
},
{ rootMargin: '50px' }
)
const currentImg = imgRef.current
if (currentImg) {
observer.observe(currentImg)

View File

@@ -58,10 +58,21 @@ Object.defineProperty(window, 'localStorage', {
// Mock window.location
delete (window as any).location
window.location = {
...window.location,
hash: '#/',
pathname: '/',
search: '',
href: 'http://localhost:3000/',
}
Object.defineProperty(window, 'location', {
writable: true,
value: {
...window.location,
hash: '#/',
pathname: '/',
get search() {
return '';
},
get href() {
return 'http://localhost:3000/';
},
assign: vi.fn(),
replace: vi.fn(),
reload: vi.fn(),
},
});