perf: use OptimizedImage in CatalogSlider
This commit is contained in:
@@ -6,6 +6,7 @@ import Typography from '@mui/material/Typography'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import type { CatalogSliderSlide } from '@/entities/catalog-slider'
|
||||
import { fetchCatalogSlider } from '@/entities/catalog-slider'
|
||||
import { OptimizedImage } from '@/shared/ui/OptimizedImage'
|
||||
|
||||
const AUTO_MS = 5500
|
||||
|
||||
@@ -62,20 +63,26 @@ function CatalogSliderInner({ slides }: { slides: CatalogSliderSlide[] }) {
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
component="img"
|
||||
src={slide.url}
|
||||
alt={captionText || 'Слайд каталога'}
|
||||
loading={i === 0 ? 'eager' : 'lazy'}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover',
|
||||
display: 'block',
|
||||
zIndex: 0,
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<OptimizedImage
|
||||
src={slide.url}
|
||||
alt={captionText || 'Слайд каталога'}
|
||||
priority={i === 0}
|
||||
sizes="(max-width: 600px) 320px, (max-width: 1024px) 1024px, 1600px"
|
||||
sx={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover',
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
{captionText ? (
|
||||
<Box
|
||||
sx={{
|
||||
|
||||
Reference in New Issue
Block a user