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