@crystaldesign/content-item 26.13.0-beta.2 → 26.13.0-beta.21

package/build/esm/index.js

@@ -924,6 +924,31 @@ var loading = "loading-089Ib";
 var css_248z = ".root-wrapper-WNprt {\n  min-height: 60px;\n  position: relative;\n  overscroll-behavior: contain;\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.content-wrapper-K5XIs {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  transition: opacity 0.2s ease-in-out;\n}\n.content-wrapper-K5XIs.loading-089Ib {\n  opacity: 0.5;\n}\n\n.content-wrapper-K5XIs .content-item-link {\n  touch-action: manipulation;\n  color: #1668dc;\n  text-decoration: none;\n  background-color: transparent;\n  outline: none;\n  cursor: pointer;\n  transition: color 0.2s ease-in-out;\n}\n\n.content-wrapper-K5XIs .content-item-link:hover {\n  color: #15417e;\n}\n";
 styleInject(css_248z);
 
+/**
+ * True once `active` has stayed true for `delay` ms, false again as soon as it ends. A loader driven by it does not
+ * show at all for a fast load, which would otherwise only flicker.
+ */
+function useDelayedFlag(active, delay) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    shown = _useState2[0],
+    setShown = _useState2[1];
+  useEffect(function () {
+    if (!active) {
+      setShown(false);
+      return;
+    }
+    var timer = setTimeout(function () {
+      return setShown(true);
+    }, delay);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [active, delay]);
+  return shown;
+}
+
+var LOADER_DELAY_MS = 300;
 var ContentItems = function ContentItems(_ref) {
   var wrapperStyle = _ref.wrapperStyle,
     params = _ref.params;
@@ -932,11 +957,13 @@ var ContentItems = function ContentItems(_ref) {
     loading$1 = _useContentItem.loading,
     error = _useContentItem.error,
     currentIdOrCodex = _useContentItem.currentIdOrCodex;
+  // Every update of the content passes through a loading state; only a slow one gets the loader
+  var showLoading = useDelayedFlag(!!loading$1, LOADER_DELAY_MS);
   return /*#__PURE__*/jsxs("div", {
     className: rootWrapper,
     id: 'diva-content-item',
-    children: [loading$1 && /*#__PURE__*/jsx(Loader, {}), Array.isArray(content) ? /*#__PURE__*/jsxs("div", {
-      className: classNames(contentWrapper, _defineProperty({}, loading, loading$1)),
+    children: [showLoading && /*#__PURE__*/jsx(Loader, {}), Array.isArray(content) ? /*#__PURE__*/jsxs("div", {
+      className: classNames(contentWrapper, _defineProperty({}, loading, showLoading)),
       style: wrapperStyle,
       children: [error && /*#__PURE__*/jsx(ErrorBox, {
         error: error

package/build/types/content-item/src/Components/ContentItems/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/ContentItems/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,UAAU,iBAAiB;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;CACjC;AAED,QAAA,MAAM,YAAY,6BAA8B,iBAAiB,sBAiBhE,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/ContentItems/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,UAAU,iBAAiB;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;CACjC;AAED,QAAA,MAAM,YAAY,6BAA8B,iBAAiB,sBAqBhE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/build/types/content-item/src/Components/ContentItems/useDelayedFlag.d.ts

@@ -0,0 +1,6 @@
+/**
+ * True once `active` has stayed true for `delay` ms, false again as soon as it ends. A loader driven by it does not
+ * show at all for a fast load, which would otherwise only flicker.
+ */
+export declare function useDelayedFlag(active: boolean, delay: number): boolean;
+//# sourceMappingURL=useDelayedFlag.d.ts.map

package/build/types/content-item/src/Components/ContentItems/useDelayedFlag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDelayedFlag.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/ContentItems/useDelayedFlag.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAatE"}

package/build/types/content-item/src/tests/useDelayedFlag.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useDelayedFlag.test.d.ts.map

package/build/types/content-item/src/tests/useDelayedFlag.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDelayedFlag.test.d.ts","sourceRoot":"","sources":["../../../../../src/tests/useDelayedFlag.test.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystaldesign/content-item",
-  "version": "26.13.0-beta.2",
+  "version": "26.13.0-beta.21",
   "description": "CMS content item rendering (text, media, links).",
   "license": "MIT",
   "scripts": {
@@ -25,7 +25,7 @@
     "webpack": "^5.73.0"
   },
   "dependencies": {
-    "@crystaldesign/quick-config": "26.13.0-beta.2",
+    "@crystaldesign/quick-config": "26.13.0-beta.21",
     "axios": "^1.7.7",
     "classnames": "^2.5.1",
     "swiper": "^12.1.2"
@@ -37,5 +37,5 @@
   },
   "module": "build/esm/index.js",
   "types": "./build/types/content-item/src/index.d.ts",
-  "gitHead": "80503e32af3f8fc88ae4f632f1153cc6d0abec08"
+  "gitHead": "8924c019e83cd44f3f2d2ecf41d0e26143d30128"
 }