@shopgate/pwa-common 7.23.0-beta.3 → 7.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Image/Image.js +13 -4
- package/package.json +3 -3
|
@@ -20,10 +20,19 @@ var sources=useMemo(function(){// Create a preview source when resolutions array
|
|
|
20
20
|
var preview=resolutions.length>1?getFullImageSource(src,resolutions[resolutions.length-2]):null;// Create a main source when resolutions array has at least one element (highest resolution)
|
|
21
21
|
var main=resolutions.length>0?getFullImageSource(src,resolutions[resolutions.length-1]):null;return{// Only assign preview source if it is different from the main source. Image swap logic
|
|
22
22
|
// will not run when no preview source is available.
|
|
23
|
-
preview:preview!==main?preview:null,main:main};},[resolutions,src]);var imgRef=useRef(null);var _useState=useState(
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
23
|
+
preview:preview!==main?preview:null,main:main};},[resolutions,src]);var imgRef=useRef(null);var _useState=useState(false),_useState2=_slicedToArray(_useState,2),imageLoaded=_useState2[0],setImageLoaded=_useState2[1];var _useState3=useState(!lazy),_useState4=_slicedToArray(_useState3,2),isInView=_useState4[0],setIsInView=_useState4[1];/**
|
|
24
|
+
* Determines if the initial image is cached.
|
|
25
|
+
*
|
|
26
|
+
* This hook uses the `useMemo` hook to memoize the result. It creates a new
|
|
27
|
+
* `Image` object, sets its `src` to either the preview or main source, and checks
|
|
28
|
+
* if the image is complete (cached). The `src` is then reset to an empty string to abort
|
|
29
|
+
* the image request. The actual request is handled by the img tag.
|
|
30
|
+
*
|
|
31
|
+
* @returns {boolean} - Returns `true` if the image is cached, otherwise `false`.
|
|
32
|
+
*/var initialImageCached=useMemo(function(){// The return value of this hook is used to determine if the image should fade in after loading
|
|
33
|
+
// from the server. When the `animating` prop is set to false, the image should not fade in,
|
|
34
|
+
// so we return true to disable the fade-in mechanism.
|
|
35
|
+
if(!animating)return true;var img=new window.Image();img.src=sources.preview||sources.main;var complete=img.complete;img.src='';return complete;},[animating,sources.main,sources.preview]);// Effect to create an Intersection Observer to enable lazy loading of preview images
|
|
27
36
|
useEffect(function(){if(!lazy)return undefined;// Intersection Observer to check if the image is in (or near) the viewport
|
|
28
37
|
var observer=new IntersectionObserver(function(_ref2){var _ref3=_slicedToArray(_ref2,1),entry=_ref3[0];if(entry.isIntersecting){setIsInView(true);// stop observing once visible
|
|
29
38
|
observer.unobserve(entry.target);}},// load a bit earlier
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shopgate/pwa-common",
|
|
3
|
-
"version": "7.23.0
|
|
3
|
+
"version": "7.23.0",
|
|
4
4
|
"description": "Common library for the Shopgate Connect PWA.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Shopgate <support@shopgate.com>",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@redux-devtools/extension": "^3.3.0",
|
|
19
19
|
"@sentry/browser": "6.0.1",
|
|
20
|
-
"@shopgate/pwa-benchmark": "7.23.0
|
|
20
|
+
"@shopgate/pwa-benchmark": "7.23.0",
|
|
21
21
|
"@virtuous/conductor": "~2.5.0",
|
|
22
22
|
"@virtuous/react-conductor": "~2.5.0",
|
|
23
23
|
"@virtuous/redux-persister": "1.1.0-beta.7",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"url-search-params": "^0.10.0"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@shopgate/pwa-core": "7.23.0
|
|
46
|
+
"@shopgate/pwa-core": "7.23.0",
|
|
47
47
|
"@types/react-portal": "^3.0.9",
|
|
48
48
|
"lodash": "^4.17.4",
|
|
49
49
|
"prop-types": "~15.8.1",
|