enhancement_306_header_logo_skeleton

src/shared/ui/logo/Logo.tsx

@@ -4,12 +4,8 @@ import { Routes } from '@/shared/config/routerConfig/routes'
 import Link from '@/shared/ui/Link/Link'
 
 import styles from './logo.module.scss'
+import { TLogoProps } from './model/types/types'
 
-type TLogoProps = {
-  image: string
-  width: string
-  height: string
-}
 /**
  * @param {string} image - путь к логотипу на сервере
  * @param {string} width - ширина логотипа
@@ -18,11 +14,9 @@ type TLogoProps = {
 
 const Logo: FC<TLogoProps> = ({ image, width, height }) => {
   return (
-    <div className={styles.container}>
-      <Link to={Routes.HOME} className={styles.link}>
-        <img src={image} alt="Logo" style={{ width, height }} />
-      </Link>
-    </div>
+    <Link to={Routes.HOME} className={styles.link}>
+      <img src={image} alt="Logo" style={{ width, height }} />
+    </Link>
   )
 }
 

src/shared/ui/logo/logo.module.scss

@@ -1,11 +1,4 @@
-.logo {
-  width: 138px;
-  height: 46px;
-}
-
 .link {
   display: flex;
-  width: 138px;
-  height: 46px;
   margin-right: 92px;
 }

src/shared/ui/logo/model/skeleton/LogoSkeleton.module.scss

@@ -0,0 +1,4 @@
+.skeleton {
+  display: flex;
+  margin-right: 92px;
+}

src/shared/ui/logo/model/skeleton/LogoSkeleton.tsx

@@ -0,0 +1,23 @@
+import { FC } from 'react'
+import Skeleton from 'react-loading-skeleton'
+import 'react-loading-skeleton/dist/skeleton.css'
+
+import { TLogoProps } from '../types/types'
+
+import styles from './LogoSkeleton.module.scss'
+
+/**
+ * Компонент LogoSkeleton - заставка, пока не загрузится картинка логотипа
+ * @param {string} width - ширина скелетона
+ * @param {string} height  - высота скелетона
+ */
+
+const LogoSkeleton: FC<TLogoProps> = ({ width, height }) => {
+  return (
+    <div className={styles.skeleton}>
+      <Skeleton count={1} width={width} height={height} />
+    </div>
+  )
+}
+
+export default LogoSkeleton

src/shared/ui/logo/model/types/types.ts

@@ -0,0 +1,6 @@
+export type TLogoProps = {
+  image?: string
+  width: string
+  height: string
+  logo?: string
+}

src/widgets/Footer/Footer.tsx

@@ -1,4 +1,6 @@
 import { useState, useEffect } from 'react'
+import Skeleton from 'react-loading-skeleton'
+import 'react-loading-skeleton/dist/skeleton.css'
 import { useDispatch, useSelector } from 'react-redux'
 
 import { AppDispatch } from '@/app/providers/StoreProvider/config/store'
@@ -8,6 +10,7 @@ import SubscribeForm from '@/features/SubscribeForm/SubscribeForm'
 import { Button } from '@/shared/ui/Button/Button'
 import Link from '@/shared/ui/Link/Link'
 import Logo from '@/shared/ui/logo/Logo'
+import LogoSkeleton from '@/shared/ui/logo/model/skeleton/LogoSkeleton'
 import Modal from '@/shared/ui/Modal/Modal'
 import Paragraph from '@/shared/ui/Paragraph/Paragraph'
 
@@ -20,6 +23,7 @@ function Footer() {
   const coreBaseData = useSelector(getCoreBaseFooterSelector)
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [isModalClosing, setIsModalClosing] = useState(false)
+  const logo = coreBaseData.footer.main_logo.image
 
   const changeModalState = () => {
     setIsModalOpen(!isModalOpen)
@@ -45,8 +49,14 @@ function Footer() {
         <div className={styles.footer__container}>
           <div className={styles.footer__middle}>
             <div className={styles['footer__col-one']}>
-              <Logo image={coreBaseData.footer.main_logo.image} width="114px" height="38px" />
-              <Paragraph className={styles.footer__caption}>{coreBaseData.footer.company_info}</Paragraph>
+              {!logo ? (
+                <LogoSkeleton width="114px" height="38px" />
+              ) : (
+                <Logo image={logo} width="114px" height="38px" />
+              )}
+              <Paragraph className={styles.footer__caption}>
+                {coreBaseData.footer.company_info || <Skeleton count={1} />}
+              </Paragraph>
             </div>
             <div className={styles['footer__col-two']}>
               <SubscribeForm type="footer" onSubmit={onSubmitHandler}></SubscribeForm>

src/widgets/Header/Header.tsx

@@ -17,6 +17,7 @@ import CatalogLink from '@/shared/ui/CatalogLink/CatalogLink'
 import ContextMenuElement from '@/shared/ui/ContextMenuElement/ContextMenuElement'
 import Link from '@/shared/ui/Link/Link'
 import Logo from '@/shared/ui/logo/Logo'
+import LogoSkeleton from '@/shared/ui/logo/model/skeleton/LogoSkeleton'
 import Modal from '@/shared/ui/Modal/Modal'
 import Paragraph from '@/shared/ui/Paragraph/Paragraph'
 import CatalogNodeItem from '@/widgets/CatalogNodeItem/CatalogNodeItem'
@@ -37,6 +38,7 @@ function Header() {
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [isModalClosing, setIsModalClosing] = useState(false)
   const phoneNumber = coreBaseData.header.support.phone_number
+  const logo = coreBaseData.header.main_logo.image
 
   const changeModalState = () => {
     setIsModalOpen(!isModalOpen)
@@ -147,7 +149,11 @@ function Header() {
           </div>
 
           <div className={styles['header__row-two']}>
-            <Logo image={coreBaseData.header.main_logo.image} width="138px" height="46px" />
+            {!logo ? (
+              <LogoSkeleton width="138px" height="46px" />
+            ) : (
+              <Logo image={logo} width="138px" height="46px" />
+            )}
             <SearchProduct />
             <HeaderAccount {...headerAccountData} />
           </div>