From 506285479afdae02f9b9b233d51b9c3ff4a6f92e Mon Sep 17 00:00:00 2001
From: "Carlos A. Cabrera" <cacabrer@adobe.com>
Date: Thu, 2 Apr 2020 18:17:47 -0500
Subject: [PATCH] custom logo

---
 package.json                            |  2 +-
 src/components/App/App.tsx              |  7 +------
 src/components/Header/Header.tsx        | 10 +++++++---
 src/components/Header/Logo.skeleton.tsx |  8 ++++++++
 4 files changed, 17 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Header/Logo.skeleton.tsx

diff --git a/package.json b/package.json
index 1c7a8f0..b614c84 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pmet-public/luma-ui",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Luma React UI LIbrary",
   "repository": "https://github.com/PMET-public/luma-ui.git",
   "author": "Carlos A. Cabrera @fnhhipster",
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index b2a57ae..4376cfd 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -7,8 +7,6 @@ import TabBar from '../TabBar'
 import Footer, { FooterProps } from '../Footer'
 import { IconProps } from '../Icon'
 
-import LogoImageSvg from '../../../public/images/luma.svg'
-
 import IconSearchSvg from 'remixicon/icons/System/search-line.svg'
 import IconSearchActiveSvg from 'remixicon/icons/System/search-fill.svg'
 import IconBagSvg from 'remixicon/icons/Finance/shopping-bag-line.svg'
@@ -88,10 +86,7 @@ export const App: Component<AppProps> = ({
             <HeaderContainer as="header" $margin>
                 <Header
                     loading={loading}
-                    logo={{
-                        svg: LogoImageSvg,
-                        ...logo,
-                    }}
+                    logo={{ ...logo }}
                     menu={{
                         items: menu,
                     }}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 5bd6c71..c097d28 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -2,13 +2,16 @@ import React from 'react'
 import { Component, Props } from '../../lib'
 import { Root, Logo, Menu, MenuWrapper, MenuItem, Utilities, UtilitiesItem, IconWrapper } from './Header.styled'
 import { ReactComponentLike } from 'prop-types'
+import { LogoSkeleton } from './Logo.skeleton'
 import { MenuSkeleton } from './Menu.skeleton'
 import Icon, { IconProps } from '../Icon'
+import LogoImageSvg from '../../../public/images/luma.svg'
 
 export type HeaderProps = {
     loading?: boolean
     logo: Props<{
-        svg: ReactComponentLike
+        loading?: boolean
+        svg?: ReactComponentLike
     }>
     menu: {
         items: Props<{
@@ -27,7 +30,7 @@ export type HeaderProps = {
 
 export const Header: Component<HeaderProps> = ({
     loading,
-    logo: { svg: LogoSvg, ...logo },
+    logo: { svg: StoreLogo, ...logo },
     menu: { items: menuItems, ...menu },
     utilities: { items: utilitiesItems, ...utilities },
     ...props
@@ -35,8 +38,9 @@ export const Header: Component<HeaderProps> = ({
     return (
         <Root {...props}>
             {/* Logo */}
+
             <Logo {...logo}>
-                <LogoSvg />
+                {loading && !StoreLogo ? <LogoSkeleton /> : StoreLogo ? <StoreLogo /> : <LogoImageSvg />}
             </Logo>
 
             {/* Menu */}
diff --git a/src/components/Header/Logo.skeleton.tsx b/src/components/Header/Logo.skeleton.tsx
new file mode 100644
index 0000000..fdd8bd0
--- /dev/null
+++ b/src/components/Header/Logo.skeleton.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import Skeleton from '../Skeleton'
+
+export const LogoSkeleton = ({ ...props }) => (
+    <Skeleton height={30} width={100} {...props}>
+        <rect x="0" y="0" width="100%" height="100%" />
+    </Skeleton>
+)