From 35ddb17247d2489786333b6ddc744c6340c8994a Mon Sep 17 00:00:00 2001
From: Kirill <mpak8501@yandex.ru>
Date: Fri, 15 May 2026 13:29:58 +0500
Subject: [PATCH] perf: use OptimizedImage in CatalogSlider

---
 .../catalog-slider/ui/CatalogSlider.tsx       | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/client/src/widgets/catalog-slider/ui/CatalogSlider.tsx b/client/src/widgets/catalog-slider/ui/CatalogSlider.tsx
index 23e2658..77d0a0a 100644
--- a/client/src/widgets/catalog-slider/ui/CatalogSlider.tsx
+++ b/client/src/widgets/catalog-slider/ui/CatalogSlider.tsx
@@ -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={{