diff --git a/public/img/pages/prime/designInterior4.jpg b/public/img/pages/prime/designInterior4.jpg index cff49991..7f61ec7b 100644 Binary files a/public/img/pages/prime/designInterior4.jpg and b/public/img/pages/prime/designInterior4.jpg differ diff --git a/src/components/pages/PrimePageMobile/CategoryCounter.tsx b/src/components/pages/PrimePageMobile/CategoryCounter.tsx index 9d135ade..3b9f3772 100644 --- a/src/components/pages/PrimePageMobile/CategoryCounter.tsx +++ b/src/components/pages/PrimePageMobile/CategoryCounter.tsx @@ -13,12 +13,15 @@ import { incrementRemote, } from '@/stores/configurator-store/configurationStore'; import { Details, Ads, Remote } from '@/types/IConfigurator'; +import { useEffect, useRef, useState } from 'react'; +import LoaderIcon from '../../../../public/icons/loader.svg'; function CategoryCounter({ titleCategory, }: { titleCategory: keyof typeof categories; }) { + const [isLoading, setIsLoading] = useState(true); const configuration = useUnit($configurationStore); const arrayCounters = categories[titleCategory]; const isAdvertisementMaterials = @@ -28,6 +31,7 @@ function CategoryCounter({ Array.isArray(arrayCounters) && isAdvertisementMaterials ? arrayCounters : [arrayCounters]; + const preloaded = useRef(new Set()); function handleIncrement(index: number) { if (titleCategory === 'Детальная проработка окружения') { @@ -49,6 +53,28 @@ function CategoryCounter({ } } + useEffect(() => { + const imageSizes = ['250', '500', '1000', 'без ограничений']; + let loadedCount = 0; + + imageSizes.forEach((size) => { + if (!preloaded.current.has(size)) { + const img = new Image(); + img.src = `/img/pages/prime/details/details${size.replace( + ' ', + '_' + )}.jpg`; + img.onload = () => { + loadedCount++; + if (loadedCount === imageSizes.length) { + setIsLoading(false); + } + }; + preloaded.current.add(size); + } + }); + }, []); + return (
{counterItems.map((item, index) => { @@ -62,7 +88,7 @@ function CategoryCounter({ return (
+ {isLoading && + titleCategory === 'Детальная проработка окружения' && ( +
+
+ +
+
+ )} {typeof item === 'object' && 'name' in item && (

{item.name}

)} diff --git a/src/components/pages/PrimePageMobile/CategoryModal.tsx b/src/components/pages/PrimePageMobile/CategoryModal.tsx index ae36c583..2d182348 100644 --- a/src/components/pages/PrimePageMobile/CategoryModal.tsx +++ b/src/components/pages/PrimePageMobile/CategoryModal.tsx @@ -66,10 +66,6 @@ function CategoryModal({ }; }, []); - const handleClose = () => { - setModal(false); - }; - return (
{ + const img = new Image(); + img.src = `/img/pages/home/presentation/touch_screen.png`; + }); return (
diff --git a/src/components/pages/PrimePageMobile/VideoPrimeModal.tsx b/src/components/pages/PrimePageMobile/VideoPrimeModal.tsx index c1a57ea8..6847c877 100644 --- a/src/components/pages/PrimePageMobile/VideoPrimeModal.tsx +++ b/src/components/pages/PrimePageMobile/VideoPrimeModal.tsx @@ -1,6 +1,10 @@ import { motion } from 'framer-motion'; +import { useEffect, useState } from 'react'; +import LoaderIcon from '../../../../public/icons/loader.svg'; function VideoPrimeModal({ src }: { src: string }) { + const [buffering, setBuffering] = useState(true); + return ( setBuffering(true)} + onPlaying={() => setBuffering(false)} + className={`absolute w-[81.467vw] h-[39vw] object-cover object-bottom origin-top top-[7vw] !rotate-x-4 left-1/2 -translate-x-1/2 md:w-[58.809vw] md:h-[28vw] md:top-[5vw] `} /> +
+
+ + Загружаем видео... +
+
);