add lazy image

sibrha · sibrha · commit 603e15dac537 · 2020-08-25T12:03:19.000+07:00
diff --git a/client/components/LazyImage/index.js b/client/components/LazyImage/index.js
@@ -55,4 +55,4 @@ LazyImage.defaultProps = {
   width: '100%',
 };
 
-export default LazyImage;
+export default LazyImage;
diff --git a/client/components/LazyImage/styles.scss b/client/components/LazyImage/styles.scss
@@ -0,0 +1,13 @@
+.fadeIn {
+  opacity: 0;
+
+  &:not([src]) {
+    visibility: hidden;
+  }
+
+  &.initial,
+  &.loaded,
+  &.error {
+    opacity: 1;
+  }
+}
diff --git a/client/routes/Home/components/index.js b/client/routes/Home/components/index.js
@@ -88,4 +88,4 @@ function Home() {
   );
 }
 
-export default Home;
+export default Home;
diff --git a/package.json b/package.json
@@ -86,6 +86,7 @@
     "unfetch": "^4.1.0",
     "url-loader": "1.1.2",
     "url-polyfill": "^1.1.7",
+    "vanilla-lazyload": "11.0.6",
     "webpack": "4.29.6",
     "webpack-dev-server": "3.8.0",
     "webpack-manifest-plugin": "2.0.4",
diff --git a/yarn.lock b/yarn.lock
@@ -11877,6 +11877,11 @@ value-equal@^0.4.0:
   resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7"
   integrity sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw==
 
+vanilla-lazyload@11.0.6:
+  version "11.0.6"
+  resolved "https://registry.yarnpkg.com/vanilla-lazyload/-/vanilla-lazyload-11.0.6.tgz#76a13ece6c256d5f6451bc0687038c485441ca11"
+  integrity sha512-mEOSXyF0W/9mGuqTWFIEaqiVqPD10EBTur0tRKmPC0Z/a0r4LWB6c/4D24nmhGtnEDiDGtK2rUIyl8P3PJhUOw==
+
 vary@^1.1.2, vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"

Original file line number	Diff line number	Diff line change
`@@ -88,4 +88,4 @@ function Home() {`
`88`	`88`	`);`
`89`	`89`	`}`
`90`	`90`
`91`		`-export default Home;`
	`91`	`+export default Home;`