Skip to content

Commit

Permalink
enhancement_306_header_logo_skeleton
Browse files Browse the repository at this point in the history
  • Loading branch information
AlexanderMorugin committed Apr 26, 2024
1 parent d4f890a commit b159e55
Show file tree
Hide file tree
Showing 7 changed files with 56 additions and 20 deletions.
14 changes: 4 additions & 10 deletions src/shared/ui/logo/Logo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 - ширина логотипа
Expand All @@ -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>
)
}

Expand Down
7 changes: 0 additions & 7 deletions src/shared/ui/logo/logo.module.scss
Original file line number Diff line number Diff line change
@@ -1,11 +1,4 @@
.logo {
width: 138px;
height: 46px;
}

.link {
display: flex;
width: 138px;
height: 46px;
margin-right: 92px;
}
4 changes: 4 additions & 0 deletions src/shared/ui/logo/model/skeleton/LogoSkeleton.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.skeleton {
display: flex;
margin-right: 92px;
}
23 changes: 23 additions & 0 deletions src/shared/ui/logo/model/skeleton/LogoSkeleton.tsx
Original file line number Diff line number Diff line change
@@ -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
6 changes: 6 additions & 0 deletions src/shared/ui/logo/model/types/types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export type TLogoProps = {
image?: string
width: string
height: string
logo?: string
}
14 changes: 12 additions & 2 deletions src/widgets/Footer/Footer.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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'

Expand All @@ -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)
Expand All @@ -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>
Expand Down
8 changes: 7 additions & 1 deletion src/widgets/Header/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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)
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit b159e55

Please sign in to comment.