From f40b0de6dbd7972937e72e98460545a84495881a Mon Sep 17 00:00:00 2001 From: "Carlos A. Cabrera" Date: Sat, 7 Dec 2019 10:11:10 -0600 Subject: [PATCH 1/3] removed console --- src/AppProvider.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/AppProvider.tsx b/src/AppProvider.tsx index 42f1258..2e45699 100644 --- a/src/AppProvider.tsx +++ b/src/AppProvider.tsx @@ -67,7 +67,6 @@ export const AppProvider: FunctionComponent = ({ children }) = */ useEffect(() => { const payload = localStorage.getItem('luma-ui/colorScheme') || 'light' - console.log({ payload }) dispatch({ type: 'setColorScheme', payload }) }, []) From 746cda508b83ec95e9be44a76b568a9d99ffc6e0 Mon Sep 17 00:00:00 2001 From: "Carlos A. Cabrera" Date: Mon, 9 Dec 2019 14:13:19 -0600 Subject: [PATCH 2/3] Lazy loaded --- package.json | 5 +++-- src/components/Image/Image.story.tsx | 25 +++++++++++++++++++++++++ src/components/Image/Image.tsx | 12 ++++++++++-- src/hooks/useImage.tsx | 25 ++++++++++++++++--------- yarn.lock | 10 +++++++++- 5 files changed, 63 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index eec53bd..77fbf6e 100644 --- a/package.json +++ b/package.json @@ -27,9 +27,9 @@ }, "devDependencies": { "@babel/core": "^7.7.2", - "@babel/plugin-syntax-dynamic-import": "^7.2.0", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.7.4", "@babel/plugin-proposal-optional-chaining": "^7.7.5", + "@babel/plugin-syntax-dynamic-import": "^7.2.0", "@babel/preset-env": "^7.7.1", "@babel/preset-react": "^7.0.0", "@babel/preset-typescript": "^7.3.3", @@ -78,5 +78,6 @@ "tslint-plugin-prettier": "^2.0.1", "typescript": "^3.7.3", "webpack": "^4.34.0" - } + }, + "dependencies": {} } diff --git a/src/components/Image/Image.story.tsx b/src/components/Image/Image.story.tsx index 1662a08..823820a 100644 --- a/src/components/Image/Image.story.tsx +++ b/src/components/Image/Image.story.tsx @@ -37,3 +37,28 @@ storiesOf('📦 Components/Image', module) transition={boolean('transition', true)} /> )) + .add('Lazy Loaded', () => ( +
+ + +
+ )) diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx index d9a3a0b..d20fe99 100644 --- a/src/components/Image/Image.tsx +++ b/src/components/Image/Image.tsx @@ -1,8 +1,9 @@ -import React from 'react' +import React, { useRef } from 'react' import { Component } from '../../lib' import { Root, LoadedImage, Placeholder, ErrorIcon } from './Image.styled' import { useImage, Image } from '../../hooks/useImage' +import { useMeasure } from '../../hooks/useMeasure' export type ImageProps = { alt?: string @@ -12,6 +13,7 @@ export type ImageProps = { vignette?: number transition?: boolean title?: string + lazy?: boolean } export const ImageComponent: Component = ({ @@ -22,9 +24,14 @@ export const ImageComponent: Component = ({ vignette = 0, width: _width, height: _height, + lazy = true, ...props }) => { - const image = useImage(src) + const imageElem = useRef(null) + + const { offsetY } = useMeasure(imageElem) + + const image = useImage(src, lazy ? offsetY - 200 : undefined) const width = _width || image.size.width const height = _height || image.size.height @@ -32,6 +39,7 @@ export const ImageComponent: Component = ({ return ( { +export const useImage = (image: Image, lazyOffsetY?: number) => { const [src, setSrc] = useState('') const [loaded, setLoaded] = useState(false) const [error, setError] = useState(!image) @@ -19,6 +20,8 @@ export const useImage = (image: Image) => { const viewport = useResize() const theme = useContext(ThemeContext) + const { scrollY } = useScroll() + const handleImageLoad = (e: any) => { setSize({ width: e.currentTarget.naturalWidth, height: e.currentTarget.naturalHeight }) setLoaded(true) @@ -45,12 +48,7 @@ export const useImage = (image: Image) => { } }, [JSON.stringify(image), viewport.width]) - /** - * Load - */ - useEffect(() => { - if (!src) return - + const loadImage = useCallback(() => { const img = new Image() img.src = src @@ -74,8 +72,17 @@ export const useImage = (image: Image) => { } }, [src]) + /** + * Load + */ + useEffect(() => { + if (!src || loaded) return + const active = !lazyOffsetY || lazyOffsetY - viewport.height < scrollY + if (active) loadImage() + }, [src, loaded, viewport.height, lazyOffsetY, scrollY]) + return { - src, + src: loaded ? src : undefined, loaded, error, size, diff --git a/yarn.lock b/yarn.lock index a99e6e6..62f5791 100644 --- a/yarn.lock +++ b/yarn.lock @@ -307,7 +307,7 @@ "@babel/helper-plugin-utils" "^7.0.0" "@babel/plugin-syntax-json-strings" "^7.7.4" -"@babel/plugin-proposal-nullish-coalescing-operator@7.7.4": +"@babel/plugin-proposal-nullish-coalescing-operator@7.7.4", "@babel/plugin-proposal-nullish-coalescing-operator@^7.7.4": version "7.7.4" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.7.4.tgz#7db302c83bc30caa89e38fee935635ef6bd11c28" integrity sha512-TbYHmr1Gl1UC7Vo2HVuj/Naci5BEGNZ0AJhzqD2Vpr6QPFWpUmBRLrIDjedzx7/CShq0bRDS2gI4FIs77VHLVQ== @@ -347,6 +347,14 @@ "@babel/helper-plugin-utils" "^7.0.0" "@babel/plugin-syntax-optional-chaining" "^7.7.4" +"@babel/plugin-proposal-optional-chaining@^7.7.5": + version "7.7.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.7.5.tgz#f0835f044cef85b31071a924010a2a390add11d4" + integrity sha512-sOwFqT8JSchtJeDD+CjmWCaiFoLxY4Ps7NjvwHC/U7l4e9i5pTRNt8nDMIFSOUL+ncFbYSwruHM8WknYItWdXw== + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-syntax-optional-chaining" "^7.7.4" + "@babel/plugin-proposal-unicode-property-regex@^7.7.4": version "7.7.4" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.7.4.tgz#7c239ccaf09470dbe1d453d50057460e84517ebb" From 2999c775332da680cd8e7cb40ff187764ae3dbde Mon Sep 17 00:00:00 2001 From: "Carlos A. Cabrera" Date: Mon, 9 Dec 2019 14:57:36 -0600 Subject: [PATCH 3/3] bump --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 77fbf6e..c289ab9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@pmet-public/luma-ui", - "version": "1.0.0-beta.13", + "version": "1.0.0-beta.14", "description": "Luma React UI LIbrary", "repository": "https://github.com/PMET-public/luma-ui.git", "author": "Carlos A. Cabrera @fnhhipster",