@micromag/viewer 0.3.430 → 0.3.432

package/es/index.js

@@ -1800,7 +1800,7 @@ function ViewerScreen(_ref) {
       transformOrigin: scale !== null ? '0 0' : null,
       opacity: mounted ? 1 : null
     }
-  }, mounted ? /*#__PURE__*/React.createElement(Screen, {
+  }, mounted || current ? /*#__PURE__*/React.createElement(Screen, {
     screen: screen,
     renderContext: renderContext,
     screenState: screenState,
@@ -2920,6 +2920,19 @@ var Viewer = function Viewer(_ref) {
       clearTimeout(timeout);
     };
   }, [shareIncentiveLabel, setShareIncentiveVisible, hasShareIncentive, incentiveLabel, currentIncentiveLabel, setCurrentShareIncentive, isView]);
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    preloadNeighbors = _useState10[0],
+    setPreloadNeighbors = _useState10[1];
+  useEffect(function () {
+    setPreloadNeighbors(false);
+    var timeout = setTimeout(function () {
+      setPreloadNeighbors(true);
+    }, 1000);
+    return function () {
+      clearTimeout(timeout);
+    };
+  }, [screenIndex]);
   return /*#__PURE__*/React.createElement(StoryProvider, {
     story: parsedStory
   }, /*#__PURE__*/React.createElement(ScreenSizeProvider, {
@@ -2985,7 +2998,7 @@ var Viewer = function Viewer(_ref) {
     }
   }, screens.map(function (screen, i) {
     var current = screenIndex === i;
-    var active = i >= screenIndex - neighborScreensActive && i <= screenIndex + neighborScreensActive;
+    var active = i >= screenIndex - neighborScreensActive && i <= screenIndex + neighborScreensActive && preloadNeighbors;
     var screenStyles = getScreenStylesByIndex(i, progressSpring);
     return /*#__PURE__*/React.createElement(animated.div, {
       key: "screen-viewer-".concat(screen.id || '', "-").concat(i + 1),
@@ -2997,7 +3010,7 @@ var Viewer = function Viewer(_ref) {
       screenState: current ? screenState : null,
       index: i,
       current: current,
-      active: active,
+      active: active || current,
       ready: current && transitioned,
       mediaRef: function mediaRef(ref) {
         screensMediasRef.current[i] = ref;

package/lib/index.js

@@ -1804,7 +1804,7 @@ function ViewerScreen(_ref) {
       transformOrigin: scale !== null ? '0 0' : null,
       opacity: mounted ? 1 : null
     }
-  }, mounted ? /*#__PURE__*/React.createElement(components.Screen, {
+  }, mounted || current ? /*#__PURE__*/React.createElement(components.Screen, {
     screen: screen,
     renderContext: renderContext,
     screenState: screenState,
@@ -2924,6 +2924,19 @@ var Viewer = function Viewer(_ref) {
       clearTimeout(timeout);
     };
   }, [shareIncentiveLabel, setShareIncentiveVisible, hasShareIncentive, incentiveLabel, currentIncentiveLabel, setCurrentShareIncentive, isView]);
+  var _useState9 = React.useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    preloadNeighbors = _useState10[0],
+    setPreloadNeighbors = _useState10[1];
+  React.useEffect(function () {
+    setPreloadNeighbors(false);
+    var timeout = setTimeout(function () {
+      setPreloadNeighbors(true);
+    }, 1000);
+    return function () {
+      clearTimeout(timeout);
+    };
+  }, [screenIndex]);
   return /*#__PURE__*/React.createElement(contexts.StoryProvider, {
     story: parsedStory
   }, /*#__PURE__*/React.createElement(contexts.ScreenSizeProvider, {
@@ -2989,7 +3002,7 @@ var Viewer = function Viewer(_ref) {
     }
   }, screens.map(function (screen, i) {
     var current = screenIndex === i;
-    var active = i >= screenIndex - neighborScreensActive && i <= screenIndex + neighborScreensActive;
+    var active = i >= screenIndex - neighborScreensActive && i <= screenIndex + neighborScreensActive && preloadNeighbors;
     var screenStyles = getScreenStylesByIndex(i, progressSpring);
     return /*#__PURE__*/React.createElement(web.animated.div, {
       key: "screen-viewer-".concat(screen.id || '', "-").concat(i + 1),
@@ -3001,7 +3014,7 @@ var Viewer = function Viewer(_ref) {
       screenState: current ? screenState : null,
       index: i,
       current: current,
-      active: active,
+      active: active || current,
       ready: current && transitioned,
       mediaRef: function mediaRef(ref) {
         screensMediasRef.current[i] = ref;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.3.430",
+    "version": "0.3.432",
     "private": false,
     "description": "",
     "keywords": [
@@ -61,15 +61,15 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.430",
-        "@micromag/element-badge": "^0.3.430",
-        "@micromag/element-scroll": "^0.3.430",
-        "@micromag/element-share-options": "^0.3.430",
-        "@micromag/element-webview": "^0.3.430",
-        "@micromag/elements": "^0.3.430",
-        "@micromag/fields": "^0.3.430",
-        "@micromag/intl": "^0.3.430",
-        "@micromag/screens": "^0.3.430",
+        "@micromag/core": "^0.3.432",
+        "@micromag/element-badge": "^0.3.432",
+        "@micromag/element-scroll": "^0.3.432",
+        "@micromag/element-share-options": "^0.3.432",
+        "@micromag/element-webview": "^0.3.432",
+        "@micromag/elements": "^0.3.432",
+        "@micromag/fields": "^0.3.432",
+        "@micromag/intl": "^0.3.432",
+        "@micromag/screens": "^0.3.432",
         "@react-spring/core": "^9.6.1",
         "@react-spring/web": "^9.6.1",
         "@use-gesture/react": "^10.2.4",
@@ -89,5 +89,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "da790d76dba9d8e308d9f9c4e51d93a4a0e012a9"
+    "gitHead": "01df977a7eb5166425c0078c2369ea240549f386"
 }