From 3bd514f6d638000e02701523494861aae037deff Mon Sep 17 00:00:00 2001
From: Zaharov Mikhail <30783554+zakharovmikhail@users.noreply.github.com>
Date: Sun, 17 Jul 2022 18:43:26 +0400
Subject: [PATCH] fix(LazyLoadImage): SSR Warning: Prop style did not match
 (#104)

react doesn't apply style attributes with empty value (empty string) in
markup, but still make a strict comparison and try to find
background size and background image properties when hydrating client.

Warning: Prop style did not match. Server: "color:transparent;
display:inline-block;height:244;width:244" Client: "background-image:;
background-size:;color:transparent;display:inline-block;
height:244;width:244"

Co-authored-by: mikhail_zakharov <mikhail@getic.eu>
---
 src/components/LazyLoadImage.jsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/LazyLoadImage.jsx b/src/components/LazyLoadImage.jsx
index eb739a4..cc5af81 100644
--- a/src/components/LazyLoadImage.jsx
+++ b/src/components/LazyLoadImage.jsx
@@ -95,6 +95,11 @@ class LazyLoadImage extends React.Component {
 		const { loaded } = this.state;
 
 		const loadedClassName = loaded ? ' lazy-load-image-loaded' : '';
+		const wrapperBackground = loaded || !placeholderSrc ? {} : 
+			{
+				backgroundImage: `url(${placeholderSrc})`,
+				backgroundSize: '100% 100%'
+			}
 
 		return (
 			<span
@@ -105,12 +110,7 @@ class LazyLoadImage extends React.Component {
 					loadedClassName
 				}
 				style={{
-					backgroundImage:
-						loaded || !placeholderSrc
-							? ''
-							: `url(${placeholderSrc})`,
-					backgroundSize:
-						loaded || !placeholderSrc ? '' : '100% 100%',
+					...wrapperBackground,
 					color: 'transparent',
 					display: 'inline-block',
 					height: height,