feat(htmlimage): added experimental placeholder properties

seznam · Feb 5, 2021 · 2920c6a · 2920c6a
1 parent 502b80d
commit 2920c6a
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 4 deletions.
diff --git a/src/atom.less b/src/atom.less
@@ -40,6 +40,17 @@
 				0.75s cubic-bezier(0.150, 0.555, 0.695, 0.675) resource-fade-in_saturation*/;
 	}
 
+	&blur {
+		-webkit-filter: blur(20px);
+		filter: blur(20px);
+		transition: visibility 0ms ease 400ms;
+		visibility: hidden;
+	}
+
+	&visibility {
+		visibility: visible;
+	};
+
 	&responsive {
 		display: block;
 		position: relative;

diff --git a/src/image/HtmlImage.jsx b/src/image/HtmlImage.jsx
@@ -124,6 +124,16 @@ export default class HtmlImage extends React.PureComponent {
             placeholder={!this.state.noloading}
           />
         ) : null}
+        {this.props.placeholder ? (
+          <img 
+            src={this.props.placeholder}
+            alt={this.props.alt}
+            className={this._helper.cssClasses({
+              'atm-blur': true,
+              'atm-fill': true,
+              'atm-visibility': !(this.state.noloading && this._visibleInViewport)
+            })}/>
+        ) : null}
         {this.state.noloading ? (
           <img
             src={this.props.src}
@@ -139,7 +149,7 @@ export default class HtmlImage extends React.PureComponent {
             {...this._helper.getAriaProps(this.props)}
           />
         ) : null}
-        {this.state.showLoader && !this.state.noloading ? (
+        {this.state.showLoader  && !this.state.noloading ? (
           <Loader mode="small" layout="center" />
         ) : null}
         {!this.disableNoScript && (
@@ -204,12 +214,16 @@ export default class HtmlImage extends React.PureComponent {
     }, TIME_TO_SHOW_LOADER);
 
     let image = new Image();
-    image.onload = () => {
-      this._imageIsLoaded();
-    };
+
+    if (!image.decode) {
+      image.onload = () => {
+        this._imageIsLoaded();
+      };
+    }     
     image.onerror = () => {
       this._imageIsLoaded();
     };
+
     let { src, srcSet, sizes } = this.props;
 
     if (srcSet && this._areResponsiveImagesSupported(image)) {
@@ -222,6 +236,14 @@ export default class HtmlImage extends React.PureComponent {
       image.src = src;
     }
 
+    if (image.decode) {
+      image.decode().then(() => {
+        this._imageIsLoaded();
+      }).catch(() => {
+        this._imageIsLoaded();
+      });
+    }
+
     if (!srcSet && !src) {
       this._imageIsLoaded();
     }